SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    very basic form prefill command needed

    hello, i am trying to prefill a textarea when a radio button is clicked. the value of the textarea will depend upon the value of a drop down.


    here is my form.
    http://www.londonheathrowcars.com/testform2.htm

    what i am asking for is one very basic javascript command that does the following:


    Code:
    when direction.radio is clicked do
    
    if office to home is clicked and passenger="jimmy" then from.value="office" and to.value="jimmy home"
    
    if office to home is clicked and passenger="jonny" then from.value="office" and to.value="jonny home"
    
    end.

    that's it. once i see the syntax for doing this i can play around with it no problem.

    i hope someone can help

    thanks..

    here is the page code


    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=iso-8859-1" />
    
    <title>Form</title>
    
    </head>
    
    <h1>Booking Form</h1>
    
    <p>Welcome to the booking page.</p>
    
    <form name="bookingenquiryform" method="post">
    <p>Passenger:</p>
    
    <p><select id="passenger" name="passenger">
    <option value="">...</option>
    <option value="Jimmy">Jimmy</option>
    <option value="Jonny">Jonny</option>
    </select>
    </p>
    
    <p><input type="radio" value="Office to Home" name="direction" />Office to Home</p>
    
    <p>From:</p>
    
    <p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
    
    <p>To:</p>
    
    <p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
    
    <p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
    
    </form>
    
    </body>
    
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Normally you youldn't have jsut one radio button, and insead a checkbox, but I presume that you're going to add more radio buttons so I'll add another one in my example, but leave it unattached to any events at this stage.

    We will use id attributes to target the option buttons, which are also useful in that you can use a label element around the text and target that text to the radio button.

    Code html4strict:
    <p><input type="radio" value="Office to Home" name="direction" id="officeToHome" />
       <label for="officeToHome">Office to Home</label></p>
    <p><input type="radio" value="Home to Office" name="direction" id="homeToOffice" />
       <label for="homeToOffice">Home to Office</label></p>

    So now, the radio buttons will select themself when people click on the text as well.

    The updateBooking function would look something like this:

    Code javascript:
    function updateBooking() {
        var passenger = document.getElementById('passenger');
        var direction = this.value.split(' ');
    	if (passenger.selectedIndex > 0) {
    	    passenger = passenger.options[passenger.selectedIndex].value;
    	    document.getElementById('from').value = direction[0];
    	    document.getElementById('to').value =  passenger + ' ' + direction[2];
    	}
    }

    And it's attached to the radio buttons with the following

    Code javascript:
    document.getElementById('officeToHome').onchange = updateBooking;
    document.getElementById('homeToOffice').onchange = updateBooking;

    here's the test code in full

    Code html4strict:
    <!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=iso-8859-1" />
     
    <title>Form</title>
     
    </head>
     
    <h1>Booking Form</h1>
     
    <p>Welcome to the booking page.</p>
     
    <form name="bookingenquiryform" method="post">
    <p>Passenger:</p>
     
    <p><select id="passenger" name="passenger">
    <option value="">...</option>
    <option value="Jimmy">Jimmy</option>
    <option value="Jonny">Jonny</option>
    </select>
    </p>
     
    <p><input type="radio" value="Office to Home" name="direction" id="officeToHome" />
       <label for="officeToHome">Office to Home</label></p>
    <p><input type="radio" value="Home to Office" name="direction" id="homeToOffice" />
       <label for="homeToOffice">Home to Office</label></p>
     
    <p>From:</p>
    <p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
    <p>To:</p>
    <p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
     
    <p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
    </form>
     
    <script>
    function updateBooking() {
        var passenger = document.getElementById('passenger');
        var direction = this.value.split(' ');
    	if (passenger.selectedIndex > 0) {
    	    passenger = passenger.options[passenger.selectedIndex].value;
    	    document.getElementById('from').value = direction[0];
    	    document.getElementById('to').value =  passenger + ' ' + direction[2];
    	}
    }
    document.getElementById('officeToHome').onchange = updateBooking;
    document.getElementById('homeToOffice').onchange = updateBooking;
    </script>
    </body>
     
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First you need to give the direction input an ID of "direction" so that this script will work...

    (put script directly above </body>)

    Code JavaScript:
    <script type="text/javascript">
    var DirectionRadio = document.getElementById("direction"); // Radio Button Element
    var PassengerOptions = document.getElementById("passenger").getElementsByTagName("OPTION"); // Option elements within select[id=passenger]
    var FromTextArea = document.getElementById("from"); // 'from' textarea
    var ToTextArea = document.getElementById("to"); // 'to' textarea
    DirectionRadio.onclick = function() { // OnClick... This will happen
    var PassengerIndex = document.getElementById("passenger").selectedIndex; // What is the selected option?
    for (var i=0;i<PassengerOptions.length;i++) { // LOOP through options and assign values
    var Passenger = PassengerOptions[PassengerIndex].value;
    }
     
    var ToText = Passenger+" home"; // Text to go in 'to' textarea
    var FromText = "Office"; // Text to go in 'from' textarea
     
    if(PassengerIndex!=0) { // i.e. if the select option is NOT the first one (...)
    FromTextArea.value = FromText; // Puts the text in the 'from' textarea
    ToTextArea.value = ToText; // Puts the text in the 'to' textarea
    }
    }
    </script>

    Edit:


    LOL... Paul beat me...
    His is better!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Thanks Jimmy, pleased to hear it
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is really great, thanks so much for the quick response

    i realise that strolling in and out and asking for code is not the right way to do it so i simplified my request as much as possible

    i can certainly fiddle with what you gave me and i will let you know how im getting along

    thanks again

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, rather then compiling the value based on the passenger name, what i wanted to do was actually place a pre-defind string in the text box

    here is my situation.

    there is one office address, lets call it.

    1 Office Street, London


    then each person in the drop down will have their own home address, lets say

    Jimmy's address is

    1 High Street, Jimmytown


    and Jonny's address is

    2 High Street, Jonnytown



    i think in this case it would be better to create an array to hold the addresses and then just select from that array based on the passenger value..

    does this make sense?

    if it does please advise.

    thanks

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It does. Go ahead and give it a try.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahhhh.. ok give me half an hour or so i should have it..

  9. #9
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no hang on.. im confused.. your example definately uses the pax and direction to construct a value and jimmys uses a var that can be pre defined (var ToText =)

    but i cant mix the two.. im confused

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, i cant quite do it, what i was thinking of doing is something like..

    Code:
    <script type="text/javascript">
    var DirectionRadio = document.getElementById("direction"); // Radio Button Element
    var PassengerOptions = document.getElementById("passenger").getElementsByTagName("OPTION"); // Option elements within select[id=passenger]
    var FromTextArea = document.getElementById("from"); // 'from' textarea
    var ToTextArea = document.getElementById("to"); // 'to' textarea
    DirectionRadio.onclick = function() { // OnClick... This will happen
    var PassengerIndex = document.getElementById("passenger").selectedIndex; // What is the selected option?
    for (var i=0;i<PassengerOptions.length;i++) { // LOOP through options and assign values
    var Passenger = PassengerOptions[PassengerIndex].value;
    }
     
    var JimmyAdd = "1 High Street, Jimmytown";
     
    if(PassengerIndex!="Jimmy") { 
    FromTextArea.value = "Office"; 
    ToTextArea.value = JimmyAdd ; 
    }
    }
    </script>
    but the only prob is adding to this which radio was clicked..

  11. #11
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or this, which isnt working

    Code:
    <script type="text/javascript">
    var DirectionRadio = document.getElementById("direction"); // Radio Button Element
    var PassengerOptions = document.getElementById("passenger").getElementsByTagName("OPTION"); // Option elements within select[id=passenger]
    var FromTextArea = document.getElementById("from"); // 'from' textarea
    var ToTextArea = document.getElementById("to"); // 'to' textarea
    DirectionRadio.onclick = function() { // OnClick... This will happen
    var PassengerIndex = document.getElementById("passenger").selectedIndex; // What is the selected option?
    for (var i=0;i<PassengerOptions.length;i++) { // LOOP through options and assign values
    var Passenger = PassengerOptions[PassengerIndex].value;
    }
     
    var JimmyAdd = "1 High Street, Jimmytown";
    var JonnyAdd = "2 High Street, Jonnytown"; 
    
    if(PassengerIndex="Jimmy") { 
    FromTextArea.value = "Office"; 
    ToTextArea.value = JimmyAdd ; 
    }
    
    if(PassengerIndex="Jonny") { 
    FromTextArea.value = "Office"; 
    ToTextArea.value = JonnyAdd ; 
    }
    
    }
    </script>

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does this not working have something to do with passenger currently being a number??

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Try this, following on from my code.

    We'll store the addresses in an array, keeping the first entry empty so that they nicely match up with the passenger list.

    Then we can get the passengerIndex and make good use of that.

    Code javascript:
    // address for each of the passengers
    var address = [
        '', // no address for the top option "..."
        '1 High Street, Jimmytown',
        '2 High Street, Jonnytown'
    ];
    var passengerIndex = passenger.selectedIndex;
    if (passengerIndex > 0) {
        document.getElementById('from').value = direction[0];
        document.getElementById('to').value =  address[passengerIndex];
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, im trying to do what you said.. am i on the right tracks because this is currently not working..


    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=iso-8859-1" />
     
    <title>Form</title>
     
    </head>
     
    <h1>Booking Form</h1>
     
    <p>Welcome to the booking page.</p>
     
    <form name="bookingenquiryform" method="post">
    <p>Passenger:</p>
     
    <p><select id="passenger" name="passenger">
    <option value="">...</option>
    <option value="Jimmy">Jimmy</option>
    <option value="Jonny">Jonny</option>
    </select>
    </p>
     
    <p><input type="radio" value="Office to Home" name="direction" id="direction" />
       Office to Home</label></p>
    <p><input type="radio" value="Home to Office" name="direction" id="direction" />
      Home to Office</label></p>
     
    <p>From:</p>
    <p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
    <p>To:</p>
    <p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
     
    <p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
    </form>
     
    <script>
    function updateBooking() {
    
    var address = [
        '', // no address for the top option "..."
        '1 High Street, Jimmytown',
        '2 High Street, Jonnytown'
    ];
        
        var passengerIndex = passenger.selectedIndex;
    if (passengerIndex > 0) {
        document.getElementById('from').value = direction[0];
        document.getElementById('to').value =  address[passengerIndex];
    }
    
    }
    
    </script>
    </body>
     
    </html>

  15. #15
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello again, i am gettin somewhere..

    it is very close..

    u can see the page here..

    http://www.londonheathrowcars.com/page.htm


    Office will always be "Office"
    Airport will always be "Airport"

    Home will always be an address from the array.

    what is working

    the correct address for the chosen passenger is displaying in the textarea


    what isn't working

    1. the first part of the radio button value is always displaying in the 'from' textarea

    2. the address from the array is always displaying in the 'to' textarea


    what needs to be fixed

    if Home to x is chosen, the array address needs to be in the 'from' textarea

    if x to Home is chosen, the array address needs to be in the 'to' textarea


    i appreciate your help and your patience reading my posts while i try to fix it.. any help now would go a long way.

    thanks

    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=iso-8859-1" />
     
    <title>Form</title>
     
    </head>
     
    <h1>Booking Form</h1>
     
    <p>Welcome to the booking page.</p>
     
    <form name="bookingenquiryform" method="post">
    <p>Passenger:</p>
     
    <p><select id="passenger" name="passenger">
    <option value="">...</option>
    <option value="Jimmy">Jimmy</option>
    <option value="Jonny">Jonny</option>
    </select>
    </p>
    
     
    
    <table>
    <tr>
    <td>
    <p><input type="radio" value="Airport to Home" name="direction" id="airportToHome" />
       <label for="airportToHome">Airport to Home</label></p>
    </td>
    <td>
    <p><input type="radio" value="Home to Airport" name="direction" id="homeToAirport" />
       <label for="homeToAirport">Home to Airport</label></p>
    </td>
    </tr>
    
    <tr>
    <td>
    <p><input type="radio" value="Airport to Office" name="direction" id="airportToOffice" />
       <label for="airportToOffice">Airport to Office</label></p>
    </td>
    <td>
    <p><input type="radio" value="Office to Airport" name="direction" id="officeToAirport" />
       <label for="officeToAirport">Office to Airport</label></p>
    </td>
    </tr>
    
    <tr>
    <td>
    <p><input type="radio" value="Office to Home" name="direction" id="officeToHome" />
       <label for="officeToHome">Office to Home</label></p>
    </td>
    <td>
    <p><input type="radio" value="Home to Office" name="direction" id="homeToOffice" />
       <label for="homeToOffice">Home to Office</label></p>
    </td>
    </tr>
    </table>
    
    <p>From:</p>
    <p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
    <p>To:</p>
    <p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
     
    <p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
    </form>
     
    <script>
    
    var address = [
        '',
        '1 High Street, Jimmytown',
        '2 High Street, Jonnytown'
    ];
    
    function updateBooking() {
        var passenger = document.getElementById('passenger');
        var direction = this.value.split(' ');
    var passengerIndex = passenger.selectedIndex;
    	if (passengerIndex > 0) {
        document.getElementById('from').value = direction[0];
        document.getElementById('to').value =  address[passengerIndex];
    }
    }
    
    document.getElementById('officeToHome').onchange = updateBooking;
    document.getElementById('homeToOffice').onchange = updateBooking;
    
    document.getElementById('officeToAirport').onchange = updateBooking;
    document.getElementById('airportToOffice').onchange = updateBooking;
    
    document.getElementById('airportToHome').onchange = updateBooking;
    document.getElementById('homeToAirport').onchange = updateBooking;
    </script>
    </body>
     
    </html>

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Some of those requirements are confusing.

    Can you please show what you want the from and to to look like for each of the six options.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    absolutely!

    something like this..

    Code:
    if passenger="Jimmy" and radio="airport to home" then
    from="airport" and to="1 High Street, Jimmytown"
    
    if passenger="Jimmy" and radio="home to airport" then
    from="1 High Street, Jimmytown" and to="airport"
    
    if passenger="Jimmy" and radio="airport to office" then
    from="airport" and to="office"
    
    if passenger="Jimmy" and radio="office to airport" then
    from="office" and to="airport"
    
    if passenger="Jimmy" and radio="office to home" then
    from="office" and to="1 High Street, Jimmytown"
    
    if passenger="Jimmy" and radio="home to office" then
    from="1 High Street, Jimmytown" and to="office"

    Code:
    if passenger="Jonny" and radio="airport to home" then
    from="airport" and to="2 High Street, Jonnytown"
    
    if passenger="Jonny" and radio="home to airport" then
    from="2 High Street, Jonnytown" and to="airport"
    
    if passenger="Jonny" and radio="airport to office" then
    from="airport" and to="office"
    
    if passenger="Jonny" and radio="office to airport" then
    from="office" and to="airport"
    
    if passenger="Jonny" and radio="office to home" then
    from="office" and to="2 High Street, Jonnytown"
    
    if passenger="Jonny" and radio="home to office" then
    from="2 High Street, Jonnytown" and to="office"

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    So Airport and Office remain fixed, and Home gets replaced with the street address.

    Code javascript:
    if (direction[0] === 'Home') {
        direction[0] = address[passengerIndex];
    }
    if (direction[2] === 'Home') {
        direction[2] = address[passengerIndex];
    }
    document.getElementById('from').value = direction[0];
    document.getElementById('to').value =  direction[2];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES, it is working.. here is the proof.. thank you..

    refresh the page..

    www.londonheathrowcars.com/page.htm

    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=iso-8859-1" />
     
    <title>Form</title>
     
    </head>
     
    <h1>Booking Form</h1>
     
    <p>Welcome to the booking page.</p>
     
    <form name="bookingenquiryform" method="post">
    <p>Passenger:</p>
     
    <p><select id="passenger" name="passenger">
    <option value="">...</option>
    <option value="Jimmy">Jimmy</option>
    <option value="Jonny">Jonny</option>
    </select>
    </p>
    
     
    
    <table>
    <tr>
    <td>
    <p><input type="radio" value="Airport to Home" name="direction" id="airportToHome" />
       <label for="airportToHome">Airport to Home</label></p>
    </td>
    <td>
    <p><input type="radio" value="Home to Airport" name="direction" id="homeToAirport" />
       <label for="homeToAirport">Home to Airport</label></p>
    </td>
    </tr>
    
    <tr>
    <td>
    <p><input type="radio" value="Airport to Office" name="direction" id="airportToOffice" />
       <label for="airportToOffice">Airport to Office</label></p>
    </td>
    <td>
    <p><input type="radio" value="Office to Airport" name="direction" id="officeToAirport" />
       <label for="officeToAirport">Office to Airport</label></p>
    </td>
    </tr>
    
    <tr>
    <td>
    <p><input type="radio" value="Office to Home" name="direction" id="officeToHome" />
       <label for="officeToHome">Office to Home</label></p>
    </td>
    <td>
    <p><input type="radio" value="Home to Office" name="direction" id="homeToOffice" />
       <label for="homeToOffice">Home to Office</label></p>
    </td>
    </tr>
    </table>
    
    <p>From:</p>
    <p><textarea id="from" name="from" cols="45" rows="3"></textarea></p>
    <p>To:</p>
    <p><textarea id="to" name="to" cols="45" rows="3"></textarea></p>
     
    <p><input value="Send Booking >>" id="confirm" name="confirm" type="submit" /></p>
    </form>
     
    <script>
    
    var address = [
        '',
        '1 High Street, Jimmytown',
        '2 High Street, Jonnytown'
    ];
    
    function updateBooking() {
        var passenger = document.getElementById('passenger');
        var direction = this.value.split(' ');
    	var passengerIndex = passenger.selectedIndex;
    	if (direction[0] === 'Home') {
        direction[0] = address[passengerIndex];
    }
    if (direction[2] === 'Home') {
        direction[2] = address[passengerIndex];
    }
    document.getElementById('from').value = direction[0];
    document.getElementById('to').value =  direction[2];
    
    }
    
    document.getElementById('officeToHome').onchange = updateBooking;
    document.getElementById('homeToOffice').onchange = updateBooking;
    
    document.getElementById('officeToAirport').onchange = updateBooking;
    document.getElementById('airportToOffice').onchange = updateBooking;
    
    document.getElementById('airportToHome').onchange = updateBooking;
    document.getElementById('homeToAirport').onchange = updateBooking;
    </script>
    </body>
     
    </html>

  20. #20
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi.. just tinkering with things...

    the 'Office' will be unchanging but it will be more than one word..

    for example..

    if the radio button was the following:

    Code:
    <p><input type="radio" value="Airport to Office Street, London, N1 7UI" name="direction" id="airportToOffice" />
       <label for="airportToOffice">Airport to Office</label></p>

    currently the to textarea will simply display 'Office' instead of that full address..

    is there a way that instead of using the first word (Office).. i can grab everything from the value that is that side of the 'to'

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Yes, you can split it on " to " which will result in the following array
    ['Airport', 'Airport to Office Street, London, N1 7UI']

    So you can then use [0] for the From section and [1] for the To section.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, i seeee.. it works..

    Code:
    <script>
    
    var address = [
        '',
        '22 Manor Road, Henley On Thames RG9 1LU',
    	'Chimney Cottage, 74 Summers Road, Godalming GU7 3BE',
    	'9 Danvers Drive, Church Crookham, Fleet, Hants, GU52 0YN',
    	'64 Houblon Road, Richmond, TW10 6DE',
    	'39 Sydney Steet, London, SW3 6PU',
    	'29 Melliss Avenue, Richmond, TW9 4BS',
    	'4 Upper Teddington Road, Hampton, KT1 4DY',
    	'16 Warrick Deeping, Ottershaw, Chertsey, KT16 0NE'
    
    ];
    
    function updateBooking() {
        var passenger = document.getElementById('passenger');
        var direction = this.value.split(" to ");
    	var passengerIndex = passenger.selectedIndex;
    	if (direction[0] === 'Home') {
        direction[0] = address[passengerIndex];
    }
    if (direction[1] === 'Home') {
        direction[1] = address[passengerIndex];
    }
    document.getElementById('from').value = direction[0];
    document.getElementById('to').value =  direction[1];
    
    }
    
    document.getElementById('officeToHome').onchange = updateBooking;
    document.getElementById('homeToOffice').onchange = updateBooking;
    
    document.getElementById('officeToAirport').onchange = updateBooking;
    document.getElementById('airportToOffice').onchange = updateBooking;
    
    document.getElementById('airportToHome').onchange = updateBooking;
    document.getElementById('homeToAirport').onchange = updateBooking;
    </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
  •