669447 - bug form POST

Status: UNCONFIRMED

(Firefox :: General, defect)

Description

[laurent fourcadier]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.112 Safari/534.30

Steps to reproduce:

I basically have a form and I am using a dropdown to load different templates dynamically (once selected, it loads other fields dynamically on the page)


Actual results:

Elements that have been loaded dynamically do not appear in the POST request once the submit button has been clicked (I noticed this issue only on FF5, and did a cross browser testing and it appears to work on all the other browsers)


Expected results:

Elements loaded dynamically should appear in the POST request

Comment 1

[Matthias Versen [:Matti]]

Please provide a testcase

Comment 2

[laurent fourcadier]

What do you mean by testcase?

So let's say I have this form:

<form method="post" action="action">
<div class="simple">
    <label class="required" for="Newsletter_title">Titre <span class="required">*</span></label>    
<input type="text" id="Newsletter_title" name="Newsletter[title]" maxlength="100" size="60"></div>
<div class="simple">
    <label for="Newsletter_rate">Tarif</label>    
<input type="text" id="Newsletter_rate" name="Newsletter[rate]" maxlength="5" size="10">
</div>
<div class="simple">
    <label class="required" for="Newsletter_idTemplate">Modèle</label>    
<select id="Newsletter_idTemplate" name="Newsletter[idTemplate]" class="switchTemplate" maxlength="100">
<option selected="selected" value=""></option>
<option value="3">Weekly</option>
</select>
</div>

<div class="extraFields">
</div>

<a id="yt0" href="#">Annuler</a>    <input type="submit" value="action" name="yt1">
</form>


On the dropdown element (Newsletter_idTemplate) I have a listener that fires an ajax request which loads dynamically the div .extraFields with new elements (multiple inputs). After that when I submit the form and display the POST values, the new fields that have been added from the ajax request do not appear in the POST object.

Comment 3

[Mats Palmgren (inactive)]

Attachment: Testcase #1

Comment 4

[Mats Palmgren (inactive)]

Testcase #1 works for me in Firefox 5.0 on Linux64.

Comment 5

[laurent fourcadier]

Hello,

Just tried the attachment and it does not seem to represent well the issue.
When changing the dropdown Newsletter_idTemplate state (onChange event) it should populate the form with new elements (input) which does not appear to be the case.

Let me know if you want me to provide a full test case (did not know that I would be able to write JS as well)

Comment 6

[Mats Palmgren (inactive)]

Last I checked we don't fire an onChange event when selecting a new item
in a <select size=1> dropdown menu.  We fire it when you move the focus
away from the <select>.

Comment 7

[Mats Palmgren (inactive)]

Attachment: Testcase #2

Still works for me, since when you click "action" the <select> with
"Weekly" is blurred and the onchange is fired.  Please modify this
test so that it shows the problem you're seeing.  Thanks!

Comment 8

[Mats Palmgren (inactive)]

Are you using an asynchronous XHR by any chance?

Comment 9

[laurent fourcadier]

Hi this is the code I am using to fire the event on the dropdown (jQuery)

    $p.attachTemplateSwitch = function(url) {
        $('.switchTemplate').change(function(event) {
            var idTemplate = $(this).val();
            event.preventDefault();
            $.ajax({
                url: url + '?idTemplate=' + idTemplate,
                type: "GET",
                dataType: "html",
                success: function(data){
                    $('.extraFields').html(data);
                }
             });
        });
    },

And to answer your last question, yes this is a asynchronous XHR request (defaulted in jQuery).

Let me know if I still need to give you the full test after having answered your question.

Thank you.

Comment 10

[Mats Palmgren (inactive)]

It looks like we actually do fire the change event upon selecting a new value
in the dropdown menu, so it must be something else causing the problem...

Yes, please provide a public URL or attach a test that demonstrates
the problem.  Thanks.

Comment 11

[laurent fourcadier]

Hello,

I investigated a bit more and found out that a second form tag was added in the extraFields class. So the code looks like:


<form method="post" action="/my-pc-admin/newsletter/create.html">
	<div class="simple">
		<label class="required" for="Newsletter_title">Titre <span class="required">*</span></label>    <input type="text" id="Newsletter_title" name="Newsletter[title]" maxlength="100" size="60">
	</div>
	<div class="simple">
		<label for="Newsletter_rate">Tarif</label>    <input type="text" id="Newsletter_rate" name="Newsletter[rate]" maxlength="5" size="10">
	</div>
	<div class="simple">
		<label class="required" for="Newsletter_idTemplate">Modèle <span class="required">*</span></label>    <select id="Newsletter_idTemplate" name="Newsletter[idTemplate]" class="switchTemplate" maxlength="100">
	<option selected="selected" value=""></option>
	<option value="3">Hebdomadaire</option>
	</select>
	</div>
	<div class="simple">
		<label for="Newsletter_trackable">Activer les statistiques</label>
		<input type="hidden" name="Newsletter[trackable]" value="0" id="ytNewsletter_trackable"><input type="checkbox" value="1" id="Newsletter_trackable" name="Newsletter[trackable]">
	</div>

	<div class="extraFields">
		<form method="post" action="/my-pc-admin/newsletter/gettemplateform.html?idTemplate=3" id="yw0">
			<div style="visibility:hidden">
				<input type="hidden" id="yform_6ba7a222" name="yform_6ba7a222" value="1">
			</div>
			<div class="simple">
				<label class="required" for="TemplateWeeklyForm_mainTitle">Entête de la newsletter <span class="required">*</span></label>
				<input type="text" id="TemplateWeeklyForm_mainTitle" name="TemplateWeeklyForm[mainTitle]" size="60" maxlength="100">
			</div>
			<div class="simple">
				<label for="TemplateWeeklyForm_titleOptionnal">Titre optionnel</label>
				<input type="text" id="TemplateWeeklyForm_titleOptionnal" name="TemplateWeeklyForm[titleOptionnal]" size="60" maxlength="150">
			</div>
		</form>
	</div>
	<div class="action">
		<a id="yt0" href="#">Annuler</a>    <input type="submit" value="Ajouter la newsletter" name="yt1">
	</div>
</form>

Which obviously is wrong. The strange thing is that it seems to work on all the others browsers I tested with. Not sure how this should be handled though?

Comment 12

[Boris Zbarsky [:bzbarsky]]

It's hard to say without a testcase, because the behavior depends on the exact way that <form> was inserted into the DOM.  

Did you test in a current Chrome (ideally dev build), by any chance?

Comment 13

[laurent fourcadier]

I tested with the latest stable build of chrome (12.0.742.112) and IE8-9. 

Also I am pretty sure this code was working with FF4 as well as it appeared only since I updated to FF5.

Comment 14

[Boris Zbarsky [:bzbarsky]]

OK, then it's not the new parser.

This bug really needs a way for someone to reproduce...

Comment 15

[laurent fourcadier]

What do you think the expected result should look like when having the following code?

<form method="post" action="test.html">
<input type="text" id="1" name="1" />
<input type="text" id="2" name="2" />
<input type="text" id="3" name="3" />
    <form>
    <input type="text" id="4" name="4" />
    </form>
<input type="submit" value="test" name="submit">
</form>

So basically what should contain the POST object when submitting the code above according to you?

Comment 16

[Boris Zbarsky [:bzbarsky]]

It depends on what you mean by "the following code".

If you have HTML that looks exactly like that in a file, then the submit button is not inside a form at all and clicking it will do nothing when you load that file.

If the inner form was inserted via a DOM operation (e.g insertBefore with the first argument being the inner form), then the submission of the outer form should not contain "4=".

If the inner form was inserted via innerHTML, then it starts to depend on exactly which node innerHTML was set on and what the exact string passed to the innerHTML setter was.

Comment 17

[Melissa Schleicher]

Attachment: hornepole19839425.txt

Thanks from skybapstalyc1979.