使用一个提交按钮/onsubmit 调用两个函数答案

【问题标题】：Calling two function with one submit button/onsubmit使用一个提交按钮/onsubmit 调用两个函数
【发布时间】：2018-12-06 14:14:04
【问题描述】：

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

我尝试了很多方法，我用谷歌搜索但没有一个奏效。此外，代码没有运行，虽然我已经检查过了，一切都很好，但仍然没有运行。

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>

【问题讨论】：

查看stackoverflow.com/questions/16250915/…
为什么需要两张表格？
请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。

标签： javascript

【解决方案1】：

你只需要在第一个函数中调用第二个函数，你的事情就可以工作了。

    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】：

只要调用showWelcomeMessage()函数，如果validateFormSubmission()返回true：

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>

【讨论】：

当然！很高兴，我提供了帮助

【解决方案3】：

这里你可能不需要两个表格，第二个表格什么也不做。表单上的 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>

【讨论】：