javascript - Jquery 多个提交按钮

Question

我的表单中有两个按钮。他们每个人都应该将表单提交到不同的 PHP 文件(一个正常提交和一个 ajax 调用)。至少是这样的。当我点击按钮时什么也没有发生。我在 stackoverflow 上查看了其他问题，但我不知道我做错了什么。

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

对.click()的调用未关闭:

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

因此，为了使其完整，请在函数括号后面添加右括号(即 );):

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

正如Taplar在对您的问题的评论中提到的那样，事件引用应该传递给回调:

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

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

根据epascarello的评论，您可以将提交表单的按钮设为常规提交按钮:

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

这样做时，该输入上的点击处理程序就变得多余了。

我们可以将发送按钮设置为 button元素而不是带有 type="button"

的输入

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

另请注意，调用.find()在绑定(bind)到与具有 id 属性的元素关联的点击处理程序的 $(this) 上，view 将在该按钮下找不到任何元素。为了获取表单下元素的值，您应该将 $form 设置为按钮的父元素(即 $(this)) - 例如:

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

请参阅下面的示例(注意:表单不会在 StackOverflow 沙箱环境中提交 - 要查看表单提交的实际情况，请参阅 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>