Jquery Multiple submit buttons

Question

I have two buttons within my form. Each of them should submit the form to a different PHP file (one normal submit and one ajax call). At least that's the idea. When I click the buttons nothing happens. I've looked at other questions here on stackoverflow, but I can't figure out what I'm doing wrong.

HTML:

<form id="sform" name="sform" method="post" action="answer.php" class="sform" enctype="multipart/form-data">
Option 1
<select id="option1" name="option1">
<option selected>None</option>
<option>Yellow</option>
<option>Green</option>
<option>Red</option>
</select>
<br>
Option 2
<select id="option2" name="option2">
<option selected>None</option>
<option value="F">Purple</option>
<option value="M">Brown</option>
<option value="T">Blue</option>
</select>
<br>

<textarea class="input-block-level" id="summernote" name="summernote" rows="18"></textarea>

<input type='button' value='Submit form' id="view" name="view"/>
<input type='button' value='Submit form' id="send" name="send"/>
</form>
<div id="result"></div>

jQuery:

jQuery(document).ready(function($){

$( "#send" ).click(function() {
    alert("hi");
   $("#sform").submit();
}



$( "#view" ).click(function() {

    /* stop form from submitting normally */
    event.preventDefault(); 

    /* get some values from elements on the page: */
    var $form = $( this ),
        /*url = $form.attr( 'action' ),*/
        postData = {
            option1: $form.find( '#option1' ).val(),
            option2: $form.find('#option2').val(),
            message: $form.find('#summernote').val(),
            js: 'true'
        };

    /* Send the data using post and put the results in a div */
    jQuery.ajax({
        type: "POST",
        url: "reply.php",
        data: postData,
        success: function(response){
            jQuery('#result').empty().append(response);
        }
    });

});
});

Answer 1

The call to .click() is not closed:

$( "#send" ).click(function() {
    alert("hi");
    $("#sform").submit();
}
//^ need closing parenthesis 

So to make it complete by adding the closing parenthesis after the function brackets (i.e. );):

$( "#send" ).click(function() {
    alert("hi");
    $("#sform").submit();
});

As Taplar mentioned in a comment on your question, the event reference should be passed to the callback :

$("#view").click(function(event) {

 /* stop form from submitting normally */
 event.preventDefault();

Per the comment by epascarello, you can make the button that submits the form a regular submit button:

<input type='submit' value='Submit form' id="send" name="send" />

In doing that, the click handler on that input becomes superfluous.

And we can make the send button a button element instead of an input with type="button"

<button id="view" name="view">View</button>

Also note that calling .find() on $(this) bound to the click handler associated with the element with id attribute view will find no elements under that button. In order to get the values of the elements under the form as it is structured, you should set $form to the parent element of the button (i.e. $(this)) - e.g.:

var $form = $(this).parent()

See the example below (Note: the form will not get submitted per the StackOverflow sandbox environment - to see the form submission in action, see this plunker).

 jQuery(document).ready(function($) {
 //when we change the input type to 'submit' for this button then this becomes un-needed
   /*$("#send").click(function() {
     alert("hi");
     $("#sform").submit();
   });*/
   $("#view").click(function(event) {

     /* stop form from submitting normally */
     event.preventDefault();

     /* get some values from elements on the page: */
     var $form = $(this).parent(),
         /*url = $form.attr( 'action' ),*/
         postData = {
           option1: $form.find( '#option1' ).val(),
           option2: $form.find('#option2').val(),
           message: $form.find('#summernote').val(),
           js: 'true'
         };
     /* Send the data using post and put the results in a div */
     jQuery('#result').append('would trigger AJAX call');
console.log('form data to submit',postData);
     //disabling this since we have no reply.php available
     /*jQuery.ajax({
       type: "POST",
       url: "reply.php",
       data: postData,
       success: function(response) {
         jQuery('#result').empty().append(response);
       }
     });*/
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sform" name="sform" method="post" action="answer.php" class="sform" enctype="multipart/form-data">
  Option 1
  <select id="option1" name="option1">
    <option selected>None</option>
    <option>Yellow</option>
    <option>Green</option>
    <option>Red</option>
  </select>
  <br> Option 2
  <select id="option2" name="option2">
    <option selected>None</option>
    <option value="F">Purple</option>
    <option value="M">Brown</option>
    <option value="T">Blue</option>
  </select>
  <br>

  <textarea class="input-block-level" id="summernote" name="summernote" rows="18"></textarea>

<button id="view" name="view">View</button>
  <input type='submit' value='Submit form' id="send" name="send" />
</form>
<div id="result"></div>

Answer 2

jQuery(document).ready(function(jQuery) {

    jQuery( "#send" ).click(function(event) {
        event.preventDefault();
        jQuery( "#view" ).trigger( "click" );
    }

    jQuery( "#view" ).click(function(event) {
        event.preventDefault();
        submitForm('#sform');
    });

    function submitForm(id) {

        var formId = id;
        var $form = $(formId),
            /*url = $form.attr( 'action' ),*/
            postData = {
                option1: $form.find( '#option1' ).val(),
                option2: $form.find('#option2').val(),
                message: $form.find('#summernote').val(),
                js: 'true'
            };

        /* Send the data using post and put the results in a div */
        jQuery.ajax({
            type: "POST",
            url: "reply.php",
            data: postData,
            success: function(response){
                jQuery('#result').empty().append(response);
            }
        });

    }

});

Answer 3

You have a missing closing bracket for the #send function. Also, pass in the event to the functions, and "this" refers to the button, not the form, so use "closest" to find the form.

jQuery(document).ready(function($) {
    $("#send").click(function(e) {
        alert("hi");
        e.preventDefault();
        $("#sform").submit();
    });



    $("#view").click(function(e) {

        /* stop form from submitting normally */
        e.preventDefault();

        /* get some values from elements on the page: */
        var $form = $(this).closest("form");
        var postData = {
                option1: $form.find('#option1').val(),
                option2: $form.find('#option2').val(),
                message: $form.find('#summernote').val(),
                js: 'true'
            };

        /* Send the data using post and put the results in a div */
        jQuery.ajax({
            type: "POST",
            url: "reply.php",
            data: postData,
            success: function(response) {
                jQuery('#result').empty().append(response);
            }
        });

    });
});