Skip to content
Advertisement

Radio buttons checked changing submit text

My site structure consists on an index.php which is styled by a css file. It then includes the following php code in a separate file:

<?php include("globals.php"); ?>
<form action="<?php echo $website.$relative_string;?>" name="subscribe" onsubmit="javascript:return checkEmail(this);" method="post">
<div id="cell8" class="titlecell2"><h3>Email:</h3></div>
<div id="cell9" class="inputcell2">
<input type="text" class="inputfield2" name="email" value="Your Email..." id="email2" maxlength="255" onfocus="this.value='';">
</div>
<div id="cell10" class="textcell3">
<input name="group" type="hidden" id="group[]" value="<?php echo $group; ?>">
<input name="subscribe" id="sub" type="radio" value="true" checked>
</span>Subscribe </p>
</div>
<div id="cell11" class="buttoncell">
<button type="submit" name="Submit2" value="Join" id="submitButton2">
<span>OK</span>
</button>
</div>
<div id="cell8" class="textcell4">
<input type="radio" name="subscribe" id="unsub" value="false">
</span>Un-Subscribe </p>
</div>
</form>

It appears on screen with no problems in the correct layout as my css style sheet. What I would like this to do is when I select the “Subscribe” radio button the submit button text “OK” changes to “Join”. When I click on the Unsubscribe button text “OK” or “Join” changes to “Leave”.

I tried to make some code from research:

if(document.getElementById('sub').checked) {
    document.write("<span>Join</span>"
}
else if(document.getElementById('unsub').checked) {
    document.write("<span>Leave</span>)
}

I think this kind of worked in that it changed to Join (replacing the OK line, but obviously didn’t update on clicking unsubscribe. I guess it would update on refreshing the page if my default wasn’t join. I guess I need to do some form of onclick but then I have no idea how to adjust that span ok bit.

Please help? Many thanks Chris

Advertisement

Answer

Here is a solution in plain JavaScript without jQuery. It avoids the unnecessary overhead.

This should work, but I haven’t had a chance to test it:

var sub = document.getElementById('sub'); // Save element to a variable, so you don't have to look for it again
var unsub = document.getElementById('unsub');
var btn = document.getElementById('submitButton2');

sub.onchange = function() //When sub changes
{
    if(sub.checked)  //If it's checked
    {
        btn.innerHTML = "<span>Join</span>"; // Set button to Join
    }
    else // If not..
    {
        btn.innerHTML = "<span>OK</span>"; // Set button to OK
    }
}

unsub.onchange = function() //When unsub changes
{
    if(unsub.checked)  //If it's checked
    {
        btn.innerHTML = "<span>Leave</span>"; // Set button to Leave
    }
    else // If not..
    {
        btn.innerHTML = "<span>OK</span>"; // Set button to OK
    }
}

However, you should not do it like this.

You should combine the two radio buttons into a radio group.

In that case you will listen for radio group to change, get the value of the radio group, set button text according to the value.

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement