#6996 closed bug (invalid)
jquery form plugin working issue if form contains <option> element
| Reported by: | ints99 | Owned by: | |
|---|---|---|---|
| Priority: | Milestone: | 1.4.3 | |
| Component: | unfiled | Version: | 1.4.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Related to bug described in Ticket #6995, i must enter issue with plugin here:
Hi, I have debugged futher on the issue I have with jQuery forms. As you recall, every 2nd submit press is not working thru ajax, if <select> element is present.
Today I figured out, it is not <select>, but <option> element. It can be even commented out, i.e. inside <!-- -->, but still causes the issue. As soon, as instead of <option> is typo (like <opition>), it starts to work.
Could you please give any feedback?
test.php
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<link rel="shortcut icon" href="gfx/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="icon" href="gfx/favicon.ico" type="image/vnd.microsoft.icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.js"></script> <script type="text/javascript" src="js/jquery.effects.core.js"></script> <script type="text/javascript" src="js/jquery.effects.highlight.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> <script type="text/javascript" src="my.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="css/dot.css.php" />
<title>test</title> </head>
<body class="normal">
<div id="content"> <table border="0" class="normal ymar"> <tr> <td>
<table width="900" border="0" cellspacing="0" cellpadding="0"> <tr>
<td colspan="2" class="normal leftdot">
<table width="758" border="0" cellspacing="0" cellpadding="2"> <tr> <td colspan="2" class="special"> <div id="container"> <? include("test-return.html"); ?>
</div>
</td> </tr> </table>
</td> </tr> </table>
</td> </tr>
</table> </div> </body> </html>
test-return.html
<form method="post" id="contactform" name="contactform" action="test.html"> <label for="name">Name</label><br /> <input type="text" name="name" class="low" id="name" size="45" maxlength="40" /><br /> <label for="color">Värv</label> <select name="color" class="low" id="color"> <option value="x">selec</option> <option value="Green">Green</option> </select><br /> <span class="buttons"> <button type="submit" name="submit" value="Go" class="positive"> <img src="gfx/tick.png" alt="" />Go </button> </span> <br /> </form>
my.js
pre-submit callback function showRequest(formData, jqForm, options) { var queryString = $.param(formData); alert('About to submit: \n\n' + queryString); return true; }
post-submit callback function showResponse(responseText, statusText, xhr, $form) { alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n'); }
$(document).ready(function(){ var color_3 = $("table.normal").css("background-color"); var options = { target: '#contactform', replaceTarget: false, url: 'test-return.html', beforeSubmit: showRequest, pre-submit callback success: showResponse post-submit callback };
$('#contactform').ajaxForm(options);
Please ask on the forum.