Showing a Result Table based on an array of Radio Buttons selected

user_15095817 0
Viewed 58

I am new to coding. I'm trying to build an online form where there are a few questions that user will need to answer and questions are done in radio button options. Based on the array of radio buttons selected, I will then need to show the results on the same page. I'm thinking of using if..else statement but it doesn't seem to be working.

Here is my code:

<script>

function ShowHideDiv() {

    if (document.getElementById("chkCitizen").checked ? && document.getElementById("chkMale").checked ?
    && document.getElementById("chkSingle").checked ? && document.getElementById("chkEmployed").checked ?
    && document.getElementById("chkNo").checked ? )
    {
        btn1.style.visibility = "visible";
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = "block" : "none";
    }
    else if (document.getElementById("chkCitizen") && document.getElementById("chkFemale")
    && document.getElementById("chkSingle") && document.getElementById("chkEmployed")
    && document.getElementById("chkNo")
    {
        btn1.style.visibility = "visible";
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = "block" : "none";
    }
}


function resetFunction(){
    document.getElementById("reliefChecker").reset();
}



</script>

Here's the full code with html and css:

<script>

function ShowHideDiv() {

    if (document.getElementById("chkCitizen").checked && document.getElementById("chkMale").checked
    && document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
    && document.getElementById("chkNo").checked)
    {
        btn1.style.visibility = "visible";
        var btn1 = document.getElementById("btn1");
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = "block" : "none";
    }
    else if (document.getElementById("chkCitizen").checked && document.getElementById("chkFemale").checked
    && document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
    && document.getElementById("chkNo").checked)
    {
        btn1.style.visibility = "visible";
        var btn1 = document.getElementById("btn1");
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = "block" : "none";
    }
    else if (document.getElementById("chkPR").checked && document.getElementById("chkMale").checked
    && document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
    && document.getElementById("chkNo").checked)
    {
        btn1.style.visibility = "visible";
        var btn1 = document.getElementById("btn1");
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = "block" : "none";
    }
    else if (document.getElementById("chkPR").checked && document.getElementById("chkFemale").checked 
    && document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked 
    && document.getElementById("chkNo").checked)
    {
        btn1.style.visibility = "visible";
        var btn1 = document.getElementById("btn1");
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = "block" : "none";
    }
    else if (document.getElementById("chkForeigner").checked && document.getElementById("chkMale").checked 
    && document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked 
    && document.getElementById("chkNo").checked)
    {
        btn1.style.visibility = "visible";
        var btn1 = document.getElementById("btn1");
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = "block" : "none";
    }
    else (document.getElementById("chkForeigner").checked && document.getElementById("chkFemale").checked
    && document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
    && document.getElementById("chkNo").checked)
    {
        btn1.style.visibility = "visible";
        var btn1 = document.getElementById("btn1");
            var dvtext = document.getElementById("dvtext");
            dvtext.style.display = "block" : "none";
    }
}

function resetFunction(){
    document.getElementById("reliefChecker").reset();
}

</script>
.button {
    background-color: #F7922C;
    border-radius: 12px;
    border: 2px solid white;
    color: white;
    padding: 10px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: none;
    cursor: pointer;
    visibility: block;
    }
.buttonReset {
    background-color: #FFFFFF;
    border-radius: 12px;
    border: 2px solid #005AAD;
    color: black;
    padding: 10px 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: none;
    cursor: pointer;
    visibility: hidden;
    }
.center {
  text-align:center;
}
<h1><p style="font-family:Arial">Checker</p></h1>


<form id="reliefChecker">
<fieldset id="reliefChecker"; style="padding:10px;border:0px solid #FFFFFF;">


<!-- Second Question -->
<p style="font-family:Arial; font-size:25px;font-weight:bold"> 
        Gender <span style="color:red">*</span></p>

<label for="chkMale" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkMale" name="gender" value="male" onclick="ShowHideDiv()">
    Male</label>
<br>
<label for="chkFemale" style="font-family:Arial; font-size:20px;">
    <input type="radio" id="chkFemale" name="gender" value="female" onclick="ShowHideDiv()">
    Female</label>

<!-- Third Question -->
<p style="font-family:Arial; font-size:25px;font-weight:bold"> 
        Marital Status <span style="color:red">*</span></p>

<label for="chkMarried" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkMarried" name="maritalStatus" value="married" onclick="ShowHideDiv()">
    Married</label>
<br>
<label for="chkSingle" style="font-family:Arial; font-size:20px;">
    <input type="radio" id="chkSingle" name="maritalStatus" value="single" onclick="ShowHideDiv()">
    Single</label>
<br>
<label for="chkDivorced" style="font-family:Arial; font-size:20px;">
    <input type="radio" id="chkDivorced" name="maritalStatus" value="divorce" onclick="ShowHideDiv()">
    Divorced</label>


<!-- Fourth Question -->
<p style="font-family:Arial; font-size:25px;font-weight:bold"> 
        Employment Status <span style="color:red">*</span></p>

<label for="chkEmployed" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkEmployed" name="EmploymentStatus" value="employed" onclick="ShowHideDiv()">
    Employee / Self-Employed (Including Part-Timers)</label>
<br>
<label for="chkUnemployed" style="font-family:Arial; font-size:20px;">
    <input type="radio" id="chkUnemployed" name="EmploymentStatus" value="unemployed" onclick="ShowHideDiv()">
    Unemployed</label>

<!-- Fifth Question -->
<p style="font-family:Arial; font-size:25px;font-weight:bold"> 
        Do you have any children? <span style="color:red">*</span></p>

<label for="chkYes" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkYes" name="Children" value="yes">
    Yes</label>
<br>
<label for="chkNo" style="font-family:Arial; font-size:20px;">
    <input type="radio" id="chkNo" name="Children" value="no" onclick="ShowHideDiv()">
    No</label>


<br><br>
<div class="center">
    <input type="button" id="btn1" class="button center" value="Check Now" onclick="ShowHideDiv()">
</div>

    
<div id="dvtext" style="padding:20px;border:1px solid lightgray; border-radius:15px; margin:15px; background-color:#FFFAC7; font-size:22px; font-family:Arial;display:none"> 
<span style="font-size:24px"><b><u>Results</u></b></span>
<br><br>
Show some results here!


<div class="center">
    <input type="button" id="btnreset1" class="buttonReset center" value="Reset" onclick="ShowHideDiv(); resetFunction()">
</div>



</fieldset>
</form>
</body>
</html>

if-statement html javascript
2 Answers

You can try this one (as I understood, it works fine (if you have more questions, it can be done with loops) ).

HTML code is:

<div class="questions">
    <div class="question"> Question 1
        <label>
            <input class="answer" type="radio" name="q1" value="one">One
        </label>
        <label>
            <input class="answer" type="radio" name="q1" value="two">Two
        </label>
        <label>
            <input class="answer" type="radio" name="q1" value="three">Three
        </label>
        <label>
            <input class="answer" type="radio" name="q1" value="four">Four
        </label>
    </div>
    <br>
    <div class="question"> Question 2
        <label>
            <input class="answer" type="radio" name="q2" value="one">One
        </label>
        <label>
            <input class="answer" type="radio" name="q2" value="two">Two
        </label>
        <label>
            <input class="answer" type="radio" name="q2" value="three">Three
        </label>
        <label>
            <input class="answer" type="radio" name="q2" value="four">Four
        </label>
    </div>
 </div>

 <br>
 <button id="submit">Submit</button>

CSS code is:

.question {
  display: flex;
  flex-direction: column;
}

JS code is:

var submit = document.getElementById('submit');

submit.addEventListener('click', function() {
    var answers = document.getElementsByClassName('answer');
    var result = "";
    for(var i=0; i<answers.length; i++) {
        if (answers[i].checked) { 
            result += answers[i].value + "\n";
        }
    }
    alert(result);
});
Admin1

HTML

<div class="questions">
    <div class="question"> Question 1
        <label>
            <input class="answer" type="radio" name="q1" value="one">One
        </label>
        <label>
            <input class="answer" type="radio" name="q1" value="two">Two
        </label>
        <label>
            <input class="answer" type="radio" name="q1" value="three">Three
        </label>
        <label>
            <input class="answer" type="radio" name="q1" value="four">Four
        </label>
    </div>
    <br>
    <div class="question"> Question 2
        <label>
            <input class="answer" type="radio" name="q2" value="one">One
        </label>
        <label>
            <input class="answer" type="radio" name="q2" value="two">Two
        </label>
        <label>
            <input class="answer" type="radio" name="q2" value="three">Three
        </label>
        <label>
            <input class="answer" type="radio" name="q2" value="four">Four
        </label>
    </div>
    <br>
    <button id="submit">Submit</button>
</div>

CSS

.question {
  display: flex;
  flex-direction: column;
}

JS

var submit = document.getElementById('submit');
var result = document.getElementById('result');
var resultText = document.getElementById('result-text');
var questions = document.getElementsByClassName('questions')[0];

submit.addEventListener('click', function() {
    var answers = document.getElementsByClassName('answer');
    var r = "";
    for(var i=0; i<answers.length; i++) {
        if (answers[i].checked) { 
            r += answers[i].value + "\n";
        }
    }
    questions.style.display = 'none';
    result.style.height = '300px';
    resultText.innerHTML = r;
});
Admin1
Related