Кнопка onclick есть форма и ajax для вызова одновременно?

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

{ вызовите Аякса }

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

Если вы хотите отправить с изменением яваскрипта 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>