为一个按钮放置两个JavaScript函数？ （JavaScript/HTML）

Question

我有2个独立的函数使用2个不同的按钮，但我想把它们放在一起，以便两个函数在一个按钮下同时触发。

我有一个用户注册表单，我有一个函数将数据发送到数据库，另一个函数检查用户名是否存在。

我需要的是当用户提交表单时，如果用户名已经存在，则不应该提交表单，因此应该出现一个警告，例如“用户名已被占用，请重新尝试”。尽管如此，如果用户名未被占用，请提交表单。

有人可以告诉我如何去做这件事，并把这两个功能放在一起为同一个按钮？

寄存器功能 - 数据库

function registerUser() { 
     var Username = document.getElementById("txtusername").value; 
     var Firstname = document.getElementById("txtfirstname").value; 
     var Lastname = document.getElementById("txtlastname").value; 
     var Email = document.getElementById("txtemail").value; 
     var Password = document.getElementById("txtpassword").value; 
     var Confirmpass = document.getElementById("passwordconfirm").value; 

     db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024); 
     db.transaction(function(tx) { 
      NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass); 
      }, errorRegistration, successRegistration); 
      } 

      function NewUser(tx, Username, Firstname, Lastname, Email, Password, Confirmpass) { 
      var _Query = ("INSERT INTO SoccerEarth(UserName, FirstName, LastName, Email, Password, CPass) values ('"+ Username +"','"+ Firstname +"','"+ Lastname +"','"+ Email +"', '"+ Password +"', '"+ Confirmpass +"')"); 
      alert(_Query); 
      tx.executeSql(_Query); 
      } 
      function errorRegistration(error) { 
     navigator.notification.alert(error, null, "Got an error mate", "cool"); 
      } 
      function successRegistration() { 
      navigator.notification.alert("User data has been registered", null, "Information", "ok"); 
      $(":mobile-pagecontainer").pagecontainer("change", "#page4"); 
     } 

检查用户名功能 -

function CheckUser() 
      { 
     db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024); 
     db.transaction(UserDB, errorCB); 
     } 

     function UserDB(tx) 
     { 
     alert("user check"); 
      var User = document.getElementById("txtusername").value; 
      tx.executeSql("SELECT * FROM SoccerEarth WHERE UserName='" + User + "'", [], renderUser); 

      } 
      function renderUser(tx,results) { 
      if (results.rows.length > 0) { 
      navigator.notification.alert("Username is taken, please try again."); 
       } 
       else 
       { 
      navigator.notification.alert("Username available!"); 
       } 

HTML -

<form id="form1" data-ajax="false"> 
     <div data-role="fieldcontainer"> 
      <label for="txtusername" data-theme="d">Username:</label> 
      <input type="text" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/> 
     </div> 
     <div data-role="fieldcontainer"> 
      <label for="txtfirstname" data-theme="d">First Name:</label> 
      <input type="text" id="txtfirstname" name="txtfirstname" placeholder="Enter First Name"/> 
     </div> 
     <div data-role="fieldcontainer"> 
      <label for="txtlastname" data-theme="d">Last Name:</label> 
      <input type="text" id="txtlastname" name="txtlastname" placeholder="Enter Last Name"/> 
     </div> 
     <div data-role="fieldcontainer"> 
      <label for="txtemail" data-theme="d">Email:</label> 
      <input type="email" id="txtemail" name="txtemail" placeholder="Enter Enter Email"/> 
     </div> 
     <div data-role="fieldcontainer"> 
      <label for="txtpassword" data-theme="d">Password:</label> 
      <input type="text" id="txtpassword" name="txtpassword" maxlength="12" placeholder="Enter Password"/> 
     </div> 
     <div data-role="fieldcontainer"> 
      <label for="passwordconfirm" data-theme="d">Confirm Password:</label> 
      <input type="text" id="passwordconfirm" name="passwordconfirm" maxlength="12" placeholder="Confirm password"/> 
     </div> 
     <br> 
     <input type="submit" value="Register User"> 

输入验证（JQUERY） -

$('#form1').submit(function (e) { 
    e.preventDefault(); 
}).validate({ 
    rules: { 
     txtusername: { 
      required: true 
     }, 
     txtfirstname: { 
      required: true 
     }, 
     txtemail: { 
      required: true 
     }, 
     txtpassword: { 
      required: true 
     }, 
     passwordconfirm: { 
      required: true 
     } 
    }, 
    messages: { 
     txtusername: { 
      required: "Please enter your Username." 
     }, 
     txtfirstname: { 
      required: "Please enter your First Name." 
     }, 
     txtemail: { 
      required: "Please enter your Email." 
     }, 
     txtpassword: { 
      required: "Please enter your Password." 
     }, 
     passwordconfirm: { 
      required: "Please enter your password again." 
     } 
    }, 
    errorPlacement: function (error, element) { 
     error.appendTo(element.parent().prev()); 
    }, 
    submitHandler: function (form, user) { 

     registerUser(form); 
     return false; 
    } 
}); 

Answer 1

我可以在你的代码中看到您检查用户名是否可用，所以你可以使用事件的onchange

<input type="text" onchange="CheckUser()" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/> 

因此当用户写一些你的函数CheckUser（）被激活，之后就可以正常使用的

if (results.rows.length > 0) { 
    navigator.notification.alert("Username is taken, please try again."); 
} else { 
    //add event click only if is available your username 
    navigator.notification.alert("Username available!"); 
    element = document.getElementById("btnSend"); 
    element.addEventListener("click", registerUser()) 
} 

里面写你输入这个ID提交btnSend

<input id="btnSend" type="submit" value="Register User"> 

所以在这种方式提交

最后但并非最不重要的是更加小心，因为你在你的JS（查询为DB）写代码，而这点你验证，如果用户名只有在这种情况下，您的加入RegisterUser（）可用可以影响你的安全

Answer 2

创建新的函数调用这2个功能

function newfunction() 
{ 
    // you need to return true/false from check user function 
    if(CheckUser()) 
    { 
    registerUser(); 
    } 
} 

，并呼吁这对的onclick

<input type="submit" value="Register User" onclick="newfunction()"> 

Answer 3

使用onsubmit事件办理登记

<form id="form1" data-ajax="false" onsubmit="doSubmit();"> 

和javascript函数看起来像

function doSubmit(){ 
    // check if the user exists. Return a boolean value to return the status 
    var userExists = checkUser(); 

    // if user exists, return false to protect form from submitting. 
    if(userExists){ 
     return false; 
    } 

    // if user does not exists, register the user 
    registerUser(); 
}