SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting a textfield based on Dynamically populated drop-down

    I'm using PHP / MySQL / javascript (very new to javascript)


    I'm looking to set the value of a textfield based on the name (NOT value) of a drop-down. The drop-down is created dynamically from a recordset (see code below):

    <select name="mainStory" id="mainStory">
    <?php
    do {
    ?>
    <option value="<?php echo $row_rsMain['ID']?>"<?php if (!(strcmp($row_rsMain['ID'], $_GET['programID']))) {echo "selected=\"selected\"";} ?>><?php echo $row_rsMain['mainStory']?></option>
    <?php
    } while ($row_rsMain = mysql_fetch_assoc($rsMain));
    $rows = mysql_num_rows($rsMain);
    if($rows > 0) {
    mysql_data_seek($rsMain, 0);
    $row_rsMain = mysql_fetch_assoc($rsMain);
    }
    ?>
    </select>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by neoArm View Post
    I'm looking to set the value of a textfield based on the name (NOT value) of a drop-down.
    You would need to loop through each option of the drop-down comparing the text with your desired name.

    The option property called text provides the text name of the option.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what you mean or where to begin. I am brand new to javascript. If anyone can provide sample code I'd appreciate it.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Actually, you don't even need to loop through them, because that's only if you want to set a drop-down based on some text.
    Setting a field field based on a drop-down is relatively simple by comparison.

    Here is a simple form with a drop down and a text field:

    Code html4strict:
    <form id="choosePet">
        <select id="pets">
            <option value="">Please choose...</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
            <option value="hamster">Hamster</option>
        </select>
        <input name="pet">
    </form>

    The script gets a reference to the form, and from there to the drop down.
    It then attaches an onclick event to the drop-down. That attached function sets the text field value to the text of the currently-selected option.

    Code javascript:
     
    var form = document.getElementById('choosePet'),
        pets = form.elements.pets;
     
    pets.onchange = function () {
        var form = this.form,
            pets = this,
            pet = form.elements.pet;
        pet.value = pets.options[pets.selectedIndex].text;
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't get it to work:

    <!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>
    <script language=javascript>
    var form = document.getElementById('choosePet'),
    pets = form.elements.pets;

    pets.onchange = function () {
    var form = this.form,
    pets = this,
    pet = form.elements.pet;
    pet.value = pets.options[pets.selectedIndex].text;
    };
    </script>
    </head>

    <body>
    <form id="choosePet">
    <select id="pets">
    <option value="">Please choose...</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    </select>
    <input name="pet">
    </form>
    </body>
    </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by neoArm View Post
    Can't get it to work:
    When the script runs, nothing below it exists yet. You should put the script at the bottom of the body, just before the </body> tag.

    Doing that is also a technique to speed up your web page, so it's good advice to put scripts at the bottom.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it to work:

    Code:
    <script type="text/javascript">  
    		function OnSelectionChanged (listBox){
    			var selOption = listBox.options[listBox.selectedIndex];
    			var textInput = document.getElementById ("result");
    			textInput.value = selOption.text;
    		}
    </script>


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
  •