I've been working on a simple form that will have several (2-3) sets of questions that contain radio buttons as answers. Each radio button has a number value. I was able to work in a logic that shows or hides a text box when the user selects a certain radio button. In the original code I found, the validation checks only one specific question, but I'm wanting to update the validation code in a way that if ANY of the questions have a text box visible, and its empty, the alert pop up should come up.
Here is a JSFiddle page with the code: https://jsfiddle.net/nxenxoo/92myvwc3/25/
At this moment, if on question #1 I click on radio buttons 1-3, and forget to fill in the text box, move onto the second question and hit radio button 10, for example, the validation works great. I get a pop up.
However, lets say I fill in the text box required for question #1 and leave the text box that appears for question #2, then I get a 404 error upon submit.
I was trying to work in a OR statement || below, I was hoping it would work, but unfortunately it does not.
function validateForm(){
var x= $("form input[type=text]").val();
if ($('.showother' || '.showother2').is(":visible")) {
if ( x==null || x=="")
{
alert("Please fill in all text boxes");
return false;
I am curious to figure out what could be the problem. I know very little of javascript, so I am sorry if this is a very basic queston!
HTML
<div id="Other" class="showother" style="display:none">Please specify <input name="textbox" id="textbox" type="text">
</div>
...
<div id="Other2" class="showother2" style="display:none">Please specify <input name="textbox" id="textbox2" type="text">
</div>
Javascript
var x= $("form input[type=text]").val();
...
"form input[type=text]" matches both text inputs, but only returns the value of the first match.
function validateForm(){
var x1= $("#textbox").val(); // first textbox, use id
var x2= $("#textbox2").val(); // second textbox, use id
if ($('.showother' || '.showother2').is(":visible")) {
// check if either are null or empty
if ( x1==null || x1=="" || x2==null || x2=="") {
alert("Please fill in all text boxes");
return false;
}
}
}
Alternatively, check all visible text inputs with one block of code:
$("form input[type=text]").each(function() {
if (
($(this).parent().is(":visible"))
&& ($(this).val()==null || $(this).val()=="")
) {
alert("Please fill in all text boxes");
return false;
}
})