I have a small project that is to practice how to integrate JavaScript code into an
ASP.NET web application to perform client-side processing and validation. Develop
a simple one-page web application that allows the user to fill airline reservation
details.
The webpage must provide the following functionality using JavaScript:
o Provide a dropdown with the options One-way, Round-trip, Multi-city.
If the user selects One-way option, provide the following controls:
o text box to enter FROM city
o text box to enter TO city, verify that the FROM and TO cities are different
o text box to enter DEPARTURE DATE, verify that the departure date is after today
If the user selects Round-trip option, provide the following controls:
o text box to enter FROM city
o text box to enter TO city, verify that the FROM and TO cities are different
o text box to enter DEPARTURE DATE, verify that the departure date is
after today
o text box to enter RETURN DATE, verify that the return date is after
departure date
If the user selects the Multi-city option, provide the following controls:
o text box to enter FROM city of the first flight
o text box to enter TO city of the first flight, verify that the FROM and TO
cities of first flight are different
o text box to enter DEPARTURE DATE of the first flight, verify that the
departure date is after today
o text box to enter FROM city of the second flight, and automatically fill it with
TO city of the first flight
o text box to enter TO city of second flight, verify that FROM and TO cities
of second flight are different
o text box to enter DEPARTURE DATE of the second flight, verify that the departure date of the second flight is after the first flight
o Provide a button called Add Another Flight, clicking on which automatically shows new text boxes to enter FROM, TO and DEPARTURE DATE of the flight
What I have tried:
This is my code so far:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Assignment05.Home" %>
<title>
function onFlightChange() {
var flight = document.getElementById("ddFlights").value;
var oneWay = document.getElementById("oneWay");
var roundTrip = document.getElementById("roundTrip");
var multiCity = document.getElementById("multiCities");
if (flight == 1) {
oneWay.style.display = "block";
roundTrip.style.display = "none";
multiCity.style.display = "none";
}
else if (flight == 2) {
roundTrip.style.display = "block";
oneWay.style.display = "none";
multiCity.style.display = "none";
}
else if (flight == 3) {
multiCity.style.display = "block";
roundTrip.style.display = "none";
oneWay.style.display = "none";
}
}
function addTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}
<script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddFlights" runat="server" onchange="onFlightChange()">
<asp:ListItem Value="0" Text="Please Select Your Flight"></asp:ListItem>
<asp:ListItem Value="1" Text="One-Way"></asp:ListItem>
<asp:ListItem Value="2" Text="Round-Trip"></asp:ListItem>
<asp:ListItem Value="3" Text="Multi-cities"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
<table style="display:none;" id="oneWay">
<tr> <td> <asp:Label ID="Label1" runat="server" Text="From"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label2" runat="server" Text="To"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox2" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label3" runat="server" Text="Depart Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox3" runat="server" Text=""></asp:TextBox>
</td> </tr> </table>
<table id="roundTrip" style="display:none;">
<tr> <td> <asp:Label ID="Label4" runat="server" Text="From"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox4" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label5" runat="server" Text="To"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox5" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label6" runat="server" Text="Depart Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox6" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label7" runat="server" Text="Return Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox7" runat="server" Text=""></asp:TextBox>
</td> </tr> </table>
<table id="multiCities" style="display:none;">
<tr> <td> <asp:Label ID="Label8" runat="server" Text="From"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox8" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label9" runat="server" Text="To"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox9" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label10" runat="server" Text="Depart Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox10" runat="server" Text=""></asp:TextBox>
</td> </tr> <tr> <td> <asp:Label ID="Label11" runat="server" Text="Return Date"></asp:Label>
</td> <td> <asp:TextBox ID="TextBox11" runat="server" Text=""></asp:TextBox>
</td>
</tr> <tr> <td><asp:Button ID="Button2" runat="server" Text="Add Another Flight" onclick="AddTextBox()"/></td> </tr> </table>
</div>
<asp:Button ID="Button1" runat="server" Text="Display" />
</form>
</body>
</html>
I am stuck in creating another flight function and how to verify the date required in text boxes. Please Help Me !!!
Submit an article or tip