Javascript function runs twice when validating form

Question

I'm sure there must be a simple explanation to this. I'm trying to get an alert 'Country must be selected' to appear whenever the option 'Not Selected' is selected (it is selected by default I believe), and clicking on the validation button. I have been able to get the function to show the alert correctly, but the problem is that the alert shows twice.

Why does the alert show twice, and how can I get it to show only once? thanks!

function CountrySelectValidation() { // ensures country is selected
	var ValidateCountry = document.forms["registration-form"]["Country"].value;
	if (ValidateCountry == "not-selected") {
		alert("Country must be selected");
		return false;
	} else {
		return true;
	}
}

function SubmitForm() {
    if (CountrySelectValidation()) {
        // check if true, then execute this code
        document.getElementById("registration-form").submit();	
    }
}

<form id="registration-form">
    What country are you from?
    <select name="Country">
		<option value="not-selected">Not Selected</option>
		<option value="england">England</option>
		<option value="wales">Wales</option>
		<option value="scotland">Scotland</option>
		<option value="northern-ireland">Northern Ireland</option>
	</select>
    <br><br><input type="submit" value="Submit Method 1">
    <button type="reset">Reset Method 1</button>
    <button type="submit" id="submit-2">Submit Method 2</button>
</form>

<button onClick="ResetForm()">Reset Method 1</button>
<button onClick="CountrySelectValidation(); SubmitForm()">Validation</button>

Jeremy Thille · Accepted Answer · 2017-03-25 14:36:38Z

3

CountrySelectValidation()
...
if (CountrySelectValidation())

You run the CountrySelectValidation function inside the if (it actually executes), so that's why it runs twice.

answered Mar 25, 2017 at 14:36

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan Bartlett · Accepted Answer · 2017-03-25 14:38:05Z

1

You are executing the function again when you call the if statement. Run the code from the if statement in a different function called inside the original function.

OriginalFunction () {

      //Content here

      FunctionToHandleIfstatement();

 }

answered Mar 25, 2017 at 14:38

Jonathan Bartlett

5121 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript function runs twice when validating form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related