表格提交活动

时间:2017-05-11 20:23:54

标签: javascript jquery forms

如果我为表单提交事件添加处理程序,则会在JQuery验证完成之前触发它。如果验证失败,则表单未提交服务器。因此,事件实际上更像是“提交”而不是“提交”。

实际发送帖子以提交表单时,我可以处理哪些事件?

1 个答案:

答案 0 :(得分:0)

您的问题有点混乱,因此我尝试用示例解释提交表单的两种方式。

在第一个例子中,表格是:

通过函数验证

validate()

通过功能提交

$( "#myform" ).submit()



$('#press').on('click', function(e){
		e.preventDefault();
    var val = validate();
    if(val == true){
    var r = confirm("Submit form!")
    var txt;
    if (r == true) {
    txt = "You pressed OK!";
     //$( "#myform" ).submit(); //use this for submitting the form
} else {
    txt = "You pressed Cancel!";
}
    alert(txt); //this line of code for test reasons
  }
  else{
    alert("input fields empty");
  }
});


function validate(){
    var val = true;
    var teste1 = $("#input1").val();
    var teste2 = $("#input2").val();
    if(teste1== "" || teste1 == null){
      var val = false;
      //some css and jquery to change the input color
    }
    if(teste2 == "" || teste2 == null){
      var val = false;
      //some css and jquery to change the input color
    }
    return val;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = "myform" action="test.php" method="post">    
 <input type = "text" id ="input1" value = "">
 <input type = "text" id ="input2" value = "">
 <button id = "press" type="button">Click Me!</button> 
</form>
&#13;
&#13;
&#13;

此类提交将刷新页面。对于不刷新的页面,您需要使用ajax。

在触发功能中,您需要替换$( "#myform" ).submit();

var teste1 = $("#input1").val();
var teste2 = $("#input2").val();
$.ajax({
  method: "POST",
  url: "test.php",
  datatype:"Json",
  data:{
        "data1": teste1, 
        "data2": teste2 
       },
  success: function(result){
    alert( "result"); 
  }
});

这种方式在Json数组中发送数据。这样,您就可以通过成功函数获得服务器反馈。