SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form with radio buttons to hide fields

    Hi all,

    I have a form which has two radio buttons at the beginning which show and hide fields depending on what button is clicked:

    I want to adapt this js and html code so that when the page loads it checks whether one of the two radio buttons is clicked and depending on that it displays/hides the divs which are declared in the current function, at the moment it performs this when the user clicks one of the radio buttons but I want to perform it when the page is loaded and also when the user first enters the page I want the yes radio button to be selected and obviously show/hide the appropriate fields.

    Thanks for the help!

    Code:
                function checkjob(jobvalue){
    
                        if(jobvalue!="yes") {
                     
    document.getElementById("nombre").style.display = "block";
                            document.getElementById("apellido").style.display = "block";
                            document.getElementById("empresa").style.display = "none";
                            document.getElementById("contacto").style.display = "none";
    
                        }else{
                            document.getElementById("nombre").style.display = "none";
                            document.getElementById("apellido").style.display = "none";
                            document.getElementById("empresa").style.display = "block";
                            document.getElementById("contacto").style.display = "block";
    
                        }
    
                    }
    
    HTML
    
    <div class="form_element">
    
          		<label >></label>
    
                <div class="radio_element">
    
    					<input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" >
    
                        <span >yes</span>
    
                 </div>
    
                <div class="radio_element">
    
    					<input type="radio" value="no" class="radio" id="no" name="job" onchange="checkjob(this.value)">
    
                        <span >no</span>
    
                </div>
    
    	</div>

  2. #2
    SitePoint Zealot Amit Yaron's Avatar
    Join Date
    Jan 2011
    Location
    Hod Haharon, Israel
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want the "yes" radio button selected by default, add the attribute 'checked="checked"' as follows
    Code:
    <input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" checked="checked" />
    Last edited by Amit Yaron; Feb 12, 2011 at 13:26. Reason: mixup

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help, but the problem is that I don't want the first radio button to be always checked, because say if they submit and have not filled in all the fields and they go back to the form again, and even if thye had selected the second radio button when the page loads again the first radio button will be selected and this is not what I want, I want it to save what they had checked, any more help? Thanks!

  4. #4
    SitePoint Zealot Amit Yaron's Avatar
    Join Date
    Jan 2011
    Location
    Hod Haharon, Israel
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only way I can do it without server side programs is to store the value of "job" in a cookie. You can decide which radio button is checked according to its value.
    To learn how to use cookies in Javascript, click here.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks webgypsy, what do both of those for loops actually do? Just so I understand it. Thanks!

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry I'm not bumping thread, it's just I can't edit my last post.

    I think the code webgypsy posted is a valid solution but I don't think this ensures that when the user first loads the page, the first radio button is selected ie "yes", I know amit gave an answer to this but I think that will set the first radio button as checked always even when they submit the form and haven't entered all fields for example. Thanks!


Bookmarks

Posting Permissions

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