davidxc davidxc - 2 months ago 11
HTML Question

Javascript display rest of the form if no checkboxes are ticked, hide if 1 or 2 of them are



function showHide() {
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
} else {
div.style.display = 'none';
}
}

<form method="post" name="installer" onsubmit="showHide(); return false;">

<label>Home Keyword</label>
<br />Are you looking to live here?
<input id="checkbox" type="checkbox">
<br />Are you looking to rent?
<input id="checkbox" type="checkbox">
<br />

<input type="submit" value="Continue" name="submit" onsubmit="showHide()">

</form>

<div id="hidden_div" style="display:none">
<p>Show rest of the form here when the above form is submitted with no checkboxes ticked</p>
</div>


<div id="sorry_div" style="display:none">
<p>Sorry, we can't continue with your application.</p>
</div>





I'm trying to get the rest of my form to display if both of the checkboxes have remained empty (following the submit/continue button). However, at the moment it shows regardless of how many are ticked.

Following this, If both are ticked how would I go about a message coming up saying: Sorry, we can't continue or similar?

Is this relatively easy to make or quite complicated?

I have the following HTML:



<form method="post" name="installer" onsubmit="showHide(); return false;">

<label>Home Keyword</label>
<br />

Are you looking to live here? <input id="checkbox" type="checkbox"><br />
Are you looking to rent? <input id="checkbox" type="checkbox"><br />

<input type="submit" value="Continue" name="submit" onsubmit="showHide()">

</form>

<div id="hidden_div" style="display:none">
<p>Show rest of the form here when the above form is submitted with no checkboxes ticked </p>
</div>


<div id="sorry_div" style="display:none">
<p>Sorry, we can't continue with your application.</p>
</div>


The JS:

function showHide() {
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}

Answer

First of all, you shouldn't use an id more than once; that's a bad practice. secondly, use the .checked property to get the checked state of a checkbox, then use the logical OR operator (||); to check if either the first or second checkboxes are checked.

function showHide() {
    var div = document.getElementById("hidden_div");
    var firstCheckBox = document.getElementById("first-checkbox").checked;
    var secondCheckBox = document.getElementById("second-checkbox").checked;
    if (firstCheckBox != 1 && secondCheckBox != 1) {
        div.style.display = '';
    } else {
        div.style.display = 'none';
    }
}
<form method="post" name="installer" onsubmit="showHide(); return false;">

    <label>Home Keyword</label>
    <br />Are you looking to live here?
    <input id="first-checkbox" type="checkbox">
    <br />Are you looking to rent?
    <input id="second-checkbox" type="checkbox">
    <br />

    <input type="submit" value="Continue" name="submit" onsubmit="showHide()">

</form>

<div id="hidden_div" style="display:none">
    <p>Show rest of the form here when the above form is submitted with no checkboxes ticked</p>
</div>


<div id="sorry_div" style="display:none">
    <p>Sorry, we can't continue with your application.</p>
</div>

Comments