CODEWITHSUNDEEP
jqueryajaxform
morpheus
morpheus

Reputation: 20350

JQuery ajaxForm: form is not submitted if it is removed from DOM in beforeSubmit

if I remove the form from the DOM in beforeSubmit or beforeSend (doesn't matter which one), I find that in both IE and FF, http request is never emitted. form.submit() line 296 in jquery.form.js is called, but no http request is emitted. It works correctly in chrome though.

Sample code:

$('#form1').ajaxForm(
    {
        beforeSubmit: function(array, matched_set, options)
        {
            // this line removes #form1 from the DOM.
            // it is still available to jquery form plugin by means of closure
            // line 296 form.submit() in jquery.form.js is hit,
            // but IE and FF never emit http request. If I remove this line, it works.
            $('#jqm_window').html(waiting_page);
        },

chrome: enter image description here firefox: enter image description here http trace is captured in fiddler when using chrome (but not with other browsers): enter image description here

Upvotes: 0

Views: 1354

Answers (2)

Kristian Ačkar
Kristian Ačkar

Reputation: 945

I have the same issue. I create jQuery form object and call submit function which works fine in Chrome but not in Firefox.

Chrome and Firefox have different js engines and in Firefox you cannot submit form element which is not in DOM.

Upvotes: 0

morpheus
morpheus

Reputation: 20350

this is not a jquery issue. IE, FF don't submit form if its removed from DOM prior to submitting. Full code:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.1.min.js">
</script>
<script>
$(document).ready(function()
{
    $('#test').click(function(e)
    {
        e.preventDefault();
        var form = $('#uploadForm')[0];
        // IE and FF will not submit the form if its removed from the DOM
        // Chrome doesn't care. you will get 404 error, as it submits the form to non-existent files.php
        form.parentNode.removeChild(form);
        form.submit();
    });
});
</script>
</head>
<body>
<form id="uploadForm" action="files.php" method="POST" enctype="multipart/form-data">
    File: <input type="file" name="file" />                
    <input type="submit" value="Submit" />
</form>
<a href="#" id="test">Click to test</a>
</body>
</html>

Upvotes: 1

Related Questions