Ajax与表格无法正常工作

Question

我有一些有关使用AJAX提交的问题的问题。当我将输入标签封闭时，带有表单标签的标签不起作用。当我删除表单标签时，什么都没有发生。原因是什么？

html：

<form id="leaveform" action="" method="POST">
    <label > Add Type Of leave </label>
    <input type="text" id="typename" name="typename" placeholder="Enter Type" /> 
    <input type="text" id="quantity" name="quantityleaves" placeholder="Enter Quantity" /> 
    <input type="submit" name="sub" id="sub" value="submit"/>               
</form> 

JavaScript：

$("#sub").click(function(){
    $.ajax({
        url: "test.php",
        type: "POST",
        success: function(data){
            $("#successfull").fadeIn();         
        }       
    });
});

Answer 1

首先，您必须更改"按钮标签"的" tate"键入"提交" button

<form>
...
 <button type="button" name="sub" id="sub" value="submit"/> 
</form>

记住一件事，type ="提交"将重新加载页面，其中as type =" button"不重新加载

脚本中的下一个，

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
 <script>
 $(document).on('click','#sub',function(){
  var typename=$('#typename').val();
  var quantity =$('#quantity').val();
  $.ajax({
    url: "test.php",
    type: "POST",
    data:{typename: typename, quantityleaves:quantity}
    success: function(data){
        alert("Successful");
   }       
  }
})
</script>

Answer 2

是因为$("#sub").click(function(){ }无法正常工作， 当它的内部表单尝试使用此

$("#leaveform #sub").click(function(){ }

Answer 3

尝试在AJAX调用之前使用event.preventDefault()：

$("#sub").click(function(event){
    event.preventDefault();
    $.ajax({
        url: "test.php",
        type: "POST",
        success: function(data){
            $("#successfull").fadeIn();
       }       
   });
});

Answer 4

尝试此脚本

    $(document).ready(function(){
    $("#sub").click(function(){
        $.ajax({
            url: "test.php",
            type: "POST",
            success: function(data){
                $("#successfull").fadeIn();         
            }       
        });
    });
});

我认为您缺少准备功能，它对我有用

Answer 5

$("#leaveform").on('submit',function(e) {
    e.preventDefault();
    $.ajax({
        url: "test.php",
        type: "POST",
        success: function(data){
            $("#successfull").fadeIn();         
        }       
    });
});

尝试此代码。使用此代码，您可以很好地操纵表单内部的数据。

Answer 6

您必须使用document.ready。我已经尝试并且正在工作。

$( document ).ready(function() {
    $("#sub").click(function(event){
    $.ajax({
        url: "test.php",
        type: "POST",
        success: function(data){
            $("#successfull").fadeIn();         
        }       
    });
    event.preventDefault();
});
});