将两个 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">

因此，您可以通过这种方式验证用户名是否仅在这种情况下您可以为您的提交添加 RegisterUser()

最后但同样重要的是要更加小心，因为您在 JS（数据库查询）中编写了代码，这可能会影响您的安全

Answer 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();
}