Link to home
Start Free TrialLog in
Avatar of Zado
ZadoFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Jquery problem in Chrome browser

Hi Experts!

I wrote the following code:
var formaction = $jj('#gpformarea_popup form').attr('action');
$jj('#gpformaction_popup').val(formaction);

Open in new window

Works fine in Firefox, but doesn't in Chrome.
The problem is in this part:
#gpformarea_popup form

Open in new window

because when I use 'form' only, it works fine:
var formaction = $jj('form').attr('action');
$jj('#gpformaction_popup').val(formaction);

Open in new window


Any ideas?
Thanks.
Avatar of haloexpertsexchange
haloexpertsexchange
Flag of United States of America image

Did you receive any javascript errors?
Try pushing F12 and that should bring up Chrome's version of firebug. See what you can find using that.
Avatar of Zado

ASKER

I don't see any errors
Avatar of Chris Stanyon
Nothing wrong with the code. Can we see your page in action.
Avatar of Zado

ASKER

Is there different way I can do this? Could be in javascript.
There's nothing wrong with the code (assuming your jQuery object is assigned to $jj), so the problem is likely to be caused by something else. Have a look at this fiddle - it works in Firefox and Chrome - http://jsfiddle.net/mXx7c/1/.

An alternative is to select the container first, and then 'find' the form in it:

var myContainer = $('#gpformarea_popup');
var formaction = myContainer.find('form').attr('action');
$('#gpformaction_popup').val(formaction);

Open in new window

This also assumes that the element with an ID of gpformaction_popup can have a value, such as a text input.
Avatar of Zado

ASKER

Thanks. I didn't post my code because it's quite complex one.
I found very interesting thing: when I change "<form ..." to anything else (for, formy, anything) and do the same in my jquery code it works! (???).
I'll try your suggestion now.
Avatar of Zado

ASKER

Exactly the same happens with your code, Chrome doesn't recognize 'form' tag or something like that.
Here's my whole fuction:

var myFunction_popup = function(e) {
	e.preventDefault();
	$jj('#gpformarea_popup').html($jj('#gpoptinform_popup').val());
	//reset textareas
	$jj('#gpformaction_popup').val('');
	$jj('#gpregularfields_popup').val('');
	$jj('#gphiddenfields_popup').val('');
	$jj('#gpignoredfields_popup').val('');
	$jj('#gpotherfields_popup').val('');
	$jj('#gpsubmitbutton_popup').val('');
	$jj('#gpnamefield_popup option').remove();
	$jj('#gpemailfield_popup option').remove();

	//$jj('#gpformaction_popup').val($jj('#gpformarea_popup form').attr('action'));
	
	var myContainer = $jj('#gpformarea_popup');
	var formaction = myContainer.find('formy').attr('action');
	$jj('#gpformaction_popup').val(formaction);
	
	$jj('input', '#gpformarea_popup').each(function() {
		//proccess the form
		var field = 'ignoredfields';
		if ($jj(this).attr('type') == 'hidden') field = 'hiddenfields';
		if ($jj(this).attr('type') == 'text' || $jj(this).attr('type') == 'email') field = 'textfields';
		if ($jj(this).attr('type') == 'submit') {
    		var submitname = $jj(this).attr('name');
    		$jj('#gpsubmitbutton_popup').val(submitname);
    		if ($jj('#gpsubmitbutton_popup').val()=="") { $jj('#gpsubmitbutton_popup').val("submit"); }
			field = 'none';
		}

		//make each text field an <option> and add insert it between <select> html tag
		if ($jj(this).attr('type') == 'text' || $jj(this).attr('type') == 'email') {
			//var optionvalue = $jj('<input type="' + $jj(this).attr('type') + '" name="' + $jj(this).attr('name') + '" value="'+ $jj(this).val() +'" />');
			var optionvalue = $jj(this).attr('name');
			temp = '<option value="' + optionvalue + '">' + $jj(this).attr('name') + '</option>';
			$jj('#gpnamefield_popup').append(temp);
			$jj('#gpemailfield_popup').append(temp);
		}
		
		$jj('#gp' + field + '_popup').val($jj('#gp' + field + '_popup').val() + '<input type="' + $jj(this).attr('type') + '" name="' + $jj(this).attr('name') + '" value="'+ $jj(this).val() +'" />\n');
	});
	//select the second option in second dropdown field
	$jj('#gpemailfield_popup option:eq(1)').attr('selected','selected');
};

$jj('#gpproccessit_popup').click(myFunction_popup); //onclick
//$jj('#gpoptinform_popup').keyup(myFunction_popup).mouseout(myFunction_popup); //auto
//disable name field
$jj(function() {
	enable_cb_popup();
	$jj("#gpdisablename_popup").click(enable_cb_popup);
});
function enable_cb_popup() {
	if (this.checked) { $jj("#gpnamefield_popup").attr("disabled", true); }
	else { $jj("#gpnamefield_popup").removeAttr("disabled"); }
}
//show or hide all data processed
$jj(function() {
	show_alldata_popup();
	$jj("#gpshowalldata_popup").click(show_alldata_popup);
});
function show_alldata_popup() {
	if (this.checked) { $jj("#gpalldata_popup").show(); }
	else { $jj("#gpalldata_popup").hide(); }
}

Open in new window



AND html:


<textarea name="Popup_optin1" id="gpoptinform_popup"><?php echo $DPopup_optin[0]; ?></textarea> Opt-in code<br/>
                    <div id="gpformarea_popup" style="display:none"></div>
                    <input type="button" value="Process" id="gpproccessit_popup"><br/>
                    <select name="Popup_optin2" id="gpnamefield_popup">
    					<option value="<?php echo $DPopup_optin[1]; ?>"><?php echo $DPopup_optin[1]; ?></option>
    				</select> 'NAME' field<br/>
                    <select name="Popup_optin3" id="gpemailfield_popup">
    					<option value="<?php echo $DPopup_optin[2]; ?>"><?php echo $DPopup_optin[2]; ?></option>
    				</select> 'EMAIL' field<br/>
                    <!-- <input name="Popup_optin4" value="on" type="checkbox" id="gpdisablename_popup" <?php echo $DPopup_optinch; ?>> disable NAME field<br/> -->
                    <input type="checkbox" id="gpshowalldata_popup"> show all processed data<br/>
                    <div id="gpalldata_popup" style="display:none">
                        <textarea name="Popup_optin5" id="gpformaction_popup"><?php echo $DPopup_optin[4]; ?></textarea> form action<br/>
                        <textarea name="Popup_optin6" id="gphiddenfields_popup"><?php echo $DPopup_optin[5]; ?></textarea> hidden fields<br/>
                        <textarea name="Popup_optin7" id="gpignoredfields_popup"><?php echo $DPopup_optin[6]; ?></textarea> ignored fields<br/>
                        <textarea name="Popup_optin8" id="gpotherfields_popup"><?php echo $DPopup_optin[7]; ?></textarea> other fields<br/>
                        <textarea name="Popup_optin9" id="gpsubmitbutton_popup"><?php echo $DPopup_optin[8]; ?></textarea> submit button<br/>
                    </div><br/>

Open in new window

Avatar of Zado

ASKER

I spent half a day on thi s**t, if you can help me you'll save my life! ;)
I appreciate your help.
quit honestly I do not see a form element in your html that was posted.
Plenty of fields that would go into a form but nothing that is something like
<form action="" method=""> which is most likely what chrome is looking for.
According to your code, there is no form inside the #gpformarea_popup div. In fact, there's no form anywhere in your code! You have this, which is empty:

<div id="gpformarea_popup" style="display:none"></div>
Avatar of Zado

ASKER

You paste whole form into textarea:
<textarea name="Popup_optin1" id="gpoptinform_popup"><?php echo $DPopup_optin[0]; ?></textarea> Opt-in code<br/>
And then click 'process' button, that's how it works.
Works fine in firefox, but doesn't in Chrome :/
Avatar of Zado

ASKER

I have no idea what is wrong with my code, but I found solution, however, I need your help.
I think if I change 'form' into any other name, like 'tempform' for example, it will work.
But my question is, how to change 'form' tag name only within '#gpformarea_popup'?

var myContainer = $jj('#gpformarea_popup');
$jj('form').replaceWith('tempform'); //<-------- need your help here, replace form only inside of '#gpformarea_popup'
var formaction = myContainer.find('form').attr('action');
$jj('#gpformaction_popup').val(formaction);
A textarea contains Text, not HTML elements, so if you have '<form>' inside a textarea it just treats it as text, not an HTML form element, so you can't use a jQuery selector to grab the <FORM>
Avatar of Zado

ASKER

Yes, but this part does the job:
$jj('#gpformarea_popup').html($jj('#gpoptinform_popup').val());
I keep trying. Thanks.
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial