Нужна помощь в добавлении динамического текстового поля с помощью функции javascipt в ASP.NET
У меня есть небольшой проект, который заключается в том, чтобы практиковать интеграцию кода JavaScript в
ASP.NET веб-приложение для выполнения обработки и проверки данных на стороне клиента. Развивать
простое одностраничное веб-приложение, позволяющее пользователю заполнить бронирование авиабилетов
подробности.
Веб - страница должна обеспечивать следующие функциональные возможности с использованием JavaScript:
o предоставьте выпадающий список с вариантами в одну сторону, туда и обратно, Мультигород.
Если пользователь выбирает односторонний вариант, предоставьте следующие элементы управления:
o текстовое поле для ввода из города
o текстовое поле для ввода в город убедитесь, что поля от и до отличаются друг от друга
o текстовое поле для ввода даты отправления убедитесь, что дата отправления указана после сегодняшнего дня
Если пользователь выбирает опцию "туда и обратно", предоставьте следующие элементы управления:
o текстовое поле для ввода из города
o текстовое поле для ввода в город убедитесь, что поля от и до отличаются друг от друга
o текстовое поле для ввода даты отправления убедитесь, что дата отправления
после сегодняшнего дня
o текстовое поле для ввода даты возврата убедитесь, что дата возврата указана после
дата отъезда
Если пользователь выбирает опцию Мультигород, предоставьте следующие элементы управления:
o текстовое поле для ввода из города первого рейса
o текстовое поле для ввода в город первого рейса, убедитесь, что от и до
города первого полета бывают разные
o текстовое поле для ввода даты вылета первого рейса убедитесь, что
дата отъезда после сегодняшнего дня
o текстовое поле для ввода из города второго рейса и автоматического заполнения его
В город первого рейса
o текстовое поле для ввода в город второго рейса, убедитесь, что из и в города
о втором полете речь идет по-другому
o текстовое поле для ввода даты вылета второго рейса убедитесь, что дата вылета второго рейса указана после первого рейса
o предоставьте кнопку "добавить еще один рейс", при нажатии на которую автоматически появятся новые текстовые поля для ввода даты вылета рейса
Что я уже пробовал:
Это мой код до сих пор:
<%@ 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 !!!
Richard MacCutchan
И в чем же вопрос?
Member 14186004
Я застрял в добавлении еще одного рейса и проверке необходимых текстовых полей. Как я могу добавить дополнительные текстовые поля для ввода даты вылета третьего рейса?