javascript conditional onclick form

Question

I cannot use JQuery for this project.

I am trying to gather 3 variables from 3 radio buttons. The submission of this form will trigger a function that will check the three variables with a simple conditional. This will either run the first line or (else) run the second line of code. I'm having a problem with the conditional (it appears). I always get the first line to fire, never the second line.

function valid() {
  var q1 = document.getElementById("ques1").value;
  var q2 = document.getElementById("ques2").value;
  var q3 = document.getElementById("ques3").value;
  if (q1 ==="5" && q2 ==="5" && q3 ==="5" ) {
    alert("Thank you for your interest in acme employment. We are not able to consider you for employment at this time. ");
  } else {
    window.location.assign("http://acmeemployment.com");
    //window.location.assign("http://www.w3schools.com");
  }
}

<form action="" method="">

  <p>Are you 18 years of age or older?*<br/>
    <input type="radio" name="q1" id="ques1" value="5">Yes
    <br/>
    <input type="radio" name="q1" value="7">No
  </p>

  <p>Are you willing to take a drug screen according to our policy?*<br/>
    <input type="radio" name="q2" id="ques2" value="5">Yes
    <br/>
    <input type="radio" name="q2" value="7">No
  </p>

  <p>Will you release your background information inclusive of ciminal records?*<br/>
    <input type="radio" name="q3" id="ques3" value="5">Yes
    <br/>
    <input type="radio" name="q3" value="7">No
  </p>

  <input type="button" value="Submit" onclick="valid()" />

</form>

You have to check if they're actually checked, see: stackoverflow.com/questions/9618504/… — Tom
– Tom, Commented Nov 3, 2015 at 16:37
You want to check var q1_yes = document.getElementById("ques1").checked which is different from returning the value; the value will always be the same. Also, you have at least one typo on the word "criminal". — Marc
– Marc, Commented Nov 3, 2015 at 16:38
Thank you for the reference Tom. I wasn't able to find this on my initial search. Very helpful! Also, Marc, very useful. I was piggybacking someone else's code and overlooked the "value" versus "checked" - thanks! — Graham
– Graham, Commented Nov 3, 2015 at 17:19

Dave · Accepted Answer · 2015-11-03 16:38:09Z

1

Your code isn't checking for the selected radio buttons. You can use document.querySelector() to find the selected radio buttons.

Also, it seems like your logic is backwards and you want to check for !== "5".

function valid() {
  var q1 = document.querySelector("[name='q1']:checked").value;
  var q2 = document.querySelector("[name='q2']:checked").value;
  var q3 = document.querySelector("[name='q3']:checked").value;
  if (q1 ==="5" && q2 ==="5" && q3 ==="5" ) {
    console.log("Thank you for your interest in acme employment. We are not able to consider you for employment at this time. ");
  } else {
    console.log("redirect to http://acmeemployment.com");
  }
}

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<form action="" method="">

  <p>Are you 18 years of age or older?*<br/>
    <input type="radio" name="q1" id="ques1" value="5">Yes
    <br/>
    <input type="radio" name="q1" value="7">No
  </p>

  <p>Are you willing to take a drug screen according to our policy?*<br/>
    <input type="radio" name="q2" id="ques2" value="5">Yes
    <br/>
    <input type="radio" name="q2" value="7">No
  </p>

  <p>Will you release your background information inclusive of ciminal records?*<br/>
    <input type="radio" name="q3" id="ques3" value="5">Yes
    <br/>
    <input type="radio" name="q3" value="7">No
  </p>

  <input type="button" value="Submit" onclick="valid()" />

</form>

edited Nov 3, 2015 at 16:38

answered Nov 3, 2015 at 16:36

Dave

11k3 gold badges45 silver badges54 bronze badges

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

3 Comments

Marcos Pérez Gude Over a year ago

This is the good answer, but an explanation is better... maybe OP doesn't knows that radio buttons has the value even if not checked

Graham Over a year ago

Thank you Dave. I appreciate the effort and insight. This worked very well. Marcos, I'm able to check the script from gh-canon.github.io/stack-snippet-console/console.js and learn from that (even though it's pretty big for this specific task).

Dave Over a year ago

@Graham I'm glad I could help. Don't be confused by the console.js include. That is only used to show results in the snippet--it doesn't have anything to do with the actual solution.

Collectives™ on Stack Overflow

javascript conditional onclick form

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related