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: http://stackoverflow.com/questions/9618504/get-radio-button-value-with-javascript — Tom, Nov 03 '15 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, Nov 03 '15 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, Nov 03 '15 at 17:19

Dave · Accepted Answer · 2015-11-03T16:38:09.780

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>

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 — Marcos Pérez Gude, Nov 03 '15 at 16:38
Thank you Dave. I appreciate the effort and insight. This worked very well. Marcos, I'm able to check the script from http://gh-canon.github.io/stack-snippet-console/console.js and learn from that (even though it's pretty big for this specific task). — Graham, Nov 03 '15 at 17:22
@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. — Dave, Nov 03 '15 at 18:15

javascript conditional onclick form

1 Answers1