SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I can populating a text field from drop down. Help make it populating two text fields

    Here are a simple script, for populating a text field from drop down,
    for example how it works : user clicking on option 1, then the textfield showValue1 will filled/fired with 1a



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    <form name="theform" onsubmit="CheckForm()">
    <select name="myOptions" onchange="document.theform.showValue1.value=this.value">
    <option value="">Please select an option</option>
    <option value="1a">1</option>
    <option value="2a">2</option>
    <option value="3a">3</option>
    <option value="4a">4</option>
    </select>
    <input type="text" name="showValue1"><br>
    </form>
    </body>
    </html>





    now i need two to insert two value, in two text field together, when user choosing an option
    for example : user clicking on option 1, then the textfield showValue1 will filled/fired with 1a,
    and the the second textfield, lets say showValue2 will filled/fired with lets say 1b




    i already tried added below in red, but its still not working

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    <form name="theform" onsubmit="CheckForm()">
    <select name="myOptions" onchange="document.theform.showValue1.value=this.value &amp; document.theform.showValue2.value2=this.value2">
    <option value="">Please select an option</option>
    <option value="1a" &amp; value2="1b">1</option>
    <option value="2a" &amp; value2="2b">2</option>
    <option value="3a" &amp; value2="3b">3</option>
    <option value="4a" &amp; value2="4b">4</option>
    </select>
    <input type="text" name="showValue"><input type="text" name="showValue2"><br>
    </form>
    </body>
    </html>




    please share your knowledge, how is the right code?
    Make the world better

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    HTML values have one value per value attribute. You can't (that I know of) do it this way in HTML.

    Because I think your Javascript needs to come from a wholly different approach, I tagged this thread to be moved over to Javascript because I think that's where you'll get the best answer.

    The amount of logic you want means you shouldn't be trying to stuff it inline with the HTML (it's frowned upon anyway but people still do it for little JS things... what you want, though, is more complicated).
    I'll also suggest using a full/strict doctype for further demos.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,710
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by basketmen View Post
    please share your knowledge, how is the right code?
    The most reliable way to do this is by placing your scripting code at the end of the body, just before the <body> tag.

    By the way, HTML 4.01 Transitional is from 1999 when developers were using HTML 3 and learning how to do things as HTML 4.
    Because HTML 3 techniques that don't work in HTML 4 aren't being used by you, it's best for you to use Html 4.01 Strict instead.

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled</title>
    </head>
    <body>
    ...
    <script type="text/javascript" src="script.js"></script>
    </body>
    </html>

    You can then attach events on to the form by using a unique identifier on the form tag, from which you can easily access the named fields within it.

    Code html4strict:
    <form id="theform">
    <select name="myOptions">
    <option value="">Please select an option</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <input type="text" name="showValue1"><input type="text" name="showValue2"><br>
    </form>

    The CheckForm function doesn't exist, so the call to it either needs to be removed, or the function needs to be added. Not with an uppercase first letter though, for that type of capitalization is commonly reserved for constructor functions.

    And for 1a to be put somewhere and 1b to be put elsewhere, we can have the value of 1 and use scripting to add a or b to each one.

    Code javascript:
    function checkForm() {
     
    }
     
    var form = document.getElementById('theform');
    form.onsubmit = checkForm;
     
    form.elements.myOptions.onchange = function () {
        var input1 = this.form.elements.showValue1;
        var input2 = this.form.elements.showValue2;
     
        input1.value = this.value + 'a';
        input2.value = this.value + 'b';
    };

    If you need completely unrelated values to be put in to the two different places, we can look at other solutions after more information from yourself can be provided.
    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
  •