CODEWITHSUNDEEP
javascriptforms
earther12
earther12

Reputation: 3

Form redirect after eligibility questions

I have a form with several pages of questions. I would like to reduce the number of people filling out the form by asking some eligibility questions first. I have two questions I would like them to answer, and if they answer no, I would send them to a page that tells them they aren't eligible.

This is what I've done so far, but it's not working. Instead of redirecting to the page, I set up, it just continues to the next page of the form. Any help is greatly appreciated.

        <p>Do you know the rules? *</p>
        <div class="formfield radio">
            <input class="refinput" type="radio" id="rulesYes" value="true" required>
            <label class="reflabel" for="rulesYes">Yes</label><br>
            <input class="refinput" type="radio" id="rulesNo"  value="false" required>
            <label class="reflabel" for="rulesNo">No</label>
        </div>

        <p>Have you downloaded the rules PDF? *</p>
        <div class="formfield radio">
            <input class="refinput" type="radio" id="pdfYes" value="true" required>
            <label class="reflabel" for="pdfYes">Yes</label><br>
            <input class="refinput" type="radio" id="pdfNo" value="false" required>
            <label class="reflabel" for="pdfNo">No</label>
        </div>

       <input type="submit" name="next" id="button" class="next action-button" value="Next" />

and the JS:

<script>
    document.getElementById("submit").onclick = function(value) {
    if ('#rulesNo' == false && '#pdfNo' == false) {
        window.location.href = "/download-page.php";
     }
    }
    </script>

Upvotes: 0

Views: 44

Answers (2)

Mary Obiagba
Mary Obiagba

Reputation: 225

Not A Bot has done justice to this question. You can also just choose to monitor the checked state with inputElement.checked instead of using the values true or false. In that case you don't need to add value attribute to your input in the html.

Note: I used the not ! operator because of the way I wrote my own code.

If (!rulesYes.checked || !pdfYes.checked) means if either rulesYes or pdfYes is not checked. You can modify the code depending on your needs.

Javascript code:

document.getElementById('button').onclick = function() {
 let rulesYes = document.getElementById('rulesYes');
 let pdfYes = document.getElementById('pdfYes');
  if (!rulesYes.checked || !pdfYes.checked) {
   console.log('Not Allowed!');
  } else {
   console.log('permission granted');
  }
}

You can test and play with the code here on code pen

Upvotes: 1

Not A Robot
Not A Robot

Reputation: 2694

Without capturing the values of the radio button, you can't proceed with any task further.

Now, if you want to capture which radio button in click by the user you need an attribute called name, which will be in those radio button groups from which you need to capture user value.

So,

<input class="refinput" 
       type="radio" 
       id="rulesYes" 
       value="true" required>

To

<input class="refinput" 
       type="radio" 
       name="rules" 
       id="rulesYes" 
       value="true" required>

Adding the name attribute.

Now, by using querySelector, we can get the which radio button the user has selected.

document.querySelector('input[name="rules"]:checked').value;

Below is the modified code. 

document.getElementById("button").addEventListener("click", userInput);

function userInput() {
   let rulesRadioValue = document.querySelector('input[name="rules"]:checked').value;
   let rulesPDFValue = document.querySelector('input[name="rules-pdf"]:checked').value;
   
   
   if(rulesRadioValue == "false" && rulesPDFValue == "false"){
      console.log("Take user to downlaod page.");
   }
   else if(rulesRadioValue == "true" && rulesPDFValue == "true"){
      console.log("Both YES selected.");
   }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<p>Do you know the rules? *</p>
<div class="formfield radio">
  <input class="refinput" type="radio" name="rules" id="rulesYes" value="true" required>
  <label class="reflabel" for="rulesYes">Yes</label><br>
  <input class="refinput" type="radio" name="rules" id="rulesNo" value="false" required>
  <label class="reflabel" for="rulesNo">No</label>
</div>

<p>Have you downloaded the rules PDF? *</p>
<div class="formfield radio">
  <input class="refinput" type="radio" name="rules-pdf" id="pdfYes" value="true" required>
  <label class="reflabel" for="pdfYes">Yes</label><br>
  <input class="refinput" type="radio" name="rules-pdf" id="pdfNo" value="false" required>
  <label class="reflabel" for="pdfNo">No</label>
</div>

<button id="button" class="next action-button">Next</button>

Upvotes: 1

Related Questions