Skip to main content

Bug Tracker

Side navigation

#3664 closed bug (invalid)

Opened November 29, 2008 05:27AM UTC

Closed January 15, 2009 04:29AM UTC

returning results with <form> tag in .load function calls double-innerhtml

Reported by: qphoria Owned by:
Priority: major Milestone: 1.3
Component: ajax Version: 1.2.6
Keywords: load, form Cc:
Blocked by: Blocking:
Description

The full explanation is here:

http://www.jqueryhelp.com/viewtopic.php?t=935

The problem summary:

jQuery strips the <form> tags when returning html with a <form> in it. This is because it is doing a double-innerHTML call. First on the main div that is called from the load, and then for the form tags. This only seems to affect form tags.

I have a snippet of code:

<div id="payform">

<form action="<?php echo $payment_url; ?>" method="post" enctype="multipart/form-data">

<?php if ($fields) { ?>

<?php echo $fields; ?>

<?php } ?>

<input type="submit" value="submit">

</form>

</div>

I use:

$('#payform').load('index.php&action=updatePayment&payment='paypal');

to load a php function and get new output which returns html <form> with new fields and action url:


<form action="https://www.paypal.com/webscr" method="post" enctype="multipart/form-data">

<input type="hidden" name="amount" value="20.00">

<input type="submit" value="submit">

</form>


But the code at line 552:


// Certain attributes only work when accessed via the old DOM 0 way

if ( fix[name] ) {

if ( value != undefined ) elem[fix[name]] = value;

return elem[fix[name]];

} else if ( value == undefined && jQuery.browser.msie && jQuery.nodeName(elem, "form") && (name == "action" || name == "method") )

return elem.getAttributeNode(name).nodeValue;


If I remove that first conditional that uses the "old" way and leave only the "else if" as the new "if". Then the <form> works properly, but I'm not sure if it breaks anything else.

Attachments (0)
Change History (4)

Changed November 29, 2008 05:29AM UTC by qphoria comment:1

I guess i Forgot to explain what happens.

When the output form gets passed back through the load, what should be:


<form action="https://www.paypal.com/webscr" method="post" enctype="multipart/form-data">

<input type="hidden" name="amount" value="20.00"> <input type="submit" value="submit">

</form>


Ends up only returning:


<input type="hidden" name="amount" value="20.00"> <input type="submit" value="submit">


Changed November 29, 2008 05:35AM UTC by qphoria comment:2

Cancel that. my "alleged" solution doesn't make it work. I'm not sure of a fix yet.

Changed December 01, 2008 03:40PM UTC by qphoria comment:3

So it turns out it's not a jQuery bug.

It's a not-so-well-known Javascript "feature"

Apparently innerHTML in FF3 and IE6+ (And maybe others) don't like <form> tags as part of innerhtml.

So if i have code like:

Code:


<div id="test">

<form>

<input>

</form>

</div>

<script>

window.onload=document.getElementById('test').innerHTML = "<form><input type="hidden" name="blah"></form>";

</script>


it will only result in:

Code:


<div id="test">

<input type="hidden" name="blah">

</div>


Completely removing the <form> tags

Changed January 15, 2009 04:29AM UTC by dmethvin comment:4

resolution: → invalid
status: newclosed