SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change text when different choice is made

    Hello,

    I have the following code:

    Code:
    What kind of car do you have?
    
    <input type="radio" name="transport" value="Car" checked="checked" >Car
    <input type="radio" name="transport" value="Train" >Train
    <input type="radio" name="transport" value="Plane" >Plane
    But if someone selects Train or Plane, then I would like to display a text other than "What kind of car do you have?". Any one knows how to do this?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't it make more sense to ask that question after the user has made their selection?
    Code Javascript:
    var trans = document.getElementsByName('transport'), cartype = document.getElementById('cartype');
    for (var i = 0; i < 3; i++) {
      trans[i].onclick = function() {
        cartype.firstChild.nodeValue = this.checked && this.value === "Car" ? 'What kind of car do you have?' : 'What kind of NOT car do you have?';
      }
    }
    HTML Code:
    <input type="radio" name="transport" value="Car" checked="checked" >Car
    <input type="radio" name="transport" value="Train" >Train
    <input type="radio" name="transport" value="Plane" >Plane
    <p id="cartype">What kind of car do you have?</p>
    I would strongly recommend the use of the LABEL element along with your radio buttons.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Why don't you just have the text more appropriately state the question?

    "What kind of vehicle do you have?"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Code Javascript:
    var trans = document.getElementsByName('transport'), cartype = document.getElementById('cartype');
    for (var i = 0; i < 3; i++) {
      trans[i].onclick = function() {
        cartype.firstChild.nodeValue = this.checked && this.value === "Car" ? 'What kind of car do you have?' : 'What kind of NOT car do you have?';
      }
    }
    Thanks for the help Raffles. But I would like to display a different line for each choice, thus I have 3 lines to display, one for every choice. Can you adapt your code to do that?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here's a modification where the selected value is put into the text field.

    Code Javascript:
    var trans = document.getElementsByName('transport');
    var cartype = document.getElementById('cartype');
    for (var i = 0; i < trans.length; i++) {
        trans[i].onclick = function() {
            if (this.checked) {
                cartype.firstChild.nodeValue = 'What kind of ' . this.value.toLowerCase() . ' do you have?';
            }
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •