Reputation: 15
I have a Yes/No question (radiobutton), and depending on the answer I want to show/hide divs. The workflow: Select civil status from select list, if the selected option's value is 1, ask if their spouse is employed or not (radiobutton), if employed, show input asking for personal number. When they filled out the personal number, show hidden div (link to next step). If the civil status option's value was 0 (means they dont have a partner), show same hidden div (link to next step). It works till showing the personal number input field, but i dont know how to add a validation to the input (to check if hey typed something inside, and only if they typed, show the next step button) inside the if/else statement. Tried this, but doesn't work:
else if($(this).attr("value")=="yes"){
$('input[fname=amount]').keyup(function(){
if($(this).val().length==5)
$('#stepsHIDDEN').show();
else
$('#stepsHIDDEN').hide();
}
Can you help?
function showDiv(elem) {
switch (elem.value) {
case 'Select':
document.getElementById('stepsHIDDEN').style.display = 'none';
break;
case '1':
document.getElementById('questionHIDDEN').style.display = 'block';
document.getElementById('stepsHIDDEN').style.display = 'none';
break;
case '0':
document.getElementById('stepsHIDDEN').style.display = 'block';
document.getElementById('questionHIDDEN').style.display = 'none';
break;
}
}
if (document.getElementById('checkbox').checked) {
document.getElementById('stepsHIDDEN').style.display = 'block';
}
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="no"){
$("#stepsHIDDEN").show();
} else if($(this).attr("value")=="yes"){
$("#numberinputHIDDEN").show();
$("#stepsHIDDEN").hide();
} else { $("#stepsHIDDEN").hide();
}
});
});
#numberinputHIDDEN {
display: none;
}
#stepsHIDDEN {
display: none;
}
#questionHIDDEN {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<select name="status" id="soflow2" onchange="showDiv(this)">
<option>Select</option>
<option value="0">Single</option>
<option value="1">Married</option>
<option value="1">Registered Legal Partnership</option>
<option value="1">Remarried</option>
<option value="0">Legally Separated</option>
<option value="0">Divorced</option>
<option value="0">Widowed</option>
<option value="1">Informal Partnership</option>
</select>
<div id="questionHIDDEN">
<p>
Is your spouse/legal partner working?
<form role="form" class="question">
<label class="radio-inline">
<input type="radio" id="radiobutton" for="show" name="optradio" value="yes">Yes
</label>
<label class="radio-inline">
<input type="radio" id="radiobutton" for="show" name="optradio" value="no">No
</label>
</form>
<p id="numberinputHIDDEN">His/her Personnel Number:
<input class="personnelnumber" type="text" name="fname">
</p>
</div>
<div id="stepsHIDDEN">
<button type="button" class="nextstep"><a href="05Step.html">Next</a>
</button>
</div>
Upvotes: 0
Views: 999
Reputation: 162
I've had a look at the code and aside from having to change the jQuery selector from 'input[fname=amount]'
to 'input[name=fname]'
it basically works as it is.
https://jsfiddle.net/CyberneticianDave/98sd3jrn/
The only thing I had to change was putting the keyup
handler as part of the document.ready
callback:
$(document).ready(function() {
$('input[name=fname]').keyup(function(){
if($(this).val().length==5)
$('#stepsHIDDEN').show();
else
$('#stepsHIDDEN').hide();
});
$('input[type="radio"]').click(function() {
if ($(this).attr("value") == "no") {
$("#stepsHIDDEN").show();
} else if ($(this).attr("value") == "yes") {
$("#numberinputHIDDEN").show();
$("#stepsHIDDEN").hide();
} else {
$("#stepsHIDDEN").hide();
}
});
});
Hope that helps!
Upvotes: 1
Reputation: 1288
Try below code
<select name="status" id="soflow2" onchange="showDiv(this)">
<option value="Select">Select</option>
<option value="0">Single</option>
<option value="1">Married</option>
<option value="1">Registered Legal Partnership</option>
<option value="1">Remarried</option>
<option value="0">Legally Separated</option>
<option value="0">Divorced</option>
<option value="0">Widowed</option>
<option value="1">Informal Partnership</option>
</select>
function showDiv(elem) {
switch ($(elem).find(':selectd').val()) {
case 'Select':
$('#stepsHIDDEN').hide();
break;
case '1':
$('#questionHIDDEN').show();
$('#stepsHIDDEN').hide();
break;
case '0':
$('#stepsHIDDEN').show();
$('#questionHIDDEN').hide();
break;
}
}
if ($('#checkbox').is(':checked')) {
$('#stepsHIDDEN').show();
}
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "no") {
$("#stepsHIDDEN").show();
} else if ($(this).attr("value") == "yes") {
$("#numberinputHIDDEN").show();
$("#stepsHIDDEN").hide();
} else {
$("#stepsHIDDEN").hide();
}
});
});
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).val().toLowerCase() == "no") {
$("#stepsHIDDEN").show();
} else if ($(this).val().toLowerCase() == "yes") {
$("#numberinputHIDDEN").show();
$("#stepsHIDDEN").hide();
} else {
$("#stepsHIDDEN").hide();
}
});
});
Upvotes: 0