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

首先，您必须在表单中将按钮标记“提交”的“类型”更改为“按钮”

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

记住一件事，type =“submit”将重新加载页面，其中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();
});
});