SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Manipulating form with JavaScript

    I need to manipulte form fields using javascript. In the "location 2 type" area if you select either hotel or location it changes the "location 2" area respectively.



    Now the trick is to do the same manipulation with the "departure and arrival dates" changing respecitvely with the field "round trip". Here is the code that I currently have. I am having trouble understanding how it works. I need some help.

    Thank you

    Code:
    <p><label for="fullname">
    Location 2 type<span class="required">*</span>:</label>
    <select name="location2type" onChange="redirect(this.options.selectedIndex)">
    <option value="hotel" {if $data.location2type eq "hotel"}selected{/if}>Hotel</option>
    <option value="location" {if $data.location2type eq "location"}selected{/if}>Location</option>
    </select></p>
    
    <p><label for="fullname">
    Location 2<span class="required">*</span>:</label>
    <select name="location2">
    {if $data.location2type eq "location"}
    <option value="">---------- select a location ----------</option>
    {section name=item loop=$locations}
    <option value="{$locations[item].location_code}" {if $locations[item].location_code eq $data.location2}selected{/if}>{$locations[item].location_desc}</option>
    {/section}
    {else}
    <option value="">---------- select a hotel ----------</option>
    {section name=item loop=$hotels}
    <option value="{$hotels[item].hotel_num}" {if $hotels[item].hotel_num eq $data.location2}selected{/if}>{$hotels[item].hotel_name}</option>
    {/section}
    {/if}
    </select>
    </p>
    
    <script language="JavaScript">
    <!--
    
    var group=new Array(2)
    for (i=0; i<2; i++)
    group[i]=new Array()
    
    group[0][0]=new Option("---------- select a hotel ----------","")
    {section name=item loop=$hotels}
    group[0][{$smarty.section.item.iteration}]=new Option("{$hotels[item].hotel_name}", "{$hotels[item].hotel_num}")
    {/section}
    
    group[1][0]=new Option("---------- select a location ----------","")
    {section name=item loop=$locations}
    group[1][{$smarty.section.item.iteration}]=new Option("{$locations[item].location_desc}", "{$locations[item].location_code}")
    {/section}
    
    var temp=document.Reservations.location2
    
    function redirect(x){ldelim}
    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=0;i<group[x].length;i++){ldelim}
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
    {rdelim}
    temp.options[0].selected=true
    {rdelim}
    
    //-->
    </script>

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm having some trouble myself - Will you post the final output? The smarty tags are getting in the way of debugging what you're trying to do - also is a complete snippet or a URL available?

    Thanks

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the URL: http://www.quicktransportation.com/reserve.php



    As far as final output....I am in question what that means....sorry I am a newbie.

    -Thanks

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code snippet you showed in your first post has a bunch of smarty template tags used to generate javascript code. Rather than showing what actually generates the code, I was more interested in seeing the actual code so that I can help you figure out what's going on.

    Anyway...thanks for the url

    Here's what's going on...
    1. The user chooses an option in the "location2type" dropdown
    2. This triggers your "redirect" script as part of the select box's "onChange" event (the redirect function receives the "selectedIndex" property of the select box to determine which set of options to put into the "location2" select)
    3. The first thing "redirect" does is loop backwards through the "location2" select and removes each option
    4. Second, it loops through the "group" array that contains the associated list (group[0] is hotels, group[1] is airports) and places each option into the empty select box
    5. once the select box has been populated, the first option is selected

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok,

    Well, I want to do the same thing with the lower part of the information.

    1. If "roundtrip" is "yes" then I want the "Local Trip Information" to disapper off the screen, and just the "Departure date and time and the Arrival date and time" to remain on the screen.

    2. If "rountrip" is "no" and "Location 1" is "Pick up" then all I want on the screen is the "Departure date and time".

    That is just a couple of combos that I want to use javascript for. If you could point me in the direction of how I would arrange the code. That would be great. If I could get those to work I could figure out the rest of the combinations that I need the page to look like.

    Thanks

  6. #6
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What have you tried? I'd start by copying the existing code used for the hotels and modify that to have the data for the other items you're wanting to swap around.


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
  •