Submit form with button input and jQuery

Question

I have a form like this :

<form id="myform" action="something.php" method="post">
<input type="text" name="first_name" /><br />
<input type="button" id="submit" value="Send" />
</form>

I want to submit this form after getting successful message from some processes in JavaScript and jQuery. So I did it like this :

$(document).ready(function(e) {
  $('#submit').click(function(event){
    event.preventDefault();

    $.post('process/process.php',
          {
              // I passed data here
          },
          function(data) {
              if (data.result == '1') {
                  $('#myform').submit();
              } else {
                  alert('Error #'+data.result+' occurred!');
              }
          },
          'json'
    );
  });
});

But even after getting data.result == '1', the submitting form does not work. What's the problem here ?

Edit:

I've changed jQuery to :

$(document).ready(function(e) {
  $('#submit').click(function(event){
    $('#myform').submit();
  )};
)};

So there is no condition now, but form did not submit.

maybe console.log or alert $('#myform').length before the submit then - it should be 1 (not 0 and not more than 1 ;-) — m7o
– m7o, Commented Aug 22, 2012 at 7:52

Amith George · Accepted Answer · 2012-08-22 08:55:07Z

5

From the jQuery documentation for .submit(),

Additional Notes:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

Rename the id of the second input to submitForm or something similar.

Working fiddle: http://jsfiddle.net/WvSdX/

answered Aug 22, 2012 at 8:55

Amith George

5,9112 gold badges40 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammed Swillam · Accepted Answer · 2012-08-22 07:51:48Z

0

I think it's a matter of a value-comparison issue here. to give us a better way to determine if this is the case, can you temprorly change the callback to this and give it a try?

$(document).ready(function(e) {
    $('#submit').click(function(event){
      event.preventDefault();

      $.post('process/process.php',
          {
              // I passed data here
          },
          function(data) {
               $('#myform').submit();   
          },
          'json'
    );
  });
});

if the form get submitted, then there is nothing wrong with the jQuery part, it's a matter of correctly getting the result out of your post() operation.

Please give it a try and let me know if it's working or not.

answered Aug 22, 2012 at 7:51

Mohammed Swillam

9,2524 gold badges38 silver badges47 bronze badges

7 Comments

Mohammad Saberi Over a year ago

I did it Mohammed. I insterted submit() just after .click(function()){ and again the form did not submit.

Mohammad Saberi Over a year ago

Mohammed I put submit() after $(document).ready() and I expected that form must be sent, but nothing happened!

Mohammed Swillam Over a year ago

so weird!! I think you will have to check the console result (in firebug or chrome developer tools) because this may mean that there is an error in the page itself, not with the code you are writing.

Mohammed Swillam Over a year ago

if you can provide the code for your page, we may create a sample in JsFiddle.com and see what's going on.

Mohammad Saberi Over a year ago

Which chrome plugin do you suggest for this ?

|

Collectives™ on Stack Overflow

Submit form with button input and jQuery

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related