chrome/safari (webkit?) does not post values when submitting via Javascript .submit()

Question

I'm submitting some of my forms with javascript/jquery.

$("#myform").submit();

this works fine in Firefox, but in Safari or Chrome, none of my form values are posted.

When I check the $_POST variable, in Firefox it's filled up correctly, but on safari/chrome the $_POST values are empty.

I submit like this when the dialog's OK buttong gets clicked (works fine in FF)

$("form#form_add_file_to_theme").submit();

this is my form (the surrounding div becomes a .jQuery UI dialog)

<div id="modal_create_themefile" style="display:none;">         
    <form action="" id="form_add_file_to_theme" name="form_add_file_to_theme" method="post">            
        <div class="field">
            <label for="var_template_name">File name</label>
            <input type="text" class="text" id="var_template_name" name="var_template_name" />
        </div>

        <div class="field">
            <label for="var_template_type">File type</label>
            <select id="var_template_type" name="var_template_type">
                <option value="css">CSS</option>
                <option value="include">Partial</option>
                <option value="js">Javascript</option>
            </select>
        </div>
    </form>                
</div>

printing $_POST in php gives:

Array ( [var_template_name] => [var_template_type] => css )

so the select box gets submitted, not the text fields...

UPDATE: when I pass the value="test" options hard coded in my text fields, they get submitted. However, changing the values (what a normal user would do) after the page has loaded, has no effect in webkit. Chrome & Safari just take the "initial" or "default" values to submit.

Answer 1

As there is an item named "var_template_name" in the POST data that reaches the server, it means that the textbox is included in the post, but the value is empty.

So, somehow the value is cleared before it's posted.

Do you have any Javascript that verifies the contents in the form? Check that you haven't accidentally made an assignment, something like this:

if (document.getElementById('var_template_name').value = '')

instead of a comparison:

if (document.getElementById('var_template_name').value == '')

Answer 2

Thanks for your help guys. I found the solution to my problem.

jQuery UI dialog is somehow creating or moving the form into the dialog, while webkit doesn't know this. Webkit just takes the original form code and submits that.

I could fix it by doing this:

dialog.data("dialog").uiDialog.find("form").submit();

that way, any browser is forced to look for the correct form in the dialog, not just in the page.

Answer 3

I've encountered the same problem. I have a theory that the form submit gets terminated once the page changes, thus it becomes incomplete. That's just a theory mind you, unprovable unless I analyze the webkit internals.

My solution - use ajax instead of form submit.

$.post("/submit_url",$("#form_id").serialize());

I'm not absolutely sure that strategy always works, but it might.