ASP.NET POSTBACK does not work in contentplaceholder - html

Question

I am just a beginner in ASP.NET. Now I have 2 pages: master and child page(content page). On the child page, I create a html form which will be used to submit user's input to the server. I use the asp button to submit those but it just validates user's input by running my javascript. The label at the bottom is used to check if it does postback or not. That always shows "False" even the page refreshes after I click on the submit button. I don't know what I am doing wrong here. Also, I want to show all the information of user in a textbox after they are submitted to the server. Hope you can help me out with clear explanation. Thank you very much.
1/Master Page:
2/Child Page (content page):
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Contact <strong>Mon Ami Cafe Restaurant</strong>
</h2>
<hr>
</div>
<div class="col-md-8" id="map-canvas">
<!-- Embedded Google Map using an iframe - to select your location find it on Google maps and paste the link as the iframe src. If you want to use the Google Maps API instead then have at it! -->
<!--iframe width="100%" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=14291+S+Euclid+St,+Garden+Grove,+CA+92843&aq=&sll=33.754949,-117.938489&sspn=0.010437,0.021136&ie=UTF8&hq=&hnear=14291+S+Euclid+St,+Garden+Grove,+California+92843&t=m&z=14&ll=33.754949,-117.938489&output=embed"></!--iframe><br /><small>View Larger Map</small-->
</div>
<div class="col-md-4">
<h5>Phone:</h5>
<p><strong>*******</strong>
</p>
<h5>Email:</h5>
<p><strong>*******</strong>
</p>
<h5>Address:</h5>
<p><strong>*******</strong>
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Contact
</h2>
<hr>
<form name="ContactForm" method="post">
<div class="row" id="ContactForm">
<div class="form-group col-lg-4">
<label>Name</label>
<input type="text" id="NAME" class="form-control">
</div>
<div class="form-group col-lg-4">
<label>Email Address</label>
<input type="text" id="EMAIL" class="form-control">
</div>
<div class="form-group col-lg-4">
<label>Phone Number</label>
<input type="text" id="PHONE" class="form-control">
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<label>Message</label>
<textarea id="MSG" class="form-control" rows="6"></textarea>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<asp:Button ID="btnSubmit" runat="server" OnClientClick="return validateForm();" Text="Submit"/>
</div>
</div>
</form>
</div>
</div>
</div>
<!--The output information will be here -->
<p><asp:Label id="lbl1" runat="server" /></p>
</asp:Content>
Here is my script #Chia... :
<script>
function validateName() {
var x = document.getElementById("NAME").value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
else
return true;
}
function validateEmail() {
var y = document.getElementById("EMAIL").value;
var atpos = y.indexOf("#");
var dotpos = y.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= y.length) {
alert("Not a valid e-mail address");
return false;
}
else
return true;
}
function validatePhone() {
var formatForm = /^[1-9]\d{9}$/;
var z = document.getElementById("PHONE").value;
if (z.length == 0) {
alert("Phone must be filled out");
return false;
}
else if (z.length < 10 || z.length > 10 || !(z.match(formatForm))) {
alert("Not a valid phone number");
return false;
}
else
return true;
}
function validateMess() {
var t = document.getElementById("MSG").value;
if (t == null || t == "") {
alert("Pleave leave your message");
return false;
}
else
return true;
}
function validateForm() {
if (validateName()) {
if (validateEmail()) {
if (validatePhone()) {
if (validateMess()) {
//alert("Submitted Sucessfully");
return true;
}
}
}
}
return false;
}
</script>

Answer 1

You need to add an onclick attribute to your asp button which calls an event in your code behind class. For example
<asp:Button ID="btnSubmit" runat="server" OnClientClick="return validateForm();" OnClick="btnSubmit_Click" Text="Submit"/>
Which would trigger the event
protected void btnSubmit_Click(object sender, System.EventArgs e)
{
// Do stuff here after postback
}
Because you have wired up your onclientclick attribute and ValidateForm is returning a bool value, then this will correctly only allow the onclick event to fire if the validateForm function returns true.