CODEWITHSUNDEEP
javascript
nina A
nina A

Reputation: 3

Calling two function with one submit button/onsubmit

I know there are many questions about this topic but none similar to mine. so I have this new gaming website that I'm creating and I want to call for two functions that are totally different. one function that calls for the user to validate the form and the other function should display a welcome message right after validating the form.

I've tried many ways and I googled but none worked. Moreover the code isn't running although I've checked and everything is fine but still not running.

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>

Upvotes: 0

Views: 889

Answers (3)

brk
brk

Reputation: 50291

You may not need two forms here, the second form is not doing anything. Also onclick handler on form is quite strange

You can actually create a Promise inside the first function that is validateFormSubmission and depending on it's success or failure call the second function

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>

Upvotes: 1

Luca Kiebel
Luca Kiebel

Reputation: 10096

Just call the showWelcomeMessage() function, if validateFormSubmission() returns 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>

Upvotes: 0

Muhammad Zubair Saleem
Muhammad Zubair Saleem

Reputation: 517

You just need to call the second function inside the first one and you will have your thing working.

    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;
        }

Upvotes: 0

Related Questions