...

View Full Version : Change submit button text based on radio button selected



HDRebel88
05-29-2012, 11:02 AM
I'm looking to change a submit buttons text based on which radio button is checked.


Here's the form data:



<div class="register_membership_type_position">
<span class="register_membership_type_title">Membership Type:</span>
<span class="register_membership_type_basic_position"><input type="radio" value="basic" name="register_membership_type" id="register_membership_type_basic" class="register_membership_type_basic" onchange="changeButton('basic');" checked="checked" /> <label for="register_membership_type_basic"><span class="register_radio_text">Basic</span></label></span>
<span class="register_membership_type_premium_position"><input type="radio" value="premium" name="register_membership_type" id="register_membership_type_premium" class="register_membership_type_premium" onchange="changeButton('premium');" /> <label for="register_membership_type_premium"><span class="register_radio_text">Premium</span></label></span>
<span class="register_membership_type_platinum_position"><input type="radio" value="platinum" name="register_membership_type" id="register_membership_type_platinum" class="register_membership_type_platinum" onchange="changeButton('platinum');" /> <label for="register_membership_type_platinum"><span class="register_radio_text">Platinum</span></label></span>
<span class="learn_more_position">(<a href="/signup?memberships">Learn More About Membership Types</a>)</span>
</div>

<p class="register_form_position register_submission">
<input type="submit" value="Sign Up" class="register_button_position" id="submit_button" />
</p>



Here's the javascript I've been trying, but haven't had much luck.


function changeButton(selection)
{
selection.charAt(0).toUpperCase() + selection.slice(1);
el = document.getElementById(submit_button);
el.value = 'Sign Up for '+selection+' Membership';
}

low tech
05-29-2012, 11:31 AM
Hi


something to look at
LT



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div class="register_membership_type_position">
<span class="register_membership_type_title">Membership Type:</span>
<span class="register_membership_type_basic_position"><input type="radio" value="basic" name="register_membership_type" id="register_membership_type_basic" class="register_membership_type_basic" onclick="changeButton('basic');" checked="checked" /> <label for="register_membership_type_basic"><span class="register_radio_text">Basic</span></label></span>
<span class="register_membership_type_premium_position"><input type="radio" value="premium" name="register_membership_type" id="register_membership_type_premium" class="register_membership_type_premium" onclick="changeButton('premium');" /> <label for="register_membership_type_premium"><span class="register_radio_text">Premium</span></label></span>
<span class="register_membership_type_platinum_position"><input type="radio" value="platinum" name="register_membership_type" id="register_membership_type_platinum" class="register_membership_type_platinum" onclick="changeButton('platinum');" /> <label for="register_membership_type_platinum"><span class="register_radio_text">Platinum</span></label></span>
<span class="learn_more_position">(<a href="/signup?memberships">Learn More About Membership Types</a>)</span>
</div>

<p class="register_form_position register_submission">
<input type="submit" value="Sign Up" class="register_button_position" id="submit_button" />
</p>

<script type="text/javascript">

function changeButton(text)
{
var txt = text.toUpperCase();
el = document.getElementById("submit_button");
el.value = 'Sign Up for ' +txt+ ' Membership';
}
</script>
</body>
</html>

HDRebel88
05-29-2012, 12:15 PM
Hi


something to look at
LT



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div class="register_membership_type_position">
<span class="register_membership_type_title">Membership Type:</span>
<span class="register_membership_type_basic_position"><input type="radio" value="basic" name="register_membership_type" id="register_membership_type_basic" class="register_membership_type_basic" onclick="changeButton('basic');" checked="checked" /> <label for="register_membership_type_basic"><span class="register_radio_text">Basic</span></label></span>
<span class="register_membership_type_premium_position"><input type="radio" value="premium" name="register_membership_type" id="register_membership_type_premium" class="register_membership_type_premium" onclick="changeButton('premium');" /> <label for="register_membership_type_premium"><span class="register_radio_text">Premium</span></label></span>
<span class="register_membership_type_platinum_position"><input type="radio" value="platinum" name="register_membership_type" id="register_membership_type_platinum" class="register_membership_type_platinum" onclick="changeButton('platinum');" /> <label for="register_membership_type_platinum"><span class="register_radio_text">Platinum</span></label></span>
<span class="learn_more_position">(<a href="/signup?memberships">Learn More About Membership Types</a>)</span>
</div>

<p class="register_form_position register_submission">
<input type="submit" value="Sign Up" class="register_button_position" id="submit_button" />
</p>

<script type="text/javascript">

function changeButton(text)
{
var txt = text.toUpperCase();
el = document.getElementById("submit_button");
el.value = 'Sign Up for ' +txt+ ' Membership';
}
</script>
</body>
</html>



That worked perfectly thanks.

Now is there anyway to make it so it loads "Sign Up for Basic Membership" right when the page loads?

I have the button set just to "Sign Up" for users without Javascript enabled.

Any way to use window.onload=changeButton(basic); (tried this and doesn't work) or something like that?


EDIT: Well I got it working by placing changeButton(basic); at the bottom of the javascript file and then calling the javascript file at the end of the HTML page. I'm still looking for another way, because I hate placing javascript code outside of the <head> tags, but it is technically working right now. Using onload in the body tag was not working either.

low tech
05-29-2012, 12:43 PM
Hi


Now is there anyway to make it so it loads "Sign Up for Basic Membership" right when the page loads
I have the button set just to "Sign Up" for users without Javascript enabled.


Isn't 'sign up' and 'sign up for Basic Membership' the same thing? You start with the basic radio checked so shouldn't the button also read sign up for Basic Membership and not sign up.


If so just change the value of your button to sign up for Basic Membership

or have I misunderstood?


***
also NOTE the quotes around basic
onclick="changeButton('basic');"


Lastly, IF you need further help, I suggest posting the code you actually have now including your latest changes.

LT

HDRebel88
05-29-2012, 01:01 PM
Hi



Isn't 'sign up' and 'sign up for Basic Membership' the same thing? You start with the basic radio checked so shouldn't the button also read sign up for Basic Membership and not sign up.


If so just change the value of your button to sign up for Basic Membership

or have I misunderstood?



Yes and no. You see if the user doesn't have javascript enabled; and the button is defaulted to "Sign Up for Basic Membership", if they choose Premium, the button won't change because they have javascript turned off. So for those users the button reads "Sign Up" with no additional text.

For those people that have javascript enabled (which is most), your right, just setting the button to that text initially wouldn't matter.

low tech
05-29-2012, 01:22 PM
Hi

What about if you HIDE 2 of them in case JS turned off, so you just see one "basic" radio with "sign up" on button

IF JS ok --- unhide them and change the button text accordingly

I wrapped the two radios in a div and gave a class hidden (display none)
Then unhide with js.

LT

example: (you'll need to turn js off to see just one radio)
not sure how good it is but the idea is there.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">
.hidden {
display:none;
}
.showMe{
display:inline-block;
}
</style>

<body>
<div class="register_membership_type_position">
<span class="register_membership_type_title">Membership Type:</span>
<span class="register_membership_type_basic_position"><input type="radio" value="basic" name="register_membership_type" id="register_membership_type_basic" class="register_membership_type_basic" onclick="changeButton('basic');" checked="checked" />
<label for="register_membership_type_basic"><span class="register_radio_text">Basic</span></label></span><div id="notHidden" class="hidden">
<span class="register_membership_type_premium_position"><input type="radio" value="premium" name="register_membership_type" id="register_membership_type_premium" class="register_membership_type_premium" onclick="changeButton('premium');" /> <label for="register_membership_type_premium"><span class="register_radio_text">Premium</span></label></span>
<span class="register_membership_type_platinum_position"><input type="radio" value="platinum" name="register_membership_type" id="register_membership_type_platinum" class="register_membership_type_platinum" onclick="changeButton('platinum');" /> <label for="register_membership_type_platinum"><span class="register_radio_text">Platinum</span></label></div>
</span>

<span class="learn_more_position">(<a href="/signup?memberships">Learn More About Membership Types</a>)</span>
</div>

<p class="register_form_position register_submission">
<input type="submit" value="Sign Up" class="register_button_position" id="submit_button" />
</p>

<script type="text/javascript">

function changeButton(text)
{
var txt = text.toUpperCase();
el = document.getElementById("submit_button");
el.value = 'Sign Up for ' +txt+ ' Membership';
}
window.onload = function(){
var unhide = document.getElementById("notHidden");
unhide.className = "showMe";
changeButton('basic');
}
</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum