jQuery Radio Button function not working properly

Question

I have a form with two radio buttons and a submit button which leads to a specific form based upon the user's selection. I wanted to use jQuery to change between the two buttons but have gotten myself a bit lost.

Here is my javascript from another file in the proj:

function goTo()
{

var yesButton = $('#yesRad');
var noButton = $('#noRad');

if (yesButton[0].checked) 
{
submitForm('yesForm') && noButton.Checked==false;


}
else  (noButton[1].checked)
{
submitForm('noForm') && yesButton.Checked==false;
}

Inside the jsp I have the following code:

<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
    <input type="hidden"  name="state" value="<c:out value="${requestScope.state}"/>" />
    <input type="hidden"  id="address" name="address" value="${user.address}" />
    <input type="hidden"  name="mode" value="1" />
    <input type="radio"  name ="radio"id="yesRad" value="yesForm" checked="checked" />Yes<br>
</form:form>

<form:form action="notinterested" commandName="user" name="noForm" id="noForm">

    <input type="hidden"  name="state" value="<c:out value="${requestScope.state}"/>" />
    <input type="hidden"  id="address" name="address" value="${user.address}" />
    <input type="hidden"  name="mode" value="1" />
    <input type="radio" name="radio" id="noRad"  value="noForm" />No<br>
</form:form>

Submit

<script>
    $("#yesRad").change(function(){
        var $input = $("#yesRad");
        var $inputb = $("#noRad");

        if($inputb.is(':checked'))
            $("#yesRad").prop("checked", false);
        else  if($input.is(':checked'))
            $("#yesRad").prop("checked",true) && $("#noRad").prop("checked",false);

});
</script>

I have gotten some functionality out of my jQuery but it's definitely far from correct.. I hope I was clear and thorough in my question. Thanks in advance!!

Answer 1

Solved: Using javascript and taking the radio buttons out of the separate form elements. First let's take a look at the JSP form elements involved:

<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
    <input type="hidden"  name="state" value="<c:out value="${requestScope.state}"/>" />
    <input type="hidden"  id="address" name="address" value="${user.address}" />

</form:form>

<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
    <input type="hidden"  name="state" value="<c:out value="${requestScope.state}"/>" />
    <input type="hidden"  id="address" name="address" value="${user.address}" />

</form:form>

<input name="radio" type="radio" id="Yes" value="yes" />Yes<br>
<input name="radio" type="radio" id="No" value="no"/>No<br>

What I did here was simply take the radio buttons out of the separate forms and grouped them together...pretty obvious; now let's look at the javascript file.

    function goHere()
    {
var yesButton = $('#Yes');
var noButton = $('#No');
var str ="Please select an option first then press the 'Submit' button";
if (yesButton[0].checked) 
{
    submitForm('yesForm');
}
else if (noButton[0].checked)
{
    submitForm('noForm');
}
else 
{
    document.write(str.fontcolor.font("red"));
}
    }

As you can see the function 'goHere();' is going to tell the submit button in the following code where we want to go based on the user's selection on our radio buttons. Here's the call from our javascript function in a submit button on the form...

    <div class="button-panel" id="Submit"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle"  name="submitBtn"  onClick="goHere();">Submit</button>
<span class="buttons buttons-right"></span>

That's it!! Simply put; sometimes, while it's invaluable to learn something new, if it's not broke--etc. Hope this helps someone later on down the line!

Answer 2

To begin with, don't use prop, use attr. prop is slower. You've defined variables so let's not look them up again. In your if/else statement just use the variables. I'm not entirely sure what you're trying to do with the &&. I suspect you're trying to set the value of the two inputs. If so, they should be separate statements. If inputb is checked there is no reason to set it to checked, so we can remove that piece.

You probably want this change to fire on both inputs.

$("#yesRad, #noRad").change(function(){
    var $input = $("#yesRad");
    var $inputb = $("#noRad");
    if($inputb.is(':checked')){
        $input.attr("checked", false);
    } else if($input.is(':checked')){
        $inputb.attr("checked",false);
    }
});