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

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, n开发者_开发问答ot 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.

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 == '')

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.

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.

I have also encountered a similar problem. I have struggled a few hours and found how to get it work right. Here is my dialog html after the fix. I had the opening form tag outside of "interest-edit-dialog" div at first. The dialog didn't post input variables then. I was inspired by Jorre and I checked the source with Chrome tool when the dialog is up, and found the opening tag was gone. So I moved the opening form tag inside of "interest-edit-dialog" div. That is basically it. The input variables were posted all right. It means that you can't put your form tag outside the dialog html you register with jquery.ui.

<div style="display: none; z-index: 1000; outline-width: 0px; outline-style: initial; outline-color: initial; position: absolute; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-form">
  <div id="interest-edit-dialog" title="whatever" class="ui-dialog-content ui-widget-content">
    <form id="interestDialogForm" name="interestDialogForm" action="einterest" method="post" enctype="multipart/form-data">
    <p class="validateTips"></p>
  <fieldset>
    <?php echo $interest_list; ?>
    <p><input type="text" id="myinterest1" class="myinterest1" name="myinterest1" value="FOO" /></p>
    <p><input type="text" id="myinterest2" class="myinterest2" name="myinterest2" value="BAR" /></p>
    <p><input type="text" id="myinterest3" class="myinterest3" name="myinterest3" value="" /></p>
    <p><input type="text" id="myinterest4" class="myinterest4" name="myinterest4" value="" /></p>
    <p><input type="text" id="myinterest5" class="myinterest5" name="myinterest5" value="" /></p>
    <input type="hidden" name="serial" id="serial" value="" />
  </fieldset>
    </form>
  </div>
  <div class="ui-dialog-buttonpane ui-helper-clearfix">
  </div>
</div>

The javascript code to submit above form is

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