HTML,javascript: on button click validation not working

Question

I am trying to validate(if they have value) my 1st two dropdowns of my html . On click of button getURL I am validating if there are any selected values in dropdowns and if YES I would like to proceed to function getURL.
But soon after validation , the control is not stopping if there are no values in 2nd dropbox. Its going ahead and displaying the URL.
I would like to display URL only if there are values in 1st two dropdowns. But now with my below code I am getting alert:url soon after alert:select product version

Javascript:

function validate() {
    var pname = document.getElementById("selProductName");
    if(pname.selectedIndex == 0) {
         alert('select product name');
    }

    var pversion = document.getElementById("selProductVersion");
    if(pversion.selectedIndex == 0) {
         alert('select product version');
         return false;
    }
  return true;
}

function getURL() {         
    validate();
    // I have code here to create desired URL
    alert("url:" + url);
}

HTML:

Product Name:
<select id="selProductName" name="selProductName" onchange="changeProductName(this.value);">
<option>--Choose Product Name--</option>
</select>
<br>Product Version:
<select id="selProductVersion" name="selProductVersion" onchange="changeProductVersion(this.value);">
</select>
<br>File Name:
<select id="selFileName" name="selFileName"></select>
<br><button onclick="getURL()">Get URL</button>

Jeremy Thille · Accepted Answer · 2015-06-05 20:18:05Z

3

validate() executes and returns false. Good. And then? Then the script goes on and alerts the url.

Currently :

function getURL() {         
    validate(); // Returns true or return false, no consequence.
    alert("url:" + url); // Always happens.
}

You should use :

function getURL() {         
    if(!validate()) return; // Blocks execution if validation fails.
    alert("url:" + url);
}

answered Jun 5, 2015 at 20:18

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

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

4 Comments

Jill448 Over a year ago

I have the change and validate function is working as expected, but now my code after the line if(!validate()) return; is not working, when I click GetURL

Jeremy Thille Over a year ago

Precisely. It means it's working. That's the idea if the validation fails. Try to console.log( validate() ) before that line, if it logs false then the getURL() function will stop.

Jill448 Over a year ago

I have added a statement return true at end of validate function and now its working fine. thanks!

Jeremy Thille Over a year ago

Right, that was missing. And also, add return false after alert('select product name');

Connor Burns · Accepted Answer · 2015-06-05 21:15:40Z

0

Your validate function is working exactly how it should. The problem is that you are never checking to make sure that validate didn't return false. Instead, you are just printing the url even if validate() does return false. Here is an edited version of the getURL() function that should work.

function getURL() {         
    var isValid = validate();
    // Code to create URL

    // Only alert the formed URL if isValid doesn't equal false
    if(isValid != false) alert("url:" + url);
}

answered Jun 5, 2015 at 21:15

Connor Burns

364 bronze badges

Collectives™ on Stack Overflow

HTML,javascript: on button click validation not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related