使用一个提交按钮/提交按钮调用两个功能

时间:2018-06-27 15:49:59

标签: javascript

我知道有关此主题的问题很多,但没有一个类似于我的。因此,我有一个正在创建的新游戏网站,我想呼吁两个完全不同的功能。一个函数要求用户验证表单,另一个函数应在验证表单后立即显示欢迎消息。

我尝试了很多方法,但我用谷歌搜索,但都没有成功。而且,虽然我已经检查过代码,但代码没有运行,并且一切都很好,但是仍然没有运行。

function validateFormSubmission() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;

  if (firstName == null || firstName == "") {
    alert("First Name shouldn't be empty");
    return false;
  } else if (lastName == null || lastName == "") {
    alert("Last Name shouldn't be empty");
    return false;
  } else {
    return true;
  }
}

function showWelcomeMessage() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;
  document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
}
<body>
  <form onsubmit="return validateFormSubmission()">
    <table>
      <tr>
        <td>Your first name-</td>
        <td><input type="text" name="firstName"></td>
      </tr>

      <tr>
        <td>Your last name-</td>
        <td><input type="text" name="lastName"></td>
      </tr>
    </table>
  </form>
  <form onclick="showWelcomeMessage()"></form>
  <input type="submit" value="Let's play" />
  <hr>
  <div id="outputDiv">
  </div>
</body>

</html>

3 个答案:

答案 0 :(得分:1)

您在这里可能不需要两种形式,第二种形式什么也不做。表单上的onclick处理程序也很奇怪

您实际上可以在第一个函数validateFormSubmission中创建一个Promise,并根据其成功或失败调用第二个函数

function validateFormSubmission() {
  // returning a promise, so depending on returned value, next step can be processed  
  return new Promise(function(resolve, reject) {
    let firstName = document.getElementById('firstName').value;
    let lastName = document.getElementById('lastName').value;

    if (firstName == null || firstName == "") {
      alert("First Name shouldn't be empty");
      return false;  // it can also be reject(false)
    } else if (lastName == null || lastName == "") {
      alert("Last Name shouldn't be empty");
      return false;
    } else {
      return resolve(true) // validation is successful so return true
    }
  })
}

function showWelcomeMessage() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;
  document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
}

document.getElementById('myForm').addEventListener('submit', function(e) {
  //since button type is submit so prevent the default behavior 
  e.preventDefault();
  validateFormSubmission().then(function(x) {
    //x will be true is validation is successful
    if (x) {
      showWelcomeMessage()
    }
  })
})
<form id="myForm">
  <table>
    <tr>
      <td>Your first name-</td>
      <td><input type="text" id="firstName"></td>
    </tr>

    <tr>
      <td>Your last name-</td>
      <td><input type="text" id="lastName"></td>
    </tr>
  </table>
  <button type="submit" value="Let's play">Lets Play</button>
</form>

<hr>
<div id="outputDiv">
</div>

答案 1 :(得分:0)

您只需要在第一个函数内调用第二个函数,就可以使您的事情正常工作。

    function validateFormSubmission(){
        let firstName = document.getElementById('firstName').value;
        let lastName = document.getElementById('lastName').value;

        if (firstName==null || firstName==""){
            alert("First Name shouldn't be empty");
        return false;
        }

        else if (lastName==null || lastName==""){
            alert("Last Name shouldn't be empty");
        return false;
        }
        else{  
        return showWelcomeMessage();
        }
        }
        function showWelcomeMessage(){
            let firstName = document.getElementById('firstName').value;
            let lastName = document.getElementById('lastName').value;
            document.getElementById('outputDiv').innerHTML = 'Hey Gamer' + firstName + lastName + ', Welcome ' + '!';
            return true;
        }

答案 2 :(得分:0)

如果showWelcomeMessage()返回true,只需调用validateFormSubmission()函数:

function validateAndShowMessage() {
  if (validateFormSubmission()) {
    showWelcomeMessage();
  }
}

function validateFormSubmission() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;

  if (firstName == null || firstName == "") {
    alert("First Name shouldn't be empty");
    return false;
  } else if (lastName == null || lastName == "") {
    alert("Last Name shouldn't be empty");
    return false;
  } else {
    return true;
  }
}

function showWelcomeMessage() {
  let firstName = document.getElementById('firstName').value;
  let lastName = document.getElementById('lastName').value;
  document.getElementById('outputDiv').innerHTML = 'Hey Gamer ' + firstName + " " + lastName + ', Welcome ' + '!';
}
<body>
  <form onsubmit="validateAndShowMessage(); return false;">
    <table>
      <tr>
        <td>Your first name-</td>
        <td><input type="text" id="firstName"></td>
      </tr>

      <tr>
        <td>Your last name-</td>
        <td><input type="text" id="lastName"></td>
      </tr>
    </table>

    <input type="submit" value="Let's play" />

  </form>
  <div id="outputDiv">
  </div>
</body>

</html>