Here is the HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DaVincisApp1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<%--<script type="text/javascript" src="Scripts/motion.js"></script>--%>
<script type="text/javascript">
$(document).ready(function(){ /* make sure the contact form is hidden when the page loads: */ $('div#contact-form').hide(); $('a#contact-button').toggle(function(){ /* slides the contact form down and shows it */ $('div#contact-form').slideDown(); }, function () { /* hides it again */ $('div#contact-form').slideUp(); } }
);</script>
</head>
<body>
<div id="nav">
<div id="navigation-primary">
<ul>
<li id="contact-button"><a href="javascript:;" onmousedown="toggleSlide('quickcontact');">
<span>Contact</span></a> </li>
</ul>
<h3>
Contact US</h3>
<div id="contact-form" style="display: none; overflow: hidden; height: 300px;">
<form id='freeform' method="post" action="http://WebDev.com/">
<div class='hiddenFields'>
<input type="hidden" name="ACT" value="20" />
<input type="hidden" name="URI" value="index" />
<input type="hidden" name="XID" value="1c46d517779f90c9f5a13bac8338968a3c2b9d16" />
<input type="hidden" name="status" value="open" />
<input type="hidden" name="return" value="consultation/thank_you" />
<input type="hidden" name="redirect_on_duplicate" value="" />
<input type="hidden" name="RET" value="http://professional-painters.com/" />
<input type="hidden" name="form_name" value="Quick" />
<input type="hidden" name="id" value="freeform" />
<input type="hidden" name="params_id" value="136390" />
<input type="hidden" name="site_id" value="1" />
</div>
<fieldset style="padding: 7px;">
<table id="quickcontact-in">
<tr>
<td>
<input tabindex="1" class="field" type="text" name="name" value="Name" onfocus="if (this.value == 'Name') this.value = '';"
onblur="if (this.value == '') this.value = 'Name';" />
</td>
</tr>
<tr>
<td>
<input tabindex="2" class="field" type="text" name="email" value="Email address"
onfocus="if (this.value == 'Email address') this.value = '';" onblur="if (this.value == '') this.value = 'Email address';" />
</td>
</tr>
<tr>
<td>
<input tabindex="3" class="field" type="text" name="phone1" value="Phone (optional)"
onfocus="if (this.value == 'Phone (optional)') this.value = '';" onblur="if (this.value == '') this.value = 'Phone';" />
</td>
</tr>
<tr>
<td>
<textarea tabindex="4" class="txtField" cols="4" rows="4" name="comments">Questions or Comments</textarea>
</td>
</tr>
<tr>
<td>
<p>
Please enter these letters:
<br />
<img src="http://professional-painters.com/images/captchas/1297129344.1793.jpg" width="140"
height="30" style="border: 0;" alt=" " /><br />
<input tabindex="5" class="field" type="text" name="captcha" size="20" maxlength="20" /></p>
</td>
</tr>
<tr>
<td>
<div id="submit">
<input tabindex="6" type="submit" name="submit" value="Send Request" />
</div>
<p class="tiny" align="right">
Close</p>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
#navigation-primary {
/*background: url("/img/nav_back.gif") repeat-x scroll 0 0 #61533F;*/
background-color: Red;
left: 0;
position: absolute;
top: 46px;
z-index: 1;
}
#nav {
height: 34px;
width: 878px;
}
#nav-contact a {
/*background: url("/img/nav_contact.gif") no-repeat scroll 0 0 transparent;*/
background-color: Green;
width: 109px;
}
#quickcontact {
background: none repeat scroll 0 0 #666449;
border-left: 2px solid #3D352B;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0;
text-align: left;
top: 75px;
width: 245px;
z-index: 1000;
}
#quickcontact-in a {
color: #FFFFFF;
}
#quickcontact fieldset {
border: medium none;
}
#quickcontact-in .field {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
padding: 2px;
width: 190px;
}
#quickcontact-in .txtField {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
display: block;
float: left;
font: 1em "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
height: 90px;
margin: 5px 0 7px;
outline: medium none;
padding: 2px;
width: 190px;
}
Ok, I this it would be smart of you to use jquery and do it yourself. It's not that hard at all and the JS code is very short and easy.
First, you need to style the contact form and the menu so it looks the same way as it does when the contact form is expanded. I'm guessing you can actually use the code you already have. But I understand your biggest problem is with the javascript code.
Make sure that the anchor tag has the id: id="contact_button" and that the form is wrapped within a div with the id="contact-form"
So the HTML needs to be something like:
<ul>
<li>Menu 1</li>
<li>item 2</li>
<li>Menuitem 3</li>
<li><a id="contact-button" href="/contact-form">Contact</a></li>
</ul>
<div id="contact-form">
<form action="#" method="post">
...
</form>
</div>
Then, to make the contact form show, you need to put jquery on your html page somewhere and you need to place the following code within another .js file or within tags:
$(document).ready(function(){
/* make sure the contact form is hidden when the page loads: */
$('div#contact-form').hide();
$('a#contact-button').toggle(function(){
/* slides the contact form down and shows it */
$('div#contact-form').slideDown();
}, function () {
/* hides it again */
$('div#contact-form').slideUp();
}
}
That's it. As for the code to actually send the email using .net you can maybe follow this tutorial:
http://www.aspnettutorials.com/tutorials/email/email-aspnet2-vb.aspx
I've not tried this, so I'm not certain about it, but it's probably right:
sfHover is defined thusly:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
Take a close look at this line:
document.getElementById("nav")
It's looking for an element with an id of nav - in your "prototype HTML", you do not have an element with that id.
You don't appear to have any need for sfHover in your "prototype HTML", so you should just get rid of the entire function. If you do need it, you need to change nav into an id you actually have in your HTML (or change an id in your HTML to nav).
Related
I'm new to this, so please bear with me. I'm trying to setup a simple form validation that connects to my email client (Drip). It's not sophisticated, like I said, I'm learning and want to do so from the ground up (which is why all the CSS and whatnot isn't in a separate file). This whole thing is a learning exercise.
The connection to my email client works fine, but the problem is the form submits even if all the fields are empty. I don't know if it's ignoring the script, or it's running and just not working, or...
I don't know. I'm missing something, but like I said, I'm learning, so I can't see it for love or money!
Is anyone able to point out what I've done wrong here? :-)
<script>
function validateForm() {
var x = document.forms["myForm"]["fields[first_name]"].value;
var y = document.forms["myForm"]["fields[email]"].value;
var z = document.forms["myForm"]["fields[phone]"].value;
var checkBox1 = document.getElementById("tcpp");
var checkBox2 = document.getElementById("contactConsent");
if (x == "") {
alert("Name must be filled out");
return false;
}
if (y == "") {
alert("Email must be filled out");
return false;
}
if (z == "") {
alert("Phone must be filled out");
return false;
}
if (checkBox1.checked == false) {
alert("Privacy Policy box must be ticked");
return false;
}
if (checkBox2.checked == false) {
alert("Consent box must be ticked");
return false;
}
}
</script>
<form name="myForm" action="https://www.getdrip.com/forms/999130800/submissions" method="post" data-drip-embedded-form="999130800" onsubmit="return validateForm()">
<div data-drip-attribute="description"></div>
<input type="hidden" name="tags[]" value="Tag 1" />
<input type="hidden" name="tags[]" value="Tag 2" />
<input type="hidden" name="tags[]" value="Tag 3" />
<div>
<div>
<span style="font-size: 20px;"><label for="drip-full-name">Full Name</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-full-name" name="fields[full_name]" value="" />
</div>
<div>
<span style="font-size: 20px;"><label for="drip-email">Email Address</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="email" id="drip-email" name="fields[email]" value="">
</div>
<div>
<span style="font-size: 20px;"><label for="drip-phone">Phone Number</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-phone" name="fields[phone]" value="">
</div>
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[read_tc_and_pp]" value="no" />
<input type="checkbox" name="fields[read_tc_and_pp]" id="tcpp" value="yes" /> Privacy policy link goes here
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[consent_to_contact]" value="no" />
<input type="checkbox" name="fields[consent_to_contact]" id="contactConsent" value="yes" /> Consent blurb goes here
</div>
<div style="padding-top: 5px;">
<input style="width: 100%; padding: 10px; font-size: 36px; color: #ffffff; background-color: #22B44F; border: 2px solid; border-radius: 5px; font-weight: bold;" type="submit" value="Get Instant Access" data-drip-attribute="sign-up-button" />
</div>
</form>
You can keep the name attributes as they are. The problem was within your document.forms[...] expression. It did not find the expected input elements. As these are given id attributes too it seemed an easy fix to use them as a way of identifying the elements by using document.getElementById(...):
function validateForm() {
var x = document.getElementById("drip-full-name").value;
var y = document.getElementById("drip-email").value;
var z = document.getElementById("drip-phone").value;
var checkBox1 = document.getElementById("tcpp");
var checkBox2 = document.getElementById("contactConsent");
if (x == "") {
alert("Name must be filled out");
return false;
}
if (y == "") {
alert("Email must be filled out");
return false;
}
if (z == "") {
alert("Phone must be filled out");
return false;
}
if (checkBox1.checked == false) {
alert("Privacy Policy box must be ticked");
return false;
}
if (checkBox2.checked == false) {
alert("Consent box must be ticked");
return false;
}
}
<form name="myForm" action="https://www.getdrip.com/forms/999130800/submissions" method="post" data-drip-embedded-form="999130800" onsubmit="return validateForm()">
<div data-drip-attribute="description"></div>
<input type="hidden" name="tags[]" value="Tag 1" />
<input type="hidden" name="tags[]" value="Tag 2" />
<input type="hidden" name="tags[]" value="Tag 3" />
<div>
<div>
<span style="font-size: 20px;"><label for="drip-full-name">Full Name</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-full-name" name="fields[full_name]" value="" />
</div>
<div>
<span style="font-size: 20px;"><label for="drip-email">Email Address</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="email" id="drip-email" name="fields[email]" value="">
</div>
<div>
<span style="font-size: 20px;"><label for="drip-phone">Phone Number</label></span><br>
<input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-phone" name="fields[phone]" value="">
</div>
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[read_tc_and_pp]" value="no" />
<input type="checkbox" name="fields[read_tc_and_pp]" id="tcpp" value="yes" /> Privacy policy link goes here
</div>
<div style="padding-top: 5px;">
<input type="hidden" name="fields[consent_to_contact]" value="no" />
<input type="checkbox" name="fields[consent_to_contact]" id="contactConsent" value="yes" /> Consent blurb goes here
</div>
<div style="padding-top: 5px;">
<input style="width: 100%; padding: 10px; font-size: 36px; color: #ffffff; background-color: #22B44F; border: 2px solid; border-radius: 5px; font-weight: bold;" type="submit" value="Get Instant Access" data-drip-attribute="sign-up-button" />
</div>
</form>
I am making a website in order to create a chrome new-tab extension, so to make that I need a search bar - My google search bar is in the top left corner of the page and I need it in the middle, sort of like the google home page search bar.
I have researched on websites such as https://w3schools.com and https://w3docs.com and could not find much
this is my current code:
<!DOCTYPEhtml>
<html>
<form method="get" action="http://www.google.com/search">
<div style="border:2px solid black;padding:16px;width:60em;">
<table border="0" align="center" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="100" style="color:#808080;"
maxlength="255" value="Google site search"
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch"/>
</td>
</tr>
</table>
</div>
</form>
</html>
the output is that the search box (as stated above) the box is in the corner.
use flexbox
html,body{
width:100%;
height:100%;
}
form{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
You give too much with to your searchBar make the bellow change to with you given to Table.
style="border:2px solid black;padding:16px;width:60em;
To
style="border:2px solid black;padding:16px;width:45em;
Run the code snippet.
<!DOCTYPEhtml>
<html>
<form method="get" action="http://www.google.com/search">
<div style="border:2px solid black;padding:16px;width:45em;">
<table border="0" align="center" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="100" style="color:#808080;" maxlength="255" value="Google site search"
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';"
onblur="if(this.value=='')this.value=this.defaultValue; " />
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch" />
</td>
</tr>
</table>
</div>
</form>
</html>
If you want to center it horizontally and vertically you could use following css on your div that surrounds table. NB! You need to use position: absolute; to center vertically with these styles. For horizontal left: 0; right: 0; is used because the position is absolute and if you were to use relative position those would not be needed.
Center vertically:
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
Center horizontally:
left: 0;
right: 0;
margin: 0 auto;
.center {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
<!DOCTYPEhtml>
<html>
<form method="get" action="http://www.google.com/search">
<div style="border:2px solid black;padding:16px;width:60em;" class="center">
<table border="0" align="center" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="100" style="color:#808080;"
maxlength="255" value="Google site search"
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch"/>
</td>
</tr>
</table>
</div>
</form>
</html>
You can center it by putting margin: 0 auto on the border div:
<div style="border:2px solid black;padding:16px;width:60em; margin:
0 auto;">
I also centered the text input that way. Expand the snippet to see it centered (your snippet looks centered until it's expanded).
<!DOCTYPEhtml>
<html>
<form method="get" action="http://www.google.com/search">
<div style="border:2px solid black;padding:16px;width:60em; margin: 0 auto;">
<table border="0" align="center" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="100" style="color:#808080; margin: 0 auto;"
maxlength="255" value="Google site search"
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch"/>
</td>
</tr>
</table>
</div>
</form>
</html>
So you can add the following to your <div>:
<div style="border:2px solid black;padding:16px;width:60em; margin: 0 auto; margin-top:45vh">
45vh is not the best solution as you don't get the absolute middle of page.
Here is a better solution:
<div class="center-div"></div>
<style>
.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<!DOCTYPEhtml>
<html>
<form method="get" action="http://www.google.com/search">
<div style="border:2px solid black;padding:16px;width:60em;margin: 0 auto; margin-top:45vh">
<table border="0" align="center" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="100" style="color:#808080;"
maxlength="255" value="Google site search"
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch"/>
</td>
</tr>
</table>
</div>
</form>
</html>
Media query can help you for lower width
#media (min-width: 1020px)
.width-container {
margin: 0 auto;
}
<!DOCTYPEhtml>
<html>
<form method="get" action="http://www.google.com/search">
<div style="border:2px solid black;padding:16px;width:60em;" class="width-container">
<table border="0" align="center" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="100" style="color:#808080; margin: 0 auto;" maxlength="255" value="Google site search" onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; " />
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch" />
</td>
</tr>
</table>
</div>
</form>
</html>
I have three fields and one next button. I have to display each field one by one after clicking on next button. Means I have to display only one field at a time.
For example. First text box displaying with next button after clicked on next button then display a second text box with next button same on third one but this time no next button. It will display submit button. Would you help me out in this?
.steps{
max-width:500px;
height:auto;
margin:0 auto;
padding:70px 0;
background:#ffffff;
border:1px solid #e1e8f2;
position:relative;
text-align:center;
}
label
{
display: block;
}
.field-set
{
text-align: left;
}
<div class="steps">
<p class="form_title">Please Fill The field Bellow</p>
<form action="#" method="post" autocomplete="off">
<div class="field-set">
<label>name</label>
<input type="text" id="name" name="name" placeholder="Enter You Name"/>
</div>
<div class="field-set">
<label>Email</label>
<input type="email" id="email" name="email" placeholder="Enter You Email"/>
</div>
<div class="field-set">
<label>mobile</label>
<input type="text" id="mob" name="mob" placeholder="Enter Your mobile no"/>
</div>
<div class="field-set">
<input type="submit" name="next" value="next" id="click_next">
</div>
</form>
</div>
Try something like
var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
e.preventDefault()
$(".field-set").eq((countshow - 1)).hide();
if (count > countshow) {
$(".field-set").eq(countshow).show();
countshow++;
} else {
$("form").unbind("submit").submit();
}
})
I've also changed some of your css.
.field-set {
text-align: left;
display: none;
}
.field-set:first-of-type,
.field-set:last-of-type {
display: block;
}
var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
e.preventDefault()
$(".field-set").eq((countshow - 1)).hide();
if (count > countshow) {
$(".field-set").eq(countshow).show();
if ((count - 1) == countshow) {$(this).val("sumbit")}
} else {
$("form").unbind("submit").submit();
}
countshow++;
})
.steps {
max-width: 500px;
height: auto;
margin: 0 auto;
padding: 70px 0;
background: #ffffff;
border: 1px solid #e1e8f2;
position: relative;
text-align: center;
}
label {
display: block;
}
.field-set {
text-align: left;
display: none;
}
.field-set:first-of-type,
.field-set:last-of-type {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- start Form Steps -->
<div class="steps">
<p class="form_title">Please Fill The field Bellow</p>
<form action="#" method="post" autocomplete="off">
<div class="field-set">
<label>name</label>
<input type="text" id="name" name="name" placeholder="Enter You Name" />
</div>
<div class="field-set">
<label>Email</label>
<input type="email" id="email" name="email" placeholder="Enter You Email" />
</div>
<div class="field-set">
<label>mobile</label>
<input type="text" id="mob" name="mob" placeholder="Enter Your mobile no" />
</div>
<div class="field-set">
<input type="submit" name="next" value="next" id="click_next">
</div>
</form>
</div>
<!-- End Form Steps -->
Try something like this:
$(document).ready(function(){
var step = 1;
$('#btn').click(function(){
if( step < 5 )
{
$('.txt').eq(step - 1).hide();
$('.txt').eq(step).show();
step++;
}
else
{ /*Submit the form here*/ }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="txt" placeholder="1">
<input class="txt" style="display:none;" placeholder="2">
<input class="txt" style="display:none;" placeholder="3"><input class="txt" style="display:none;" placeholder="4">
<input class="txt" style="display:none;" placeholder="5">
<input type="button" value="Next" id="btn">
I am making a simple registration form, when I remove the if statements from "from here" comment to "to here" comment, the required works. But, when I the write the if statements, then the required does not work.
function validate() {
var contact = document.getElementById("Contact").value.search(/^[0-9]{10}/);
var gender = document.getElementsByName("gender");
for (var i = 0; i < gender.length; i++) {
if (gender[i].checked) {
gender = gender[i].value;
}
}
/*from here*/
if (contact) {
alert("Enter correct Contact No.");
}
if (gender != "Male" && gender != "Female") {
alert("Select Gender");
}
if (contact == 0 && (gender == "Male" || gender == "Female")) {
alert("Form submitted!");
}
/*to here*/
}
body {
background-image: url("images/back.jpg");
background-repeat: no-repeat;
}
form {
background-color: white;
width: 50%;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
box-shadow: 20px 10px 20px 0px darkgrey;
margin-top: 6%;
}
table {
border-spacing: 20px 10px;
padding-bottom: 20px;
}
tr {
font-size: 20px;
}
textarea {
max-width: 250px;
}
h1 {
padding-top: 25px;
font-style: italic;
color: #363731;
}
p {
padding-top: 15px;
color: white;
font-family: Arial;
font-weight: bolder;
font-size: 40px;
}
#btn {
width: 70px;
height: 30px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<p>REGISTRATION</p>
<form method="post">
<h1>Add Student</h1>
<table cellpadding="2">
<tr>
<td align="right">Student Name</td>
<td align="left"><input type="text" id="studentName" name="studentName"
size="32" required></td>
</tr>
<tr>
<td align="right">Contact No</td>
<td align="left"><input type="number" name="contactNo" id="Contact"
size="32" maxlength="10" required></td>
</tr>
<tr>
<td align="right">Gender</td>
<td align="left">
<input type="radio" name="gender" value="Male" checked>Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td align="right">Email Id</td>
<td align="left">
<input type="email" title="Enter valid acharya email" pattern="[a-zA-Z]+\.
[a-zA-Z]+\.([0-9][1-9]|[1-9][0-9])#acharya\.ac\.in" id="email" size="32"
required>
</td>
</tr>
<tr>
<td align="right">Address Line</td>
<td align="left"><textarea placeholder="Your Address Here..." rows="5"
cols="100"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Add" id="btn"
onclick="validate()" />
<input type="button" value="Reset" id="btn" />
</td>
</tr>
</table>
</form>
</center>
Required actually works. In your validate function, you are only alerting "Form Submitted" if those validations are met, that does not mean the form has been submitted. If you notice you do not even have a page refresh to show the form has been submitted.
I have tested your work by moving the if statement about alert("Form submitted!"); between your two comments and they work out the same result. What part of required check missed? Please specified the issue you're facing, or tell me if I misunderstood your question
And also you should modify some code setting in the line <form method="post"> to really let the code work
EDIT
In order to let the form works you should add a path to send the value to
change the code from <form method="post"> to something like <form action="data.php" method="post">
Code in data.php
<h4>Value you submit</h4>
<p>Name <?php echo $_POST["studentName"]; ?></p>
<p>Contact No : <?php echo $_POST["contactNo"]; ?></p>
And so one
Tutorial of handling HTML form by W3Schools
Bonus tips:
1) Usually, we use POST method because the result can't be seen in address bar but if you want a URL that can be bookmarked and revisit with the same result you should use GET
2) I find out you make a required check on gender in your script but I think it's useless since you add a code checked in the Male option so in that radio part it can't be unchecked, you can only check male or female
Also sorry for my bad English
Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/