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>

另请注意，在$(this)上调用$form绑定到与 id 属性视图的元素相关联的点击处理程序将不会找到任何元素那个按钮。为了在结构形式下获取表单下的元素值，您应该将$(this)设置为按钮的父元素（即var $form = $(this).parent()） - 例如：

 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);
       }
     });*/
   });
 });

请参阅下面的示例（注意：表单不会按StackOverflow沙箱环境提交 - 要查看表单提交的实际操作，请参阅.find()）。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

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

#send功能缺少右括号。此外，将事件传递给函数，并且＆＃34;这个＆＃34;是指按钮，而不是表格，因此请使用＆＃34;最接近＆＃34;找到表格。

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);
            }
        });

    });
});

Jquery多个提交按钮

HTML：

jQuery的：

3 个答案: