0

I am submitting a form like this:

<input id="submitBtn" style="margin-top:20px;" type="button" onclick="document.getElementById('form94').submit();" value="Opdater">

That for some reason doesn't trigger my jQuery .submit() function.

$("#form94").submit(function() {
    var form = $(this);
        $.ajax({ 
             url   : form.attr('action'),
             type  : form.attr('method'),
             data  : form.serialize(), // data to be submitted
             success: function(response){
                $("#showFancyBoxThankYouLink").click();
             }
        });
    return false;
});
5
  • take out type="button" and onclick attribute from your html button.. and add up type="submit" Commented Jan 26, 2016 at 13:56
  • There is a reason it is there... due to some styling issues. Commented Jan 26, 2016 at 13:57
  • 1
    add a fiddle, with your html. Commented Jan 26, 2016 at 13:58
  • Just the html that is needed to recreate this :) Commented Jan 26, 2016 at 14:00
  • oh okay, did you try with single event, without using submit event!!? Commented Jan 26, 2016 at 14:01

5 Answers 5

0

Because you use different selectors

document.getElementById('form94'); //returns a HTML DOM Object
$('#form94');  //returns a jQuery Object  

You can try next code, it works fine

<form id="form94">
    <input id="submitBtn" style="margin-top:20px;" type="button" onclick="$('#form94').submit();" value="Opdater">
</form>

<script type="text/javascript">
$("#form94").submit(function(e) {
    e.preventDefault();
   alert('test');
});
Sign up to request clarification or add additional context in comments.

Comments

0

make a function out of it and trigger it with onclick like this:

<input id="submitBtn" style="margin-top:20px;" type="button" onclick="myfunction()" value="Opdater">

function myfunction() {
var form = $(this);
        $.ajax({ 
             url   : form.attr('action'),
             type  : form.attr('method'),
             data  : form.serialize(), // data to be submitted
             success: function(response){
                $("#showFancyBoxThankYouLink").click();
             }
        });
    return false;
}

Comments

0

Is the javascript running after the form has been rendered? If not, either make sure that your javascript is after the form or try to have it run after the document has loaded.

$(document).ready(function() {
  $("#form94").submit(function() {
    var form = $(this);
        $.ajax({ 
             url   : form.attr('action'),
             type  : form.attr('method'),
             data  : form.serialize(), // data to be submitted
             success: function(response){
                $("#showFancyBoxThankYouLink").click();
             }
        });
    return false;
  });
});

Another way to go about having the form submit is to add the onsubmit attribute to your form and have it return a function. You could also change your button type to submit and remove the onclick attribute.

<form id="form94" name="form94" onsubmit="return SubmitMyForm();">
  <input type="submit" value="Opdater">
</form>

<script>
function SubmitMyForm() {
    var form = $(this);
    $.ajax({ 
         url   : form.attr('action'),
         type  : form.attr('method'),
         data  : form.serialize(), // data to be submitted
         success: function(response){
            $("#showFancyBoxThankYouLink").click();
         }
    });
    return false;
}
</script>

Comments

0

Without a code example, it is hard to tell. But also, some browsers only submit a form when a user clicks a submit button, you cannot submit via script.

There are also a ton of other SO posts around this topic and they all either boil down to the form not existing when the submit event is attached (is your script executing at the top of the document or on the document's ready event?).

Form doesn't exist yet: Why Jquery form submit event not firing? Jquery .Submit() is not triggering submit event

Submitting via script: Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?

Not using a submit button: jQuery submit not firing

Comments

0

replace this

onclick="document.getElementById('form94').submit();"

with onclick="$( "#form94" ).submit();"

The javascript submit() is not bubbling in IE and they might be other gotchas.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.