Databases
StackOverflow2013
Postsdbo
POjQuery not calling form .submit() when using Ajax on IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery not calling form .submit() when using Ajax on IE
    text
    copied!<p>I am using a jQuery plugin that does some magic during the <code>.submit</code> of a form (creates a hidden string and writes it to an <code>&lt;input type="hidden"&gt;</code> item). On IE this works well if I submit the form via POST, but if I use Ajax, then the <code>.submit</code> callback is never called. Here is an example of the flow:</p> <pre><code>&lt;script type="text/javascript"&gt; (function (jQuery) { jQuery.fn.createHidden = function () { // 1. What I want to have called $(this).submit(function () { var hiddenText = $(document.createElement('input')); hiddenText.attr('name', 'hidden'); hiddenText.attr('type', 'hidden'); hiddenText.val('1'); $(this).append(hiddenText); alert("1"); }); // 2. What I came up with as a workaround $(this).parents('div.FormWrapper').submit(function () { var form = this.children('form'); if (form &amp;&amp; form.tagName == "FORM") { var hiddenText = $(document.createElement('input')); hiddenText.attr('name', 'hidden'); hiddenText.attr('type', 'hidden'); hiddenText.val('2'); $(form).append(hiddenText); alert("2"); } }); }; })(jQuery); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $(".form").createHidden(); }); &lt;/script&gt; &lt;div class="FormWrapper"&gt; @*using (Html.BeginForm("About", "Home", FormMethod.Post, new { @class = "form", @id = "form" }))*@ @using (Ajax.BeginForm("About", "Home", new AjaxOptions { UpdateTargetId = "myReply", HttpMethod = "post" }, new { @class = "form", @id = "form" })) { &lt;div class="ExposedData"&gt; @Html.TextBox("data", "", new { @class = "data" }) &lt;input type="submit" value="Button" /&gt; &lt;span id="myReply"&gt;&lt;/span&gt; &lt;/div&gt; } &lt;/div&gt; </code></pre> <pre><code>// MVC HomeController.cs public class HomeController : Controller { public ActionResult Index() { return View(); } public string About(string hidden) { return hidden; } } </code></pre> <p>When using Http POST on IE, I see alerts 1 &amp; 2, but when using Ajax I only see alert 2. Firefox only shows 1. Chrome, Safari and Opera show 1 &amp; 2. </p> <p>Is there a better way of fixing this so it works on all browsers? Could this be related to the <code>jquery.unobtrusive-ajax.js</code> I'm using in MVC3? </p> <p>I've tried <code>$('form').ajaxStart()</code>, <code>AjaxOptions{OnBegin=...}</code>, <code>&lt;form onsubmit=...&gt;</code> but they didn't do the trick as most get called <strong>after</strong> the controller is visited, and hence the hiddenText is not included in the form.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload