Question

<form method="post" action="test.php">
    <select id="select" name="name">
                    <option class="km" id="52" value="14">h</option>
                    <option id="1" value="2">a</option>
                    <option id="1.5" value="29">b</option>
                    <option id="2" value="29">c</option>
                    <option id="3" value="3">d</option>
                    <option id="4" value="41">e</option>
                    <option id="5" value="49">f</option>
        <option id="0" value="5">g</option>
    </select>
<input type="submit" id="addsubmit" class="btn success"></span>
</form>

使用提交按钮我想同时调用ajax。

Case1-Ajax在没有表单操作的情况下正常工作。

案例2 - 当两者都包括在内时，表格不是ajax。

$("#addsubmit").click(function()

{ 叫ajax }

Answer 1

你和你的要求同时或个人打电话

这两个代码都可以帮到你

<form method="post" action="process.php" id="testForm">
    <select id="select" name="name">
        <option class="km" id="52" value="14">h</option>
        <option id="1" value="2">a</option>
        <option id="1.5" value="29">b</option>
        <option id="2" value="29">c</option>
        <option id="3" value="3">d</option>
        <option id="4" value="41">e</option>
        <option id="5" value="49">f</option>
        <option id="0" value="5">g</option>
    </select>
    <input type="submit" id="addsubmit" class="btn success" value="Submit">
</form>

和ajax代码是

$(document).ready(function() {
   $("#addsubmit").click(function(event) {
   event.preventDefault();
      $.ajax({
         type: "POST",
         url: "process.php",
         data: "select=" + $("#select").val(),
         cache: false,
         success: function(data) {
            $("#testForm").submit();
            alert(data);
            console.log(data);
         }
      });
      return false;
    });
});

如果您想使用javascript更改type="submit"提交至type="button"，则javascript代码将相同

<input type="button" id="addsubmit" class="btn success" value="Submit">

现在javascript将提交您的表单。

Answer 2

尝试

$('#addsubmit').on('click',function(e){
    e.preventDefault();
    e.stopPropagation();
    /* your ajax call */
});

或者

<form method="post" action="test.html" id="form_test">
<input type="text"  name="field_tb"/>
<input type="submit" id="bt" />
</form>
<script>
$(function(){
    $('#bt').click(function(e) {
        e.preventDefault();
        $.post('test.php',function(){
            alert('work');
            $('#form_test').submit();
        });
    });
});
</script>

Answer 3

您可以做的是首先使用数据进行AJAX调用，然后正常提交表单。

首先，您应该将按钮的类型从submit更改为button：

<input type="button" id="addsubmit" class="btn success">

然后你需要使用jquery轻松完成javascript：

<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
     $('#addsubmit').click(function(){
         var post_data = $(this).closest('form').serialize();
         $.ajax({
             type: "POST",
             url: "example.php",
             data: post_data,
             success: function(response_data){
                 //you need to listen for the response of the server, and decide if you want to continue.
                 $(this).closest('form').submit()
             },
             error: function(){
                 alert('there was an error, write your error handling code here.');
             }
         });
     });
</script>

按钮onclick有一个表单和一个ajax同时调用两个？

3 个答案: