两个不同提交按钮的javascript验证

javascript validation for two different submit buttons

本文关键字：按钮 提交 javascript 验证 两个      更新时间：2023-09-26

我有一个如下的表单：-

****<form name = "query" id="myDiv" method = "POST" enctype="multipart/form-data" action = "Response.php" onsubmit = "return commentValidationTest()">****

此表单中有两个提交按钮

<input type="Submit" name ="sub" id ="sub" value="Save" class="btn btn-info btn-sm" >
<input type="Submit" name ="submit" id ="submit" value ="Submit" align = "center" style="width: 80px; float: center;">

当单击两个提交按钮时，表单数据的验证将在用javascript编写的commentValidationTest（）中完成，如果验证为"OK"，则调用php文件"Response.php"。

在我的commentValidationTest（）中，我需要检测点击了哪个提交按钮，并根据点击的按钮对表单数据进行验证。

我是这样做的：

var sub = document.getElementById('sub');
if(sub.onclick==true)
{
Validations...
}

编写两个返回true或false的函数，并将这些函数调用onclientclick属性。

<input type="Submit" name ="sub" id ="sub" onclientclick="return fun1();"
value="Save" class="btn btn-info btn-sm" >

<input type="Submit" name ="submit" id ="submit" onclientclick="return
fun2();"  value ="Submit" align = "center" style="width: 80px; float:
center;">

功能

fun1()
{
    check for validations 
    if(validation==success)
    {
       return true;
    }
    else
    {
       return false;
    }
}
same in fun2()

使用此：-

如果你有这样的表格。

****<form name = "query" id="myDiv" method = "POST" enctype="multipart/form-data" action = "Response.php" >****

具有输入

<input type="Submit" name ="sub" id ="sub" value="Save" class="btn btn-info btn-sm" >
<input type="Submit" name ="submit" id ="submit" value ="Submit" align = "center" style="width: 80px; float: center;">

使用此代码：-

var buttonpressed; 
$('.classAndDocsFormSubmit').click(function() { 
    buttonpressed = $(this).attr('name') 
});
$('#addClassAndDocs').submit(function() { 
    //alert('button clicked was ' + buttonpressed) 
        if(buttonpressed=="sub") {
      commentValidationTest()
          } else {
          commentValidationTest2()
         }
    return(false) 
});

如果您使用jQuery，您可以编写类似的东西

<button id="btn1" onclick="commentValidationTest(this)">
<button id="btn2" onclick="commentValidationTest(this)">
function commentValidationTest(el) {
  alert($(el).attr('id')); 
}

然后检查将单击按钮信息的"this"对象。

我遇到过类似的情况，表单同时具有注册和登录功能，并以的方式处理

 <form id="manual_login" >
     <button type="submit" id="loginButton" name="login" value="login">Login</button>
     <button type="submit" id="registerButton" name="register" value="new" align="left">Join</button>
 </form>

获取按钮的值，这样你就知道点击了哪个：

$('#manual_login button').click(function(event) {
    var test = $(this).data('clicked',$(event.target));
    op = test.val();
});

然后根据按钮做你需要做的事情：

$('#manual_login').on('submit', function(event){
        event.preventDefault(); //prevent the default submit
        if(op == "new"){
            //code here.
            // commentValidationTest()
        } else {    
            var form = $(this).serialize();
            commentValidationTest(form);
        }
    });

以下是在按钮上使用onclick的解决方法：

<form onsubmit="return doStuff()">
  <input type='submit' name='save' value='Save' onclick='who(this.name);'/>
  <input type='submit' name='submit' value='Submit' onclick='who(this.name);'/>
</form>
<script>
var isSave = false;
var who = function(name) {
  isSave = 'save' === name;
};
var doStuff = function() {
  if(isSave) {
    //
  } else {
    //
  }
  return true; //false, if do not want to submit
};
</script>
相关文章：