StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The solution is simply... your button name. Why you ask? I shall show you!</p> <p>Take this <a href="http://jsfiddle.net/cupsF/" rel="noreferrer">jsfiddle</a> and notice I only made a few changes. The javascript has not changed, just the HTML</p> <p><strong>HTML</strong></p> <pre><code><form id="myform" action="javascript:alert('Success!')" method="post"> <input type="text" name="check_me" /> <input type="submit" name="btnSubmit" value="Go!" /> </form> <div id="confirm" style="display:none;">Please confirm that you want to submit</div> </code></pre> <p>I've made two changes:</p> <ol> <li>I changed the action to be a javascript call for jsfiddle compatibility</li> <li>I modified your button name to something other than submit</li> </ol> <p>I had to do #2 because calling $('#myform').submit was referencing the button, not the submit method, and jQuery got all kinds of confused. By renaming your button, the $('#myform').submit remains the expected jQuery submit function and everybody is happy.</p> <p>I stumbled upon this through going through several iterations, which I've kept below for posterity.</p> <p>Good luck!</p> <p><strong>=======ORIGINAL POST BELOW========</strong></p> <p>If all you want to do is "solve this", you can refactor as follows:</p> <p>HTML</p> <pre><code><form id="myform" action="#" method="post"> <input type="text" name="check_me" /> <input type="button" id="btnSubmit" value="Go!" /> </form> <div id="confirm" style="display:none;">Please confirm that you want to submit</div> </code></pre> <p>JavaScript</p> <pre><code>$(document).ready(function(){ var submitForm = $('#myform'); submit = false; $("#confirm").dialog({ resizable: false, height: 140, modal: true, autoOpen: false, buttons: { 'Submit': function() { $(this).dialog('close'); submit = true; submitForm.submit(); }, 'Cancel': function() { $(this).dialog('close'); } } }); $("#confirm").parent().appendTo($("#myform")); $("#btnSubmit").click(function() { $("#confirm").dialog('open'); }); submitForm.submit(function() { if (submit) { return true; } }); }); </code></pre> <p>Oddly, the below works as well:</p> <p>HTML</p> <pre><code><form id="myform" action="javascript:alert('success!');" method="post"> <input type="text" name="check_me" /> <input type="button" id="btnSubmit" value="Go!" /> </form> <div id="confirm" style="display:none;">Please confirm that you want to submit</div> </code></pre> <p>JavaScript</p> <pre><code>$(document).ready(function(){ var submitForm = $('#myform'); submit = false; $("#confirm").dialog({ resizable: false, height: 140, modal: true, autoOpen: false, buttons: { 'Submit': function() { $(this).dialog('close'); submit = true; $('#myform').submit(); //submitForm.submit(); }, 'Cancel': function() { $(this).dialog('close'); } } }); $("#confirm").parent().appendTo($("#myform")); $("#btnSubmit").click(function() { $('#myform').submit(); }); submitForm.submit(function() { if (submit) { return true; } else { $("#confirm").dialog('open'); return false; } }); }); </code></pre> <p>The only thing I changed here was removed the submit button and 100% submit via jQuery. </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