SitePoint Sponsor

User Tag List

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

    basic if value, form drop down.

    Code:
    <select id="airport" name="arport" onclick="this.form.from.value = this.form.airport.value;"
    i want the from value to be the airport value only if the airport value is not null

    i would imagine it being something like this but im not sure of the syntax

    Code:
    <select id="airport" name="arport" onclick="if this.form.airport.value !=" " then this.form.from.value = this.form.airport.value;"

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    infact, i have just spotted another problem.. i have been developing the form i was helped build in my last post..

    you can see the form here..

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

    basically when the user choose an airport from the airport drop down menu, that value has to go into the corresponding from or to textarea.

    i know that i can add the following to my airport drop down..

    Code:
    onclick="this.form.from.value = this.form.airport.value;"
    and also

    Code:
    onclick="this.form.to.value = this.form.airport.value;"

    basically i need the airport drop down to know beforehand which textarea to send it's value to.

    this would be something like..

    if radio selection= 'airport to x' then airport value goes to the from textarea

    if radio selection= 'x to airport' then airport value goes to the to textarea


    i hope this is clear.. so this would need to be combined with the post above this..

    if airport selection = not null then send value to from or to textarea (depending on which radio is selected)


    thanks in advance for any assistance.

    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>
     
    <link rel="stylesheet" type="text/css" href="actstyle.css" media="all" />
    <link rel="stylesheet" type="text/css" href="scripts\ezcalendar.css" />
    <script type="text/javascript" src="scripts\ezcalendar.js"></script>
    
    
    </head>
    
    <body>
    
    <div id="wrap" class="clearfix">
    
    
    <h1 class="mid">Booking Form</h1>
    <p class="mainpage">Welcome to the booking page.</p>
    <br /><br />
    <form name="bookingenquiryform" method="post">
    
    <table width="748">
    <tr><td align="left" valign="top" width="374">
    
    <p class="mainpage">Passenger:</p>
     
    <p><select class="droppy" id="passenger" name="passenger" style="margin-left:20px;width:150px;">
    <option value="">...</option>
    <option value="Jimmy">Jimmy</option>
    <option value="Jonny">Jonny</option>
    <option value="Jelly">Jelly</option>
    </select>
    </p>
    
    <br /> 
    
    <table>
    <tr>
    <td>
    <p class="mainpage"><input type="radio" value="Airport to Home" name="direction" id="airportToHome" />
       <label for="airportToHome">Airport to Home</label></p>
    </td>
    <td>
    <p class="mainpage"><input type="radio" value="Home to Airport" name="direction" id="homeToAirport" />
       <label for="homeToAirport">Home to Airport</label></p>
    </td>
    </tr>
    
    <tr>
    <td>
    <p class="mainpage"><input type="radio" value="Airport to Office" name="direction" id="airportToOffice" />
       <label for="airportToOffice">Airport to Office</label></p>
    </td>
    <td>
    <p class="mainpage"><input type="radio" value="Office to Airport" name="direction" id="officeToAirport" />
       <label for="officeToAirport">Office to Airport</label></p>
    </td>
    </tr>
    
    <tr>
    <td>
    <p class="mainpage"><input type="radio" value="Office to Home" name="direction" id="officeToHome" />
       <label for="officeToHome">Office to Home</label></p>
    </td>
    <td>
    <p class="mainpage"><input type="radio" value="Home to Office" name="direction" id="homeToOffice" />
       <label for="homeToOffice">Home to Office</label></p>
    </td>
    </tr>
    </table>
    
    <br />
    <p class="mainpage">From:</p>
    <p><textarea style="margin-left:20px;" class="long" id="from" name="from" cols="45" rows="3"></textarea></p>
    
    <p class="mainpage">To:</p>
    <p><textarea style="margin-left:20px;" class="long" id="to" name="to" cols="45" rows="3"></textarea></p>
    <br />
    </td>
    
    <td align="left" valign="top" width="374">
    
    <p class="mainpage">Pickup date:</p>
    
    <p class="mainpage"><input style="background-color:#EBEBEB;margin-top:10px;width:100px;" name="date" id="date" type="text" size="10" maxlength="10" value="" />
    <a href="javascript: showCalendar('date')"><u>Choose a date</u></a></p>
    <br />
    
    <p class="mainpage">Airport:</p>
    
    <p><select class="droppy" id="airport" name="arport" style="margin-left:20px;width:200px;">
    <option value="">...</option>
    <option value="Heathrow Airport">Heathrow Airport</option>
    <option value="Heathrow Airport - Terminal 1">Heathrow Airport - Terminal 1</option>
    <option value="Heathrow Airport - Terminal 2">Heathrow Airport - Terminal 2</option>
    <option value="Heathrow Airport - Terminal 3">Heathrow Airport - Terminal 3</option>
    <option value="Heathrow Airport - Terminal 4">Heathrow Airport - Terminal 4</option>
    <option value="Heathrow Airport - Terminal 5">Heathrow Airport - Terminal 5</option>
    <option value="Gatwick Airport">Gatwick Airport</option>
    <option value="Gatwick Airport - North Terminal">Gatwick Airport - North Terminal</option>
    <option value="Gatwick Airport - South Terminal">Gatwick Airport - South Terminal</option>
    
    </select></p>
    
    
    <p class="mainpage">Flight no:</p>
    <p><input style="margin-left:20px;width:100px;" type="text" class="txtbox" id="flightno" name="flightno" /></p>
    <p class="mainpage">Flight arrival time:</p>
    <p><select id="enqhour" name="enqhour" class="droppy" style="margin-left:20px;width:100px;">
    		<option value="">Hour</option>
    
    	<option value="01">01 AM</option>
    	<option value="02">02 AM</option>
    	<option value="03">03 AM</option>
    	<option value="04">04 AM</option>
    
    	<option value="05">05 AM</option>
    	<option value="06">06 AM</option>
    
    	<option value="07">07 AM</option>
    	<option value="08">08 AM</option>
    	<option value="09">09 AM</option>
    	<option value="10">10 AM</option>
    
    	<option value="11">11 AM</option>
    	<option value="12">Midday</option>
    
    	<option value="13">01 PM</option>
    	<option value="14">02 PM</option>
    	<option value="15">03 PM</option>
    	<option value="16">04 PM</option>
    
    	<option value="17">05 PM</option>
    	<option value="18">06 PM</option>
    
    	<option value="19">07 PM</option>
    	<option value="20">08 PM</option>
    	<option value="21">09 PM</option>
    	<option value="22">10 PM</option>
    
    	<option value="23">11 PM</option>
    	<option value="24">Midnight</option></select>
    
    	<select class="droppy" id="enqminutes" name="enqminutes" style="width:100px;">
    	<option value="">Minute</option>
    	<option value="00">00</option>
    	<option value="05">05</option>
    
    	<option value="10">10</option>
    	<option value="15">15</option>
    
    	<option value="20">20</option>
    	<option value="25">25</option>
    	<option value="30">30</option>
    <option value="35">35</option>
    
    <option value="40">40</option>
    <option value="45">45</option>
    <option value="50">50</option>
    
    <option value="55">55</option></select></p>
    
    
    </td>
    
    </tr>
    
    </table>
    
    
    </form>
    
    <br /><br /> 
    </div>
    <script>
    
    var address = [
        '',
        '1 Jimmy Street',
    	'1 Jonny Street',
    	'1 Jelly Street'
    ];
    
    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>
    
    </body>
     
    </html>

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Something like this is very difficult to develop in a step-by-step manner, when the desired end result is unknown.

    At every step there are multiple ways to achieve the objective, some of which make future work harder to do. Only by knowing the whole of the final objective can a successful plan be put into place.

    This is typically done by creating the whole form so that it can be successfully submitted without javascript. Only after it works from the server-side, should javascript then be used to improve the user experience.

    Any reliance on javascript for being the only means to process the form is ultimately foolhardy and bad for business.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're right, im trying to be too clever.

    thanks

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i was just testing the page as it is on ie7 and there are problems, it works fine in firefox


    in ie7, when you choose a passenger and hit a radio button.. the first time nothing displays..

    also the home and office values are swapped.. any idea why?

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    everything seems to be swapping randomnly in ie7.. have a look

    http://londonheathrowcars.com/xtestx.htm

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It seems that IE has trouble with the onchage event. Try using the onclick event instead.
    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)
    yes, that has done the trick, thanks again.


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
  •