Calling two function with one submit button/onsubmit

Question

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>

Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Jun 27, 2018 at 17:32

brk · Accepted Answer · 2018-06-28 00:48:13Z

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>

Luca Kiebel · Accepted Answer · 2018-06-27 16:00:22Z

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>

Muhammad Zubair Saleem · Accepted Answer · 2018-06-27 15:59:20Z

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

Collectives™ on Stack Overflow

Calling two function with one submit button/onsubmit

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related