Question

I am new to javascript. I am doing a feedback form where there are 12 radio buttons that need to get validated individually and a textarea will be displayed when I click a particular value.

Here, when I click that button, my textarea, which is in display, should be mandatory entered (eg: when I click fail option in a results question, then I should mention in which subject he failed through that textarea. something like that).

For this, I have written code, it’s working fine with the 1st radio button, but unable to call this recursively for remaining buttons.

I need to call this code in a function recursively, but my variables need to get change everytime. Like for 2nd time, I should use option2,text2, likewise in next call option3,text3, etc.

var option = $("#form1 input[@name=radio1]:checked").val();
var text = document.getElementById("text1").value;

if (!$("#form1 input[@name=radio1]:checked").val()) {
    alert("Please fill all the fields");
    return false;
    errs++;
} else if (option == "3" && trim(text) == "") {
    alert("Please enter comments.");

    return false;

}

This piece of code needs to be called for var option1 to option10 and same text1 to text10. Like:

var option2 = $("#form1 input[@name=radio2]:checked").val();
var text2 = document.getElementById("text2").value;

This should get called immediately of completion of first radio button.

Please help me out.

Answer 1

“Recursive” is the wrong word here. You just want to loop over all the elements.

Get all the radios, and loop over them. Then get the ID, and all the fields associated with that id.

I’m assuming you’re using jQuery, so here’s an example:

// Note: The "@" is not needed in jQuery
var radios = $("#form1 input[name^='radio']"); // "^=" means "starts with"
radios.each(function(){
    var id = this.name.replace('radio', ''); // this will get the number, eg: 1
    var option = $(this).val();  // get radio's value
    var text = $('#text'+id).val();  // get textX's value

    if(!$(this).is(':checked')){ // check if radio is checked
        alert("Please fill all the fields");
        errs++;  // make sure to do this before "return false"
        return false;  // break the .each loop
    }
    else if (option == "3" && trim(text) == "") {
        alert("Please enter comments.");
        return false;
    }
});