|
JavaScript - Html Form Not Working
Hi,
Posting this in javascript because the problem might be caused by my scripting. I made a 3 page long form using javascript, and the contents of the second page aren't submitted to the php script. link Hope someone can check it for errors. Thanks! Similar TutorialsHi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html>
<head>
<script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple"
});
</script>
<script language="javascript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
function err_check(){
var email = document.getElementById('to_email').value;
if(email.length==0){
alert('Please Enter Email Address');
return false;
}
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
email = document.getElementById('cc_email').value;
if(email.length != 0){
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
}
var answer = confirm ("Send E-Mail?");
if (!answer){
return false;
}
}
</script>
<!-- /TinyMCE -->
<style type="text/css">
body, table, td, th{
background-color:#CCCCCC;
font-family: Arial;
font-size:14px;
}
.que{
font-weight:bold;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<?php
include 'library/database.php';
include 'library/opendb.php';
$query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$from_email = $row[0];
$from_person = $row[1];
$from_mobile = $row[2];
$query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
$row = mysql_fetch_row($query);
$cusid = $row[0];
$query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$toer = $row[0];
include 'library/closedb.php';
?>
<table width="100%" border="0">
<tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr>
<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<?php
echo "<br><br><br>" . $from_person . "<br>" . $from_mobile;
?>
</textarea>
</td></tr>
</table>
</form>
</body>
</html>
If I have a javascript var in a webpage(html form textarea VALUE - yui) that contains html code, and want to appear it, in confirmformpage.php, then how to transfer it...? is it really needed go via PHP ...? and ofcourse use innerHTML to write it....yes I usually use an intermitened processform.php script. http://developer.yahoo.com/yui/editor Hi i would like to get my script working in a netbeans project in a .jsp format what changes do i have to make, i stored the images the same place as the .jsp but they don't show Code: <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
</head>
<body>
<h1>slide show</h1>
<a href="javascript:gotoshow()"><img src="img1.jpg" name="slide" border=0 width=200 height=200></a>
<script>
<!--
slideshowimages("img1.jpg","img2.jpg","img3.jpg","img4.jpg")
slideshowlinks("")
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
sorry if this is in the wrong place -is a noob- hi whats wrong with this? <!DOCTYPE HTML> <HEAD> <script type="text/javascript"> //-- function onLoad() { document.GetElementById("login").innerHTML = "hello"; } --// </script> <TITLE>Steve's FS.</TITLE> <style type="text/css"></HEAD> <BODY onload="onLoad()"> no effect no errors using google chrome and javascript is enabled is it a html 5 thing im not jet aware of? i have done this a million times???? I'm a newbie to scripting who needs help. The situation is as follows: I'm running Joomla 1.5.23 and I've been trying to get validation on a component's form fields. In the header section, I'm properly loading the validator.js file, which contains the following: Code: //function to check empty fields
function isEmpty(strfield1, strfield2) {
strfield1 = document.forms[0].firstname.value
strfield2 = document.forms[0].lastname.value
//firstname field
if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ')
{
alert("\"firstname\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//lastname field
if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ')
{
alert("\"lastname" is a mandatory field.\nPlease amend and retry.")
return false;
}
}
return true;
}
//function to check valid email address
function isValidEmail(strEmail){
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.forms[0].email.value;
// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('A valid e-mail address is required.\nPlease amend and retry');
return false;
}
return true;
}
//function that performs all functions, defined in the onsubmit event handler
function check(form)){
if (isEmpty(form.firstname)){
if (isEmpty(form.lastname)){
if (isValidEmail(form.email)){
return true;
}
}
}
return false;
}
I'm invoking this in this way: Code: <form action="index.php?option=com_pbbooking&task=save" method="POST" onsubmit="return check(this);"> My problem is that even if all fields are empty it will go to the next step. Thanks in advance, twdk01. I have a button that works fine in every browser EXCEPT IE8, and I can't seem to figure out why, I would assume its a Jvascript issue, here's the code, any help would be great thanks guys... THE button that doesn't work in IE is the one with the value "Proceed to your order" at the bottom, the other two, delete and recalculate work fine.??? Code: <form action="/cart" method="post" id="form">
<table width="100%" cellspacing="0" cellpadding="0" style="margin-top:30px">
<thead class="tableTitle"><tr>
<td width="20"><!--<input type="checkbox" value="" checked="" onclick="checkAll(this)" />--></td>
<td>Title</td>
<td>Quantity</td>
<td>Price</td>
</tr></thead><tbody class="tableBody">
<?foreach ($goods as $k => $v){$randId = randId();?>
<tr>
<td><input type="checkbox" name="deleteCheckbox[]" class="checkboxes" value="<?=$v['id']?>" /></td>
<td width="400"><strong><?=$v['title']?></strong><br />
Color: <select onchange="updateExtras('color', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify color</option>
<?if (count($v['colors'])) foreach ($v['colors'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['colorId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
Size:<select onchange="updateExtras('size', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify size</option>
<?if (count($v['sizes'])) foreach ($v['sizes'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['sizeId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
<?if ($_SESSION['cartDetails'][$v['id']]['size']){?>
<div style="font-size:0.9em; margin-top:5px"><strong>Size</strong>: <?=$_SESSION['cartDetails'][$v['id']]['size']?></div>
<?}?>
<?if ($_SESSION['cartDetails'][$v['id']]['color']){?>
<strong>Color</strong>: <?=$_SESSION['cartDetails'][$v['id']]['color']?><?}?>
</td>
<td width="100"><input type="text" value="<?=$v['q']?>" size="5" name="ammounts[]" /></td>
<td>$<span id="<?=$randId?>"><?=$v['totalPrice']?></span> CAD<br /><span style="color:#ccc">($<?=$v['price']?> per each)</span></td>
</tr>
<?}?>
<tr class="totalPrice">
<td></td>
<td width="400" style="font-size:1em; font-style:italic">Total price</td>
<td width="100"></td>
<td style="font-size:1em; font-style:italic">$<span id="totalPriceHere"><?=$totalPrice?></span> CAD</td>
</tr>
</tbody>
<tfoot class="tableFoot"><tr><td colspan="4"></td></tr></tfoot>
</table>
<div style="margin-top:10px;">
<input type="submit" value="Delete selected" id="deleteButton" class="button left" />
<a href="/cart/proceed" onclick="
var stop = false;
$('.checkMe').each(function(){
if ($(this).attr('value') == 0) {stop = true}
return
})
if (stop) {
$('#alert').html('Choose colors and sizes for each item to proceed!');
return false
}
return true
"><input type="button" value="Proceed to your order" class="button right" /></a>
<a href="#" onclick="$('#form').attr('action', '/cart/recalc'); $('#form').submit()"><input type="button" value="Recalculate" style="margin-right:10px" class="button right" /></a>
I'm new at JavaScript and not sure if what I want to do is possible. This is part of the code from a larger check-in form. This code adds a new row as needed and should also enable the text fields only after the check box is selected. It is not working as expected and I am missing what the problem may be or if this is even possible. Any help would be appreciated. [CODE] <!DOCTYPE html> <html lang="en"> <title></title> <script type="text/javascript"><!-- function addRow() { tabBody=document.getElementById("data"); row=document.createElement("TR"); cell1 = document.createElement("TD"); checknode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0"); checknode2 = document.createElement("input"); checknode2.name="guest[]"; checknode2.id='guest[]'; checknode2.type="checkbox"; checknode2.setAttribute('onclick', 'disablefields();'); cell2 = document.createElement("TD"); textnode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"); textnode2=document.createElement("input"); textnode2.type="text"; textnode2.name='guestc[]'; textnode2.id='guestc[]'; textnode2.setAttribute('disabled',''); textnode2.size="7"; textnode2.maxlength="9"; textnode2.setAttribute('onkeyup', 'this.value = this.value.toUpperCase();'); cell3 = document.createElement("TD"); textnode3=document.createElement("input"); textnode3.type="text"; textnode3.name="guestn[]"; textnode3.id='guestn[]'; textnode3.setAttribute('disabled',''); textnode3.size="20"; textnode3.maxlength="30"; cell4 = document.createElement("TD"); checknode3 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"); checknode4 = document.createElement("input"); checknode4.name="food[]"; checknode4.id='food[]'; checknode4.type="checkbox"; checknode4.value="breakfast"; cell1.appendChild(checknode1); cell1.appendChild(checknode2); row.appendChild(cell1); tabBody.appendChild(row); cell2.appendChild(textnode1); cell2.appendChild(textnode2); row.appendChild(cell2); tabBody.appendChild(row); cell3.appendChild(textnode3); row.appendChild(cell3); tabBody.appendChild(row); cell4.appendChild(checknode3); cell4.appendChild(checknode4); row.appendChild(cell4); tabBody.appendChild(row); } --> </script> <SCRIPT LANGUAGE="JavaScript"> <!-- function disablefields(){ if (document.getElementById('guest[]').checked == 0){ document.getElementById('guestc[]').disabled='disabled'; document.getElementById('guestc[]').value=''; document.getElementById('guestn[]').disabled='disabled'; document.getElementById('guestn[]').value=''; document.getElementById('food[]').disabled='disabled'; document.getElementById('food[]').value=''; }else{ document.getElementById('guestc[]').disabled=''; document.getElementById('guestc[]').value='Call Sign'; document.getElementById('guestn[]').disabled=''; document.getElementById('guestn[]').value='Enter Name'; document.getElementById('food[]').disabled=''; document.getElementById('food[]').value='breakfast'; } } --> </SCRIPT> </head> <body> <form name="checkin" method="post"> <table> <tbody id="data"> <tr><td> <input type="checkbox" name="guest[]" id="guest" onclick="disablefields()"></td> <td> <input type="text" disabled name="guestc[]" id="guestc[]" size="7" maxlength="9" value="" onkeyup="this.value = this.value.toUpperCase();" /></td> <td><input type="TEXT" name="guestn[]" disabled id="guestn[]" size="20" maxlength="30" value=""></td> <td> <input type="checkbox" name="food[]" disabled id="food[]" value="breakfast"></td></tr> </tbody> </table> <table border="0" width="100%"> <tr> <td><input type="button" value="Add new check-in" onclick="addRow();" /></td> </tr> </table> </form> </body> </html> [CODE] Hi all, I have created a contact form using php and have added some javascipt code to validate the fields, problem is the validation isnt working. Can anyone give me a little advice on how i can get this working? Page is located he http://www.brownscountryhouse.co.uk/testing/test.php The javascript used is: Code: <script language="javaScript">
function ValidateForm(){
var numeID=document.form1.nume
var surnameID=document.form1.surname
var emailID=document.form1.email
if ((numeID.value==null)||(numeID.value=="")){
alert("Please enter your name")
numeID.focus()
return false
}
if ((surnameID.value==null)||(surnameID.value=="")){
alert("Please enter your surname")
surnameID.focus()
return false
}
if ((emailID.value==null)||(emailID.value=="")){
alert("Please enter your email address")
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
function echeck2(str) {
alert("Invalid E-mail Address")
return false
}
function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Invalid Email Address")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Invalid Email Address")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Invalid Email Address")
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert("Invalid Email Address")
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Invalid Email Address")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("Invalid Email Address")
return false
}
if (str.indexOf(" ")!=-1){
alert("Invalid Email Address")
return false
}
return true
}
</script>
Thanks in advance for looking! Kyle Hey All, I have the following function - where I can get one of the conditions to work, but not both together. Here's the code: Code: function test_function() {
$('#form_field_name').focus();
window.location = window.location + "#form_field_name";
}
Basically when clicking an error link, I want to focus onto the form field, and then move to the anchor itself on the page. One of these will work at a time, but not both and I'm not sure why. Any suggestions would be appreciated. Thanks. Hi I am new to teaching JavaScript I need to show how to create a form with validation and feedback. I can get it to validate a text with a message, but I cannot get it to validate a set of radio buttons and conform the radio selected. Code below- <html> <head> <title>Exam entry</title> <script language="javascript" type="text/javascript"> function validateForm() { var result = true; var msg=""; if (document.ExamEntry.name.value=="") { msg+="You must enter your name \n"; document.ExamEntry.name.focus(); document.getElementById('name').style.color="red"; result = false; if (document.ExamEntry.subject.value=="") { msg+="You must enter the subject \n"; document.ExamEntry.subject.focus(); document.getElementById('subject').style.color="red"; result = false; } } if(msg==""){ return result; } { alert(msg) return result; } } </script> </head> <body> <h1>Exam Entry Form</h1> <form name="ExamEntry" method="post" action="success.html"> <table width="50%" border="0"> <tr> <td id="name">Name</td> <td><input type="text" name="name" /></td> </tr> <tr> <td id="subject">Subject</td> <td><input type="text" name="subject" /></td> </tr> <tr> <td><input type="reset" name="Reset" value="Reset" /></td> </tr> </table> </form> <script type="text/javascript"> function lengthpass() { var s1=document.getElementById("password"); if(s1.value.length != 4) { alert("Please enter an exam number which is 4 characters long"); return false; } return true; } </script> </head> <body> <form onsubmit="return lengthpass();"> Exam Code <input type="text" id="password" name="password"> (Four Numbers) <br> <br> <h1>option button form validation</h1> <script type="text/javascript"> function option1() { var checkedop=null; var examop=document.getElementsByName("exam"); for (var i = 0;i<examop.length;i++) { if(examop[i].checked) { checkedop=examop[i]; } } if(checkedop==null) { alert("please select an exam"); return false; } { confirm("you have chosen"+checkedop.value+ "is this correct?"); } } </script> </head> <body> <form name="examtype" onsubmit="return option1();"> Select an exam type<br> <input type="radio" name = "exam"value= "GCSE"> GCSE<br> <input type="radio" name = "exam"value= "AS"> AS<br> <input type="radio" name = "exam"value= "A2"> A2<br> <input type="submit"name="submit"value="Submit Form"/> </form> </body> </html> I have a simple form here with a function to validate it, but I have no idea where I'm going wrong. I'm very familiar with ActionScript and C++, so I get the coding aspect of it, but one thing I'm not familiar with is how exactly JavaScript and HTML communicate. The problem is that this form always submits, even if my function returns false...but I can't even see if it returns false anyway, because alert() doesn't seem to be working either. Here's what I have for my HTML: Code: <form name="myForm" onSubmit="return checkForm();" action="processForm.php" method="post"> <input type="text" size="25" name="firstName" value="*First Name" /> <br /> <input type="text" size="25" name="lastName" value="Last Name" /> <br /> <input type="text" size="25" name="phoneNumber" value="Phone" /> <br /> <input type="text" size="25" name="emailAddress" value="*Email" /> <br /> <textarea rows="6" cols="20">Message</textarea> <input type="submit" value="Submit" /> </form> And here's the JavaScript function: Code: function checkForm(){
with(firstName){
if(value==NULL || value=="" || value==defaultValue){
return false;}
}
with(emailAddress){
if(value==NULL || value=="" || value==defaultValue){
return false;}
}
return true;
}
What bugs me is even when I try to check my work by using alert statements to see what parts of the code are being executed, they never seem to come up. So it's kind of left me doing lots of guessing and trying a million things. Even if that last line in the JS function is "return false," the form still submits anyway. What am I doing wrong and how can I fix this up? Hi all, ive been staring at this code for over an hour now and i cant see what is wrong with it. any chance of a wee look over for me ? Thank you Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Comment Form</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<SCRIPT language=javascript>
function Validate() {
var Message = ""
Message = Message + Checkname()
if (Message == ""){
return true
}
else {
alert(Message)
return false
}
}
function CheckName() {
var UserName = document.form.name.value
if (UserName == "") {
Message = "Something's wrong with your forename" + "\n"
}
else {
Message = ""
}
return Message
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=form onsubmit="return Validate()" action="sent.htm" method=post
encType=text/plain>
<TABLE BORDER=1 CELLSPACING=0>
<TBODY>
<TD>
<TABLE BORDER=0 CELLSPACING=5>
<TR> <TD><font size="2" face="Verdana"><b>Forename:</b></TD>
<TD><INPUT NAME=name size=25></TD> </TR>
<TR> <TD></TD> <TD align=right>
<INPUT TYPE=reset VALUE="Reset" name=submit2>
<INPUT TYPE=submit VALUE="Submit" NAME=Submit>
</TD> </TR>
</TBODY>
</TABLE>
</TABLE>
</FORM>
</BODY>
</HTML>
I'm having trouble inserting two jquery scripts into the same HTML file. they both work independently, but when i try to use them both at the same time only one script will work.. I'm using a "slider gallery" and "ez background-resize". I've read a few articles that suggest using "var jQuery_1_2_6 = $.noConflict(true);" but i just can't seem to figure it out. Any one have any thoughts or suggestions? I'd really appreciate it. Code is below. Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Total City Sports</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<!-- start slider gallery-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script> <!-- end slider gallery -->
<!--start bg resize -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
$("#body-background").ezBgResize();
});
$(window).bind("resize", function(){
$("#body-background").ezBgResize();
});
</script> <!-- end bg resize-->
</head>
It's been a long time since I've messed around with Javascript. I had some resources and books that sort of showed what I was wanting to do. Essentially what I am trying to create is a calculator which allows the user to check the components of their computer and when they hit "calculate" it will output the price of the system for them. I found some simplified examples of what I am trying to do online, but I cannot for the life of me figure out why when I hit "calculate" nothing happens The code is below (I pasted the wholes of both codes because I'm not sure where exactly the problems are). Any help is definitely appreciated! html code: Code: <html>
<head>
<script language="JavaScript1.1" src="calculate.js" type="text/javascript"></script>
</head>
<body onLoad="load ()">
<center>
<form name="calc" method="POST">
<table width="100%" border="0" cellpadding="3">
<tr>
<td colspan="11"><center><h1>Computer Pricing Calculator</h1></center></td>
</tr>
<tr>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">TYPE</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="5" align="center"><font color="white" size="+2">PROCESSOR</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">HARD DRIVE</font></th>
</tr>
<!--Row 1 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Single Core Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="single" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 2 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Dual Core Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="double" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 3 -->
<tr>
<td bgcolor="#eeeeee" width="20%">Desktop/Tower</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="pc" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Core i-3 Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="triple" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Hyper-threaded Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ht" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 4 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Quad Core Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="quad" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Enter the size (gb)</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="text" name="size" size="1"></td>
<td width="5"></td>
</tr>
<!--Row 5 -->
<tr>
<td bgcolor="#eeeeee" width="20%">Laptop</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="laptop" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Core i-5 Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="five" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Enter the speed (ghz)</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="text" name="speed" size="1"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 6 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Six Core Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="six" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 7 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Core i-7 Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="seven" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<!--Row 1 -->
<tr>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">RAM</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">VIDEO CARD</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OPTICAL DRIVE</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OFFICE</font></th>
</tr>
<!--Row 2 -->
<tr>
<td bgcolor="#eeeeee" width="20%">512 MB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram512mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">No Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="novid" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">CD/ROM Only</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrom" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Open Office</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="nooffice" size="10"></td>
</tr>
<!--Row 3 -->
<tr>
<td bgcolor="#eeeeee" width="20%">768 MB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram768mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">64 MB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid64mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">CD/RW Only</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrw" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Office 97</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office97" size="10"></td>
</tr>
<!--Row 4 -->
<tr>
<td bgcolor="#eeeeee" width="20%">1.0 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram1000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">128 MB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid128mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">CD/RW - DVD/ROM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrwdvdrom" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Office 2003</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office03" size="10"></td>
</tr>
<!--Row 5 -->
<tr>
<td bgcolor="#eeeeee" width="20%">1.5 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram1500mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">256 MB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid256mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">CD/RW - DVD/RW</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrwdvdrw" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Office 2007</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office07" size="10"></td>
</tr>
<!--Row 6 -->
<tr>
<td bgcolor="#eeeeee" width="20%">2.0 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram2000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">512 MB DDR Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid512mb" size="10"></td>
<td width="5"></td>
<td width="20%"></td>
<td align="center" width="4%"></td>
<td width="5"></td>
<td width="20%"></td>
<td align="center" width="4%"></td>
</tr>
<!--Row 7 -->
<tr>
<td bgcolor="#eeeeee" width="20%">2.5 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram2500mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">768 MB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid768mb" size="10"></td>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">CONNECTIVITY</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OS</font></th>
</tr>
<!--Row 8 -->
<tr>
<td bgcolor="#eeeeee" width="20%">3.0 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram3000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">1.0 GB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid1000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">NIC</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="nic" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Windows XP</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="xp" size="10"></td>
</tr>
<!--Row 9 -->
<tr>
<td bgcolor="#eeeeee" width="20%">3.5 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram3500mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">DDR2/DDR3 Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ddr23vid" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Modem</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="modem" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Windows Vista</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vista" size="10"></td>
</tr>
<!--Row 10 -->
<tr>
<td bgcolor="#eeeeee" width="20%">4.0 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram4000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">DDR5 Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ddr5vid" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Wireless</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="wireless" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Windows 7</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="windows7os" size="10"></td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" align="center"><input name="Submit" type="submit" style="background-color:#ffff00; color:#000000; border:5px solid #000000; font-family:arial; font-size:15pt; font-weight:900; letter-spacing=2px" onClick="count ()" value="CALCULATE PRICE!"></td>
<td width="5"></td>
<td colspan="2" align="center"><input type="reset" value="RESET VALUES!" style="background-color:#ffff00; color:#000000; border:5px solid #000000; font-family:arial; font-size:16pt; font-weight:900; letter-spacing=2px"></td>
<td colspan="3"></td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td bgcolor="#ffffff" colspan="11" align="center"><font size="18">PRICE = $</font><input name="pay" type="text" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:25pt; letter-spacing=1px" size="10"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
javascript code (calculate.js) Code: function load()
{
window.status = "Pricing Guide"
}
function count()
{
//Type variables
var pcprice = 0;
var laptopprice = 20;
var typeprice = 0;
//Processor variables
var singleprice = 1.67;
var doubleprice = 2.05;
var tripleprice = 1.31;
var quadprice = 2.30;
var fiveprice = 1.97;
var sixprice = 2.0;
var sevenprice = 3.09;
var htprice = 0;
var processorprice = 0;
//RAM variables
var ram512mbprice = 15;
var ram756mbprice = 22;
var ram1000mbprice = 30;
var ram1500mbprice = 45;
var ram2000mbprice = 60;
var ram2500mbprice = 75;
var ram3000mbprice = 80;
var ram3500mbprice = 95;
var ram4000mbprice = 110;
var ramprice = 0;
//Video Card variables
var novidprice = 0;
var vid64mbprice = 10;
var vid128mbprice = 15;
var vid256mbprice = 20;
var vid512mbprice = 28;
var vid768mbprice = 33;
var vid1000mbprice = 40;
var ddr23vidprice = 1.5;
var ddr5vidprice = 2;
var vidprice = 0;
var videoprice = 0;
//Optical Drives variables
var cdromprice = 2;
var cdrwprice = 5;
var cdrwdvdromprice = 20;
var cdrwdvdrwprice = 35;
var driveprice = 0;
//Connectivity variables
var nicprice = 0;
var modemprice = 5;
var wireless price = 20;
var connectprice = 0;
//Office variables
var noofficeprice = 0;
var office97price = 0;
var office03price = 30;
var office07price = 50;
var officeprice = 0;
//Operating System variables
var xpprice = 0;
var vistaprice = 0;
var windows7osprice = 110;
var osprice = 0;
//Hard drive - Input Box
var hdsize = document.getElementById('size');
var hdprice = 0;
//Processor Speed - Input Box
var pcspeed = document.getElementById('speed');
var processorprice = 0;
//COMPUTER TYPE - Check Boxes
if (calc.pc.checked){
var typeprice = document.calc.pc.value = pcprice;
}
if (calc.laptop.checked){
var typeprice = document.calc.laptop.value = laptopprice;
}
//Hard Drive
var hdprice = hdsize * 0.30;
//Processor - Check Boxes
if (calc.single.checked){
var processorprice = document.calc.single.value = singleprice * pcspeed;
}
if (calc.double.checked){
var processorprice = document.calc.double.value = doubleprice * pcspeed;
}
if (calc.triple.checked){
var processorprice = document.calc.triple.value = tripleprice * pcspeed;
}
if (calc.quad.checked){
var processorprice = document.calc.quad.value = quadprice * pcspeed;
}
if (calc.five.checked){
var processorprice = document.calc.five.value = fiveprice * pcspeed;
}
if (calc.six.checked){
var processorprice = document.calc.six.value = sixprice * pcspeed;
}
if (calc.seven.checked){
var processorprice = document.calc.seven.value = sevenprice * pcspeed;
}
if (calc.ht.checked){
var htprice = document.calc.ht.value = 10;
}
//RAM - Check Boxes
if (calc.ram512mb.checked){
var ramprice = document.calc.ram512mb.value = ram512mbprice;
}
if (calc.ram756mb.checked){
var ramprice = document.calc.ram756mb.value = ram756mbprice;
}
if (calc.ram1000mb.checked){
var ramprice = document.calc.ram1000mb.value = ram1000mbprice;
}
if (calc.ram1500mb.checked){
var ramprice = document.calc.ram1500mb.value = ram1500mbprice;
}
if (calc.ram2000mb.checked){
var ramprice = document.calc.ram2000mb.value = ram2000mbprice;
}
if (calc.ram2500mb.checked){
var ramprice = document.calc.ram2500mb.value = ram2500mbprice;
}
if (calc.ram3000mb.checked){
var ramprice = document.calc.ram3000mb.value = ram3000mbprice;
}
if (calc.ram3500mb.checked){
var ramprice = document.calc.ram3500mb.value = ram3500mbprice;
}
if (calc.ram4000mb.checked){
var ramprice = document.calc.ram4000mb.value = ram4000mbprice;
}
//VIDEO CARD - Check Boxes
if (calc.novidprice.checked){
var vidprice = document.calc.novidprice.value = novidprice;
}
if (calc.vid64mb.checked){
var vidprice = document.calc.vid64mb.value = vid64mbprice;
}
if (calc.vid128mb.checked){
var vidprice = document.calc.vid128mb.value = vid128mbprice;
}
if (calc.vid256mb.checked){
var vidprice = document.calc.vid256mb.value = vid256mbprice;
}
if (calc.vid512mb.checked){
var vidprice = document.calc.vid512mb.value = vid512mbprice;
}
if (calc.vid768mb.checked){
var vidprice = document.calc.vid768mb.value = vid768mbprice;
}
if (calc.vid1000mb.checked){
var vidprice = document.calc.vid1000mb.value = vid1000mbprice;
}
var videoprice = vidprice;
if (calc.ddr23vid.checked){
var videoprice = document.calc.ddr23vid.value = vidprice * 1.5;
}
if (calc.ddr5mb.checked){
var videoprice = document.calc.ddr5mb.value = vidprice * 2;
}
//OPTICAL DRIVES - Checkbox
if (calc.cdrom.checked){
var driveprice = document.calc.cdrom.value = cdromprice;
}
if (calc.cdrw.checked){
var driveprice = document.calc.cdrw.value = cdrwprice;
}
if (calc.cdrwdvdrom.checked){
var driveprice = document.calc.cdrwdvdrom.value = cdrwdvdromprice;
}
if (calc.cdrwdvdrw.checked){
var driveprice = document.calc.cdrwdvdrw.value = cdrwdvdrwprice;
}
//CONNECTIVITY - Checkbox
if (calc.nic.checked){
var connectprice = document.calc.nic.value = nicprice;
}
if (calc.modem.checked){
var connectprice = document.calc.modem.value = modemprice;
}
if (calc.wireless.checked){
var connectprice = document.calc.wireless.value = wirelessprice;
}
// OFFICE - Checkbox
if (calc.noffice.checked){
var officeprice = document.calc.nooffice.value = officeprice;
}
if (calc.office97.checked){
var officeprice = document.calc.office97.value = office97price;
}
if (calc.office03.checked){
var officeprice = document.calc.office03.value = office03price;
}
if (calc.office07.checked){
var officeprice = document.calc.office07.value = office07price;
}
//OPERATING SYSTEM - Checkbox
if (calc.xp.checked){
var osprice = document.calc.xp.value = xpprice;
}
if (calc.vista.checked){
var osprice = document.calc.vista.value = vistaprice;
}
if (calc.windows7os.checked){
var osprice = document.calc.windows7os.value = windows7osprice;
}
document.calc.pay.value = typeprice + processorprice + htprice + ramprice + videoprice + driveprice + connectprice + officeprice + osprice + hdprice;
}
Hello: I am using javascript validation for submitting a form. All the other fields are working except for the Terms of Use checkbox. It sends and alert and says it wasn't checked whether or not you check it. It also submits the form whether or not it is checked immediately after the alert. The field is called df_Terms. Can anyone see anything I am missing? Code:
<script>
//submit after validation functionality
function submit_onclick() {
var proceed = false;
if (typeof validateForm == "function") {
proceed = validateForm();
}
else {
proceed = true;
}
return proceed;
}
//validation functionality
function validateForm() {
if ((document.form1.df_Plans[0].checked == false) && (document.form1.df_Plans[1].checked == false)) {
alert("Please select Your Plan");
document.form1.df_Plans[0].focus();
return false;
}
if ("" == document.form1.df_first_Name1.value) {
alert("Please enter your First Name");
document.form1.df_first_Name1.focus();
return false;
}
if ("" == document.form1.df_last_Name1.value) {
alert("Please enter your Last Name.");
document.form1.df_last_Name1.focus();
return false;
}
if ("" == document.form1.df_email1.value) {
alert("Please enter your email.");
document.form1.df_email1.focus();
return false;
}
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.form1.df_email1.value;
if (strEmail.search(validRegExp) == -1) {
alert("A valid e-mail address is required.");
document.form1.df_email1.focus();
return false;
}
if (!document.form1.df_Terms.checked == 1) {
alert("Please agree to the Terms of Use.");
document.form1.df_Terms.focus();
return false;
}
}
//reset field functionality
function reset_onclick() {
for (i = 0; i < document.form1.elements.length; i++) {
if (document.form1.elements[i].type == "text") {
document.form1.elements[i].value = "";
}
if (document.form1.elements[i].type == "checkbox") {
document.form1.elements[i].checked = false;
}
if (document.form1.elements[i].type == "radio") {
document.form1.elements[i].checked = false;
}
if (document.form1.elements[i].type == "select-one") {
document.form1.elements[i].selectedIndex = 0;
}
}
}
//redirect functionality
function redirect_onclick(urlString) {
window.open("http://" + urlString);
}
</script>
Hello JScript gurus, though I am quite an advanced and experienced VB& .NET programmer, I am totally new to Jscript coding, (I don't actually code Jscript) but I build websites all the same too. I am also new here. I really need help from you gurus here. I am working on a website and I really wish to incorporate a contact or an order form to it so that when the user fills in the fields and clicks send, I receive the data in my email. I have made some searches and found quite a few but all didn't touch on how I retrieve my data. Please help me. I will be very grateful. Thank you. This is straight out of an O'Riley book, everything looks good to me but for some reason the script does nothing when I try to submit an empty form. Code: // Validate Registration Form
function validate(form) {
fail = validateUsername (form.uname.value)
fail += validateUpass (form.upass.value)
fail += validatePassword (form.password.value)
fail += validateFname (form.fname.value)
fail += validateLname (form.lname.value)
fail += validateID (form.ID.value)
fail += validateEmail (form.email.value)
if (fail =="") return true
else {alert(fail); return false }
}
function validateUsername (field) {
if (value==null||value=="") return "Please enter username.\n"
return ""
}
function validateUpass (field) {
if (field =="") return "Please enter password.\n"
return ""
}
function validatePassword (field) {
if (value == "") return "Please confirm password. \n"
return ""
}
function validateFname (field) {
if (value =="") return "Please enter a first name.\n"
return""
}
function validateLname (field) {
if (value=="") return "Please enter a last name.\n"
return""
}
function validateID (field) {
if (value=="") return "Please enter your USAC license number.\n"
return ""
}
function validateEmail (field) {
if (value=="") return "Please enter your email address.\n"
else if (!((field.indexof(".")>0) &&
(field.indexOf("@") > 0)) ||
/[^a-zA-Z0-9.@_-]/.test(field))
return "The Email address is invalid.\n"
return""
}
Code: <script src="includes/js/validate-registration-form.js"></script>
</head>
<body>
<div id="wrap">
<h1>CritTracker.com Registration page</h1>
<?php include('includes/nav.php');?>
<div id="content_wrap">
<div id="center_content">
<div id="register">
<form class="register" method="post" action="register.php" onSubmit="return validate(this)">
<fieldset>
<legend>Register to CritTracker</legend>
<ol>
<li>
<label for="uname">Username</label> <input type="text" name="uname" /><br />
</li>
<li>
<label for="upass">Password</label> <input type="password" name="upass" /><br />
</li>
<li>
<label for="upass">Confirm Password</label> <input type="password" /><br />
</li>
<li>
<label for="fname">First Name</label> <input type="text" name="fname" /><br />
</li>
<li>
<label for="lname">Last Name</label> <input type="text" name="lname" /><br />
</li>
<li>
<label for="ID">USA Cycling License</label> <input type="text" name="ID" />
<select name="cat">
<option name="cat" value="5">Cat 5</option>
<option name="cat" value="4">Cat 4</option>
<option name="cat" value="3">Cat 3</option>
<option name="cat" value="2">Cat 2</option>
<option name="cat" value="1">Cat 1</option>
</select>
</li>
<li>
<label for="email">Email</label> <input type="text" name="email" /><br />
<input type="submit" value="Register to CritTracker.com" />
</li>
</ol>
</fieldset>
</form>
</div></div>
Hi, Please this form code is not working,please help correct me with the right code. When i did not enter anything onthe field require ,thealert does not pop up making the form inaccurate. Code: <script type="text/javascript">
function validateForm()
{
function CheckEmail()
var x=document.frmone.email.value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if(atpos<1 || dotpos<atpos+2 ||x.length>30){
alert("not a valide email address");
return false
}
function CheckUsername()
{
var x=document.frmone.fname.value;
if(x==null || x==""){
alert("username is required");
return false
}
}
</script>
<form name="frmone" method="post" action="" onsubmit="validateForm()"/>
<input type="text" name="email"/>
<input type="submit" name="submit"/>
<input type="text" name="fname"/>
<input type="submit" name="submit"/>
</form>
Help me. Thanks. Clement Osei. I have been working on a JavaScript form with validation and I cant get it to work right. The form is supposed to validate the name, E-mail, Phone number, Password and confirmation, Drop-down selection, Question reply, yes and no radios, and 3 preferences check-boxes. It is also supposed to verify that the passwords match, not allow any letters or special characters in the phone number box, and remove the default text when a user clicks on the Name, E-mail, and Question reply boxes. I've been checking over the code for almost a month now and I can't figure out why it is not working. This is my entire code. [CODE] <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Contact</title> <script type="text/javascript"> /* <![CDATA[ */ function onlyDigits(objtextbox) { var exp = /[^\d]/g; objtextbox.value = objtextbox.value.replace(exp,""); } function textdisappear(txt) { if (txt.value == txt.defaultValue) { txt.value = "" } function passmatch() { if (document.forms[0].psswrd2.value != document.forms[0].psswrd1.value) { window.alert("You did not enter the same password!"); document.forms[0].psswrd1.focus(); } function validate() { var name = document.form1.Name; var email = document.form1.Email; var phone = document.form1.Telephone; var question = document.form1.selection; var reply = document.form1.questionreply var word1 = document.form1.psswrd1 var word2 = document.form1.psswrd2 var chkradio = false; var chkbox = false; if (name.value == "") { window.alert("Name please."); name.focus(); return false; } if (email.value == "") { window.alert("E-mail is blank."); email.focus(); return false; } if (email.value.indexOf("@", 0) < 0) { window.alert("Enter valid e-mail please."); email.focus(); return false; } if (email.value.indexOf(".", 0) < 0) { window.alert("Enter valid e-mail please."); email.focus(); return false; } if ((phone.value == "")) { window.alert("Telephone number please."); phone.focus(); return false; } if (word1.value == "") { window.alert("Password please."); word1.focus(); return false; } if (word2.value == "") { window.alert("Re-type password please."); word2.focus(); return false; } if (question.selectedIndex < 1) { alert("Choose question please."); question.focus(); return false; } if (reply.value == "" || reply.value == "Question reply") { window.alert("Question reply please."); reply.focus(); return false; } for (var i=0; i<2; ++i) { if (document.form1.confirmreply.checked == true) { chkradio = true; break; } if (chkradio != true) { window.alert("Yes or no please."); confirmrelpy.focus(); return false; } for (var i=0; i<3; ++i) { if (document.form1.hobby.checked == true) { chkbox = true; break; } if (chkbox != true) { window.alert("Choose preference."); hobby.focus(); return false; } return true; } /* ]]> */ </script> </head> <body> <center><h1>Contact</h1></center> <form method="post" action="mailto:someemail@somedomain.com" name="form1" onsubmit="return validate();"> <h3>Your Details</h3> <p>Name:* <input type="text" name="Name" value="Enter Name" onfocus="textdisappear(this)" ></p> <p>E-mail:* <input type="text" name="Email" value="Enter E-mail" onfocus="textdisappear(this)" ></p> <p>Phone Number:* <input type="text" name="Telephone" onkeyup="onlyDigits(this)"><br> <br /> <h3>Password and Secret Question</h3> Password:<br /> <input type="password" name="psswrd1" value="" />*<br /> Confirm:<br /> <input type="password" name="psswrd2" value="" onblur="passmatch()" />*<br /> <p>Choose a question:*<br /> <select type="text" value="" name="selection"> <option> </option> <option>Where was your elementary school?</option> <option>Who was the first person you ever kissed?</option> <option>What was your first car?</option> <option>Who is your favorite author?</option> </select><br /> reply<br /> <input type="text" name="questionreply" value="Question reply" onfocus="textdisappear(this)" />*<br /> <h3>Offers</h3> Do you want any special offers sent to you?*<br /> Yes<input type="radio" name="confirmreply" value="Yes"/>No<input type="radio" name="confirmreply" value="No" /> <h3>Which preference do you have?*</h3> <input type="checkbox" name="hobby" value="check"/>Inside Activities<br /> <input type="checkbox" name="hobby" value="check"/>Outside Activities<br /> <input type="checkbox" name="hobby" value="check"/>Both<br /> <br /> <p><input type="submit" value="Submit" name="submit" /> <input type="reset" value="Reset" name="reset"></p> </form> </body> </html> [CODE] Hi there! I hope someone can help me figure out the last little bit of this project. I'm building a form that is calulated based on the options selected with a javascript form. This is my first attempt at something like this so I'm a bit lost at the final update. First to be sure I'm on spot here is the javascript I'm using to update the form - Code: <script>
function BDWcalc ()
{
var listeners = document.getElementById('listeners').value;
var bitrate = document.getElementById('bitrate').value;
var hours = document.getElementById('hours').value;
var days = document.getElementById('days').value;
var total = document.getElementById('BDWTotal');
var sum = days*hours*3600*bitrate/8*listeners/1024/1024;
total.value = sum.toFixed(2)+" GB";
}
</script>
I'm calling the script in the header of the site with the following line of code Code: <script type="text/javascript" language="JavaScript" src='javascript/BDWcalc.js'></script> Now here is the form where I get stuck. It the last field which is to be updated when the option values are changed. For my purposes here, I've merely created a correct value as a default based on the items selected, but it is not actually being calculated by the script. I need the correct syntax there to get this all to work. Sure hope someone can help - Form Code: <table width="530" border="0" cellspacing="0" cellpadding="5">
<tr>
<th scope="col">Listeners</th>
<th scope="col">Bitrate(quality)</th>
<th scope="col">Hours per day </th>
<th scope="col">Days per month </th>
<th scope="col">Total per month </th>
<th scope="col">Action</th>
</tr>
<tr>
<th scope="col"><span class="cell" style="width: 75px;">
<input name="text" type="text" id="listeners" style="margin: 4px 2px 0pt; width: 65px;" onchange="BDWcalc();" value="10" size="20" />
</span></th>
<th scope="col"><span class="cell_v">
<select name="select2" class="BDWbox" id="select" onchange="BDWcalc();">
<option value="24">24 kbps</option>
<option value="32">32 kbps</option>
<option value="48">48 kbps</option>
<option value="56">56 kbps</option>
<option value="64" selected="selected">64 kbps</option>
<option value="80">80 kbps</option>
<option value="96">96 kbps</option>
<option value="112">112 kbps</option>
<option value="128">128 kbps</option>
<option value="160">160 kbps</option>
<option value="192">192 kbps</option>
<option value="224">224 kbps</option>
<option value="256">256 kbps</option>
<option value="320">320 kbps</option>
<option value="512">512 kbps</option>
<option value="768">768 kbps</option>
<option value="1536">1.5 mbps</option>
</select>
</span></th>
<th scope="col"><span class="cell_v">
<select name="select3" class="BDWbox" id="select2" onchange="BDWcalc();">
<option value="1">1 hour</option>
<option value="2">2 hours</option>
<option value="3">3 hours</option>
<option value="4">4 hours</option>
<option value="5">5 hours</option>
<option value="6">6 hours</option>
<option value="7">7 hours</option>
<option value="8">8 hours</option>
<option value="9">9 hours</option>
<option value="10" selected="selected">10 hours</option>
<option value="11">11 hours</option>
<option value="12">12 hours</option>
<option value="13">13 hours</option>
<option value="14">14 hours</option>
<option value="15">15 hours</option>
<option value="16">16 hours</option>
<option value="17">17 hours</option>
<option value="18">18 hours</option>
<option value="19">19 hours</option>
<option value="20">20 hours</option>
<option value="21">21 hours</option>
<option value="22">22 hours</option>
<option value="23">23 hours</option>
<option value="24">24 hours</option>
</select>
</span></th>
<th scope="col"><span class="cell_v">
<select name="select4" class="BDWbox" id="select3" onchange="BDWcalc();">
<option value="1">1 day</option>
<option value="2">2 days</option>
<option value="3">3 days</option>
<option value="4">4 days</option>
<option value="5">5 days</option>
<option value="6">6 days</option>
<option value="7">7 days</option>
<option value="8">8 days</option>
<option value="9">9 days</option>
<option value="10">10 days</option>
<option value="11">11 days</option>
<option value="12">12 days</option>
<option value="13">13 days</option>
<option value="14">14 days</option>
<option value="15" selected="selected">15 days</option>
<option value="16">16 days</option>
<option value="17">17 days</option>
<option value="18">18 days</option>
<option value="19">19 days</option>
<option value="20">20 days</option>
<option value="21">21 days</option>
<option value="22">22 days</option>
<option value="23">23 days</option>
<option value="24">24 days</option>
<option value="25">25 days</option>
<option value="26">26 days</option>
<option value="27">27 days</option>
<option value="28">28 days</option>
<option value="29">29 days</option>
<option value="30">30 days</option>
</select>
</span></th>
<th scope="col"><span class="cell_v" style="width: 160px;">
<input name="text2" type="text" id="text2" style="margin: 4px 2px 0pt; width: 90px;" value="41.19 GB" size="20" />
</span></th>
<th scope="col"><a href='javascript:BDWcalc();'>Update</a></th>
</tr>
</table>
The form can be view here Thank you in advance for any help offered. I've search and found things that are similiar, but none that are exactly what I need here. Ruth |
|||||||