Manipulating form with JavaScript

[adamkpurdy]

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

<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>

[jtrelfa]

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

[akp1976]

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

[jtrelfa]

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

[akp1976]

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

[jtrelfa]

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.