Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Change submit button text based on radio button selected

    I'm looking to change a submit buttons text based on which radio button is checked.


    Here's the form data:

    Code:
    <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.
    Code:
    function changeButton(selection)
    {
    	selection.charAt(0).toUpperCase() + selection.slice(1);
    	el = document.getElementById(submit_button);
    	el.value = 'Sign Up for '+selection+' Membership';
    }

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts
    Hi


    something to look at
    LT

    Code:
    <!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>
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by low tech View Post
    Hi


    something to look at
    LT

    Code:
    <!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.
    Last edited by HDRebel88; 05-29-2012 at 12:34 PM.

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts
    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
    Last edited by low tech; 05-29-2012 at 12:50 PM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #5
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by low tech View Post
    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.

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts
    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.

    Code:
    <!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>
    Last edited by low tech; 05-29-2012 at 01:38 PM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •