Mohammad Saberi
Mohammad Saberi

Reputation: 13166

Submit form with button input and jQuery

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.

Upvotes: 1

Views: 24801

Answers (2)

Amith George
Amith George

Reputation: 5916

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/

Upvotes: 5

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

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.

Upvotes: 0

Related Questions