How to make the app not reload when clicking button in ASP.NET

Question

0.00/5 (No votes)

See more:

Hello, I have a project in asp.net using javascript to display different text boxes. However, when I click the button, the web page is just reloaded it and shows nothing. How can I make the web would not reload once clicking the submit button?

What I have tried:

JavaScript Code:

function onFlightChange() {

	var flight = document.getElementById("ddFlights").value;
	var oneWay = document.getElementById("oneWay");
	var roundTrip = document.getElementById("roundTrip");
	var multiCity = document.getElementById("multiCity");

	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";
		roundTrip.setAttribute("AutoPostBack","false");
	}
	else if (flight == 3) {
		multiCity.style.display = "block";
		roundTrip.style.display = "none";
		oneWay.style.display = "none";
	}
	
}


function anotherFlight() {
	var anotherFlight = document.getElementById("flight");
	anotherFlight.style.display = "block";
}

function validateCity() {
	//taking from city
	var fromCity = document.getElementById("txtFromCity").value;
	//taking to city
	var toCity = document.getElementById("txtToCity").value;
	//taking departure date
	
	//checking both the cities if empty
	if (fromCity == "" || toCity == "") {
		//if any one from or to city is empty
		alert("Enter From and To city.");
	}
	//checking for both the cities
	else if (fromCity == toCity) {
		//display message
		alert("From City and To city need to be different");
	}
	
}

function validateDate() {
	var departureDate = document.getElementById("txtDepartDate").value;
	//taking return date

	var returnDate = document.getElementById("txtReturnDate").value;
	var nowDate = new Date();
	var today = '0' + nowDate.getDate() + '-0' + (nowDate.getMonth() + 1) + '-' + nowDate.getFullYear();

	 if (departureDate === today) {
		//if departureDate is equal to today
		 alert("Departure date can not be today.");
	} else if (departureDate == returnDate) {
		//return date should be sfter departure date
		alert("return date and departure date can not be same");
	}
	else if (departureDate > returnDate) {
		//return date should be sfter departure date
		alert("return date should be after departure date");
	}
}
function validate() {
	validateCity();
	validateDate();
}

ASP.NET:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Assignment05.Home" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</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>
			<asp:Table ID="roundTrip" runat="server" style="display:none;" >
				<asp:TableRow>
					<asp:TableCell>From City</asp:TableCell>
					<asp:TableCell>
						<%-- textbox for from city --%>
						<asp:TextBox runat="server" ID="txtFromCity"></asp:TextBox>
					</asp:TableCell>
					</asp:TableRow>
					<asp:TableRow>
					<asp:TableCell>To City</asp:TableCell>
					<asp:TableCell>
						<%-- textbox for to city --%>
						<asp:TextBox runat="server" ID="txtToCity"></asp:TextBox>
					</asp:TableCell>
					</asp:TableRow>
					<asp:TableRow>
						<asp:TableCell>DEPARTURE DATE</asp:TableCell>
					<asp:TableCell>
					<%-- calender for DEPARTURE DATE --%>
						<asp:TextBox runat="server" ID="txtDepartDate"></asp:TextBox>
					</asp:TableCell>
					</asp:TableRow>
					<asp:TableRow>
						<asp:TableCell>RETURN DATE</asp:TableCell>
					<asp:TableCell>
					<%-- calender for RETURN DATE --%>
						<asp:TextBox runat="server" ID="txtReturnDate"></asp:TextBox>
					</asp:TableCell>
					</asp:TableRow>
					<asp:TableRow>
					<asp:TableCell>
						<asp:Button Text="Submit" ID="btnSubmit" runat="server" OnClientClick="validate()" />
					</asp:TableCell>
				</asp:TableRow>
				</asp:Table>

			<table id="multiCity" 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>
						<input type="button" value="Add Flight" onclick="anotherFlight()" />
 					</td>
				</tr>
			</table>

			<div id="flight" style="display:none;">
				<table>
					<tr>
					<td>
						<asp:Label ID="Label12" runat="server" Text="From"></asp:Label>
					</td>
					<td>
						<asp:TextBox ID="TextBox12" runat="server" Text=""></asp:TextBox>
					</td>
				</tr>
				<tr>
					<td>
						<asp:Label ID="Label13" runat="server" Text="To"></asp:Label>
						
					</td>
					<td>
						<asp:TextBox ID="txtFlightToCity" runat="server" Text=""></asp:TextBox>
						
					</td>
				</tr>
				<tr>
					<td>
						<asp:Label ID="Label14" runat="server" Text="Depart Date"></asp:Label>
					</td>
					<td>
						<asp:TextBox ID="TextBox14" runat="server" Text=""></asp:TextBox>
					</td>
				</tr>
				</table>
			</div>

        </div>
    </form>
	<script src="Script.js"></script>
</body>
</html>

Posted 2-May-19 22:41pm

Member 14186004

Updated 2-May-19 22:50pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

F-ES Sitecore · Answer 1 · 2019-05-02T22:51:00

Make the function return false

function onFlightChange() {

	// your code here

    return false;
	
}

and update your attribute to return that too;

<asp:DropDownList ID="ddFlights" runat="server" onchange="return onFlightChange();" >

It shouldn't normally do a post-back unless you have autopostback enabled, so there might be issues elsewhere too.

Christian Graus · Answer 2 · 2019-05-02T22:43:00

Solution 1

why are people learning ASP.NET? There's no jobs...

return false in the function you call to stop your event bubbling up and causing a refresh

Posted 2-May-19 22:43pm

Christian Graus