Radio buttons checked changing submit text

Question

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

Answer 1

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.