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>
Related
This code allows user to pick a color and save his configuration choise. My goal is to make visible only the circle buttons and hide radio-buttons (i've been tryed to stylize them but it's not possible as i read), It's there any way to use ngModel with a group of buttons instead of radiobuttons? My other question is: It's possible to make a button 'active' based on a variable state? Thanks in advance
this.colorOptions = ['#0068d8', '#51cbce', '#ffd000', '#d80041', '#d84400', '#179906', '#026366'];
setColor(event){
console.log(event.target)
this.userDetails.settings.colorButtons = event.target.value;
}
.color-picker{
width: 30px;
height: 30px;
margin: 6px;
border-radius: 25px;
outline: none;
color: transparent;
}
.color-picker:focus,
.color-picker:active{
box-shadow: 0 0 0 2pt black;
}
#color1{
background-color: #0068d8;
}
#color2{
background-color: #51cbce;
}
#color3{
background-color: #ffd000;
}
#color4{
background-color: #d80041;
}
#color5{
background-color: #d84400;
}
#color6{
background-color: #179906;
}
#color7{
background-color: #026366;
}
<div class="form-group">
<input type="button" class="color-picker" id="color1" value="#0068d8" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color2" value="#51cbce" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color3" value="#ffd000" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color4" value="#d80041" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color5" value="#d84400" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color6" value="#179906" (click)="setColor($event)" required>
<input type="button" class="color-picker" id="color7" value="#026366" (click)="setColor($event)" required>
</div>
<div class="custom-control custom-radio" *ngFor="let option of colorOptions">
<input id="{{option}}" type="radio" class="custom-control-input" [value]="option" name="colorButtons" #colorButtons="ngModel" [(ngModel)]="userDetails.settings.colorButtons" ngModel (change)="setColor($event)" >
<label class="custom-control-label" for="{{option}}">{{option}}</label>
</div>
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">
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. :-/
I have a form to change password, with javascript validate check for all the form fields, however, I don't think the Javascript even gets triggered. Entering submit takes me straight to Null Pointer Exception error in my Controller. Am I missing something ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Change Password Page</title>
<script type="text/javascript">
function validate(){
var username=document.form.j_username.value;
var oldPassword=document.form.j_old_password.value;
var newPassword=document.form.j_new_password.value;
var confirmPassword=document.form.j_confirm_password.value;
if(username==""){
alert("Enter Username!");
return false;
}
if(oldPassword==""){
alert("Enter Old Password!");
return false;
}
if(newPassword==""){
alert("Enter New Password!");
return false;
}
if(confirmPassword==""){
alert("Enter Confirm Password!");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="change_password-header">
<h1>Blah Blah</h1>
</div>
<div class="L" style="float: left; left; padding: 1em; background-color: #8eb4e3; border: 1px solid black;">
<form action="changepassword" method="post" onsubmit="return validate()">
<p><strong style="color: #e3f7ff">Username: </strong>
<input type="text" name="j_username" size="25" />
</p>
<p><strong style="color: #e3f7ff">Old Password: </strong>
<input type="password" size="25" name="j_old_password" />
</p>
<p><strong style="color: #e3f7ff">New Password: </strong>
<input type="password" size="25" name="j_new_password" />
</p>
<p><strong style="color: #e3f7ff">Confirm New Password: </strong>
<input type="password" size="25" name="j_confirm_password" />
</p>
<div style="text-align: center;">
<input type="submit" value="Submit" class="button-login" style="background-color: #c7d9f1; border: 1px solid black;" />
<input type="reset" value="Reset" class="button-login" style="background-color: #c7d9f1; border: 1px solid black;"/>
</div>
</form>
</div>
<div style="float: left; width: 100%; font-size: 12px; padding: 0 0 0 2em" class="change_password-footer">
<div>Return back to login screen</div>
<br/>
</div>
</body>
</html>
You just forgot to name your form:
<form action="changepassword" name="test" method="post" onsubmit="return validate()">
and reference in JS like this:
var username=document.forms.test.j_username.value;
http://jsfiddle.net/gq79y/
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).