|
JavaScript - Form Calculation Using Javascript Not Working
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 Similar TutorialsCan someone PLEASE show me what I am doing wrong with my code here? Basically, I have a registration form. In this registration form, I have 4 people register. It depends on each person birthyear to determine the amount of fees for each person. The fees a Registration Fee, Hotel Fee, Meal Fee, Discount Also, the trick is only first and second persons get Hotel Fee and Discount Fee. Third and Fourth person only pay Registration Fee and Meal Fee. So when user select birthyear from a dropdown menu for each person, the fees will be automatically filled in the input fields for each person and then do a total calculation. Each person will have a total of fees and there is another total field to automatically total up all 4 total fields from those 4 people. So here is my code so far Javascript Code: <script type="text/javascript">
function doUpdate(year, num)
{
if (isNaN(year)) return;
var regfee = '0';
var meal = '0';
var hotel = '0';
//REGISTRATION Price
if (year >= 2000)
{
regfee = '0';
}
else if (year < 2000 && year > 1995 )
{
regfee = '20';
}
else
{
regfee = '30';
}
//MEAL Price
if (year < 2001)
{
meal = '80';
}
else if (year >= 2001 && year <= 2009)
{
meal = '60';
}
else
{
meal = '0';
}
// HOTEL Price
if(document.getElementById('year1').value!='')
{
hotel='199';
}
else if (document.getElementById('year2').value!='')
{
hotel='199';
}
//DISCOUNT Price
if (document.getElementById('vip'+num).checked==true)
{
if (year > 1993)
{
discount = '0';
}
else if (year == 1993)
{
discount = '0';
}
else
{
discount = '-20';
}
}
else
{
if (year > 1993)
{
discount = '0';
}
else if (year == 1993)
{
discount = '0';
}
else
{
discount = '-10';
}
}
document.getElementById('regfee' + num).value = regfee;
document.getElementById('meal' + num).value = meal;
if(document.getElementById('year1').value!=''){
document.getElementById('hotel1').value = hotel;
document.getElementById('discount1').value = discount;
//Write to total field for second person
document.getElementById('total1').value = parseInt(regfee)+parseInt(meal)+parseInt(hotel)+parseInt(discount);
}
if(document.getElementById('year2').value!=''){
document.getElementById('hotel2').value = hotel;
document.getElementById('discount2').value = discount;
//Write to total field for second person
document.getElementById('total2').value = parseInt(regfee)+parseInt(meal)+parseInt(hotel)+parseInt(discount);
}
if(document.getElementById('year3').value!='' && document.getElementById('year4').value!=''){
document.getElementById('hotel3').value == '0';
document.getElementById('discount3').value == '0';
document.getElementById('hotel4').value == '0';
document.getElementById('discount4').value == '0';
// Write to total fields for third and fourth person
document.getElementById('total3').value = parseInt(regfee)+parseInt(meal);
document.getElementById('total4').value = parseInt(regfee)+parseInt(meal);
}
// Write to subtotal field by sum up all 4 total fields
document.getElementById('subtotal1').value = parseInt(document.getElementById('total1').value) + parseInt(document.getElementById('total2').value) + parseInt(document.getElementById('total3').value) + parseInt(document.getElementById('total4').value);
}
</script>
and here is my form Code: <form action="form.html" method="post" class="js_submit" name="form1" id="form1"> <table> <tr> <td>VIP</td> <td>Birthyear</td> <td>Registration Fee</td> <td>Hotel Fee</td> <td>Meal Fee</td> <td>Discount</td> <td>Total</td> </tr> <!-----------First Persion -------------------> <tr> <td><input type="checkbox" name="vip1" id="vip1" value="Y" class="inpt_c" /></td> <td><select name="year1" id="year1" onchange='doUpdate(this.value * 1,1);'> <option selected="selected"></option> <option value="2011">2011<option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> </select></td> <td><input type="text" id="regfee1" name="regfee1" class="inpt_a" value=""/></td> <td><input type="text" value="" id="hotel1" name="hotel1" class="inpt_a" /></td> <td><input type="text" value="" id="meal1" name="meal1" class="inpt_a" /></td> <td><input type="text" value="" id="discount1" name="discount1" class="inpt_a"/></td> <td><input type="text" value="" id="total1" name="total1" class="inpt_a" /></td> </tr> <!------------Second Person -----------------> <tr> <td><input type="checkbox" name="vip2" id="vip2" value="Y" class="inpt_c" /></td> <td><select name="year2" id="year2" onchange='doUpdate(this.value * 1,2);'> <option selected="selected"></option> <option value="2011">2011<option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> </select></td> <td><input type="text" id="regfee2" name="regfee2" class="inpt_a" value=""/></td> <td><input type="text" value="" id="hotel2" name="hotel2" class="inpt_a" /></td> <td><input type="text" value="" id="meal2" name="meal2" class="inpt_a" /></td> <td><input type="text" value="" id="discount2" name="discount2" class="inpt_a"/></td> <td><input type="text" value="" id="total2" name="total2" class="inpt_a" /></td> </tr> <!-----------Third Person -------------------> <tr> <td><input type="checkbox" name="vip3" id="vip3" value="Y" class="inpt_c" /></td> <td><select name="year3" id="year3" onchange='doUpdate(this.value * 1,3);'> <option selected="selected"></option> <option value="2011">2011<option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> </select></td> <td><input type="text" id="regfee3" name="regfee3" class="inpt_a" value=""/></td> <td><input type="text" value="" id="hotel3" name="hotel3" class="inpt_a" /></td> <td><input type="text" value="" id="meal3" name="meal3" class="inpt_a" /></td> <td><input type="text" value="" id="discount3" name="discount3" class="inpt_a"/></td> <td><input type="text" value="" id="total3" name="total3" class="inpt_a" /></td> </tr> <!----------Fourth Person --------------------> <tr> <td><input type="checkbox" name="vip4" id="vip4" value="Y" class="inpt_c" /></td> <td><select name="year1" id="year1" onchange='doUpdate(this.value * 1,4);'> <option selected="selected"></option> <option value="2011">2011<option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> </select></td> <td><input type="text" id="regfee4" name="regfee4" class="inpt_a" value=""/></td> <td><input type="text" value="" id="hotel4" name="hotel4" class="inpt_a" /></td> <td><input type="text" value="" id="meal4" name="meal4" class="inpt_a" /></td> <td><input type="text" value="" id="discount4" name="discount4" class="inpt_a"/></td> <td><input type="text" value="" id="total4" name="total4" class="inpt_a" /></td> </tr> <!------------Subtotal of all 4 totals above ------------> <tr> <td colspan="6"> <input name="subtotal1" type="text" id="subtotal1" class="inpt_a" value="" readonly="readonly" /></td> </tr> </form> Here is my form URL: http://daihoibaptit.org/form.html Thanks for your help Hi 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>
Hi everyone, I am new to Javascript and took a class or 2 in college, but need some help. I need to make a calculation for a webpage that will do the following: Client will insert AWG (wire ) Size, then it will derive the correct Circular Mils that the AWG is equal to from an Access Database ( I assume this is the way to set that up or if I can in Javascript itself, thats fine as well ), then Multiply it by the Number of Strands that the Client will also insert. I had this all set up in Visual Basic and working great, and my boss said he does not want it in a pop up box but prefers it on the website itself hence me reverting to Javascript for this. To visualize it Image 2 boxes with AWG and STRANDS that the client will put in, then another box with TOTAL CMA where the answer will pop up after it has multipled by the AWG individual CMA and number of Strands. I have the general idea to set it up, just do not know how to get the Database in there and Code it properly or whatever. I would appreciate any assistance I can get :-) Thanks everyone. Hi, I'm trying to get my head around JS, but not too successfully yet. My objective is probably simple (but not to me ): to have a form where visitors enter 12 separate digits (ideally in minutes & hours, but am happy to use decimals), and the average of these (to two decimal points) is returned as document.write is it? - along with other text, to make a complete & coherent sentence, including the average of the 12 numbers. Does anyone have any code convenient that could do this? Thanks, LJ All, Below find my JS which is supposed to do the following: Take user supplied numerical values from 7 fields, perform the calculation function that's in the code and place it into the Total box / field. Needless to say ...or I wouldn't be here...it doesn't work. I thought maybe the problem was in the function, but I'm not sure Thanks to all who can help! NewbieScott ================================ <html> <head> <title>Test Prototype</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> * { margin:0; padding:0; } body { background:#fff; } p { margin:2em; } </style> <script type="text/javascript"> function calc(D1,D2,D3,D4,D5,D6,D7){ return (((D1*2.036+D3)/(273+D5))-((D2*2.036+D4)/(273+D6)))*238*(3050/D7); var D1=parseInt(D1.value); var D2=parseInt(D2.value); var D3=parseInt(D3.value); var D4=parseInt(D4.value); var D5=parseInt(D5.value); var D6=parseInt(D6.value); var D7=parseInt(D7.value); if (isNaN(D1)) {D1=0;} if (isNaN(D2)) {D2=0;} if (isNaN(D3)) {D3=0;} if (isNaN(D4)) {D4=0;} if (isNaN(D5)) {D5=0;} if (isNaN(D6)) {D6=0;} if (isNaN(D7)) {D7=0;} document.getElementById('total').value = D1+D2+D3+D4+D5+D6+D7; } window.onload=function() { var D1=document.getElementById('D1'); var D2=document.getElementById('D2'); var D3=document.getElementById('D3'); var D4=document.getElementById('D4'); var D5=document.getElementById('D5'); var D6=document.getElementById('D6'); var D7=document.getElementById('D7'); D1.onkeyup=function() {calc(D1,D2,D3,D4,D4,D6,D7); D2.onkeyup=function() {calc(D1,D2,D3,D4,D4,D6,D7); D3.onkeyup=function() {calc(D1,D2,D3,D4,D4,D6,D7); D4.onkeyup=function() {calc(D1,D2,D3,D4,D4,D6,D7); D5.onkeyup=function() {calc(D1,D2,D3,D4,D4,D6,D7); D6.onkeyup=function() {calc(D1,D2,D3,D4,D4,D6,D7); D7.onkeyup=function() {calc(D1,D2,D3,D4,D5,D6,D7); } </script> </head> <body> <form action="#"> <p><label> Number 1: <input id="D1"></label> <p><label> Number 2: <input id="D2"></label> <p><label> Number 3: <input id="D3"></label> <p><label> Number 4: <input id="D4"></label> <p><label> Number 5: <input id="D5"></label> <p><label> Number 6: <input id="D6"></label> <p><label> Number 7: <input id="D7"></label> <p>Total = <input id="total"></p> </p> </body> </html> What code must I use if I want to create an order form on my website where patrons can order and/or request a product and/or services from the price list, the order form should calculate the total amount of the products/services requested, the VAT of 15% and add that to the order amount, Please help?
Hello, javascript seems to return the calculate the follwoing: (1 / 0.88) * 4.4 = 5.000000000000001 Excel evaluates the same sum to be 5 even to 20 decimal points. My calculator does the same. Having the 1 on the end throws off some of my calculations. Why is javascript evaluating like this?? Many thanks I've designed a snippet of javascript to receive numbers, add them together, and then display the total. What i'd like to do now is display the amount of numbers added together "count", and then average them all together. Problem is, the count just won't display, so i'm uncertain if I have a logic error in my code or just an html issue? I'd really appreciate the help! Code:
<html>
<head>
<script type="text/javascript">
var count = 0;
var total = 0;
var number = 0;
function AverageNumbers(form)
{
number = document.getElementById('num1').value;
count++;
total = parseInt(number) + parseInt(total);
average = parseInt(number) + parseInt(count)
if (number!=null && number!="")
{
document.getElementById('total').innerHTML = total;
document.getElementById('count').innerHTML = count;
}
return count;
return total;
}
</script>
</head>
<body>
<form>
<INPUT TYPE="number" NAME="inputbox" ID="num1">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="AverageNumbers(this.form)">
</form>
<div id="total"><div>
<br> </br>
<div id="count"><div>
</body>
</html>
I have a javascript that should convert any date into a number between 1 and 260. Based on the outcome of that calculation, a viewer is directed to a specific web page. How can I verify the calculation? How can I see what number javascript is arriving at so I can backtrack to the error? It is not serving up the correct page. I have compared the results to a calculator on another website that uses a different script to calculate the same result -- that's why I am saying the end results are not correct. On the other website, scroll down to where you enter a date. It returns a name just above the date (example: July 25, 1970 returns Electric Star). The script I included above returns Yellow Sun. July 25, 1970 should = 68. Code: function calculate() {
if(!isValidDate())
return;
var result = 0;
var cuttingAge = 260;
var yearBox = document.getElementById("year");
var year = yearBox.value;
var month = document.getElementById("month").value;
var day = document.getElementById("day").value;
//Rule # 1
if(month==1 || month==2){
var selectedYearIndex;
for(var i=0; i<yearBox.options.length; i++){
if(yearBox.options[i].selected){
selectedYearIndex = i;
break;
}
}
year = yearBox.options[selectedYearIndex-1].value;
}
//Rule # 2
var monthLength = new Array();
monthLength[0]=0;
monthLength[1]=31;
monthLength[2]=29;
monthLength[3]=31;
monthLength[4]=30;
monthLength[5]=31;
monthLength[6]=30;
monthLength[7]=31;
monthLength[8]=31;
monthLength[9]=30;
monthLength[10]=31;
monthLength[11]=30;
monthLength[12]=31;
monthLength[13]=31;
monthLength[14]=29;
var dayPassed = 0;
var tempMonth = month;
if(month<3) //If its january or february
tempMonth = parseInt(tempMonth) +12; //Add previous year's days
for(var i=3; i<tempMonth; i++){
dayPassed += monthLength[i];
}
dayPassed += parseInt(day) -1;
dayPassed = dayPassed%cuttingAge;
//Rule # 3
result = parseInt(year) + parseInt(dayPassed);
//Rule # 4
if(result > cuttingAge)
result -= cuttingAge;
//Rule # 5
var pendant = new Array();
var abc = new Array();
pendant[0] = {
name:"imix",
values:new Array(1, 21, 41, 61, 81, 101, 121, 141, 161, 181, 201, 221, 241)
};
pendant[1] = {
name:"ik",
values:new Array(2, 22, 42, 62, 82, 102, 122, 142, 162, 182, 202, 222, 242)
};
pendant[2] = {
name:"akbal",
values:new Array(3, 23, 43, 63, 83, 103, 123, 143, 163, 183, 203, 223, 243)
};
pendant[3] = {
name:"kan",
values:new Array(4, 24, 44, 64, 84, 104, 124, 144, 164, 184, 204, 224, 244)
};
pendant[4] = {
name:"chicchan",
values:new Array(5, 25, 45, 65, 85, 105, 125, 145, 165, 185, 205, 225, 245)
};
pendant[5] = {
name:"cimi",
values:new Array(6, 26, 46, 66, 86, 106, 126, 146, 166, 186, 206, 226, 246)
};
pendant[6] = {
name:"manik",
values:new Array(7, 27, 47, 67, 87, 107, 127, 147, 167, 187, 207, 227, 247)
};
pendant[7] = {
name:"lamat",
values:new Array(8, 28, 48, 68, 88, 108, 128, 148, 168, 188, 208, 228, 248)
};
pendant[8] = {
name:"muluk",
values:new Array(9, 29, 49, 69, 89, 109, 129, 149, 169, 189, 209, 229, 249)
};
pendant[9] = {
name:"oc",
values:new Array(10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210, 230, 250)
};
pendant[10] = {
name:"chuen",
values:new Array(11, 31, 51, 71, 91, 111, 131, 151, 171, 191, 211, 231, 251)
};
pendant[11] = {
name:"eb",
values:new Array(12, 32, 52, 72, 92, 112, 132, 152, 172, 192, 212, 232, 252)
};
pendant[12] = {
name:"ben",
values:new Array(13, 33, 53, 73, 93, 113, 133, 153, 173, 193, 213, 233, 253)
};
pendant[13] = {
name:"ix",
values:new Array(14, 34, 54, 74, 94, 114, 134, 154, 174, 194, 214, 234, 254)
};
pendant[14] = {
name:"men",
values:new Array(15, 35, 55, 75, 95, 115, 135, 155, 175, 195, 215, 235, 255)
};
pendant[15] = {
name:"cib",
values:new Array(16, 36, 56, 76, 96, 116, 136, 156, 176, 196, 216, 236, 256)
};
pendant[16] = {
name:"caban",
values:new Array(17, 37, 57, 77, 97, 117, 137, 157, 177, 197, 217, 237, 257)
};
pendant[17] = {
name:"etznab",
values:new Array(18, 38, 58, 78, 98, 118, 138, 158, 178, 198, 218, 238, 258)
};
pendant[18] = {
name:"cauac",
values:new Array(19, 39, 59, 79, 99, 119, 139, 159, 179, 199, 219, 239, 259)
};
pendant[19] = {
name:"ahau",
values:new Array(20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260)
};
var redirecctPages = new Array();
redirecctPages["chuen"] = "http://store.mayankin.com/blue-monkey/";
redirecctPages["eb"] = "http://store.mayankin.com/yellow-human/";
redirecctPages["ben"] = "http://store.mayankin.com/red-skywalker/";
redirecctPages["ix"] = "http://store.mayankin.com/white-wizard/";
redirecctPages["men"] = "http://store.mayankin.com/blue-eagle/";
redirecctPages["cib"] = "http://store.mayankin.com/yellow-warrior/";
redirecctPages["caban"] = "http://store.mayankin.com/red-earth/";
redirecctPages["etznab"] = "http://store.mayankin.com/white-mirror/";
redirecctPages["cauac"] = "http://store.mayankin.com/blue-storm/";
redirecctPages["ahau"] = "http://store.mayankin.com/yellow-sun/";
redirecctPages["imix"] = "http://store.mayankin.com/red-dragon/";
redirecctPages["ik"] = "http://store.mayankin.com/white-wind/";
redirecctPages["akbal"] = "http://store.mayankin.com/blue-night/";
redirecctPages["kan"] = "http://store.mayankin.com/yellow-seed/";
redirecctPages["chicchan"] = "http://store.mayankin.com/red-serpent/";
redirecctPages["cimi"] = "http://store.mayankin.com/white-world-bridger/";
redirecctPages["manik"] = "http://store.mayankin.com/blue-hand/";
redirecctPages["lamat"] = "http://store.mayankin.com/yellow-star/";
redirecctPages["muluk"] = "http://store.mayankin.com/red-moon/";
redirecctPages["oc"] = "http://store.mayankin.com/white-dog/";
var pendantName;
for(var i =0; i<pendant.length; i++){
var found = false;
for(var j=0; j<pendant[i].values.length; j++){
if(result == pendant[i].values[j]){
pendantName = pendant[i].name;
found = true;
break;
}
}
if(found)
break;
}
document.location = redirecctPages[pendantName];
}
/**
* Comment
*/
function isValidDate() {
var year = document.getElementById("year").value;
var month = document.getElementById("month").value;
var day = document.getElementById("day").value;
if(month==2 && day>29){
alert("Please select a valid date");
return false
}
if((month==4 || month==6 || month==9 || month==11) && day>30){
alert("Please select a valid date");
return false
}
return true;
}
Hello, I am trying to make a page with a target heart rate calculator that displays the heart rate in a text box. This code displays on a new page instead of in the box even though I put an input box, plus it doesn't display the correct value. I think the problem is in the function itself: Code: <script>
function calcHeartRate()
{
var age = ""
var heartRate = 220 - age
var minRate = heartRate * .5
var maxRate = heartRate * .85
rate = document.write(heartRate)
document.myForm.yourRate.value = rate
}
At any rate, here is the form also: Code: <form name = "myForm"> Age:</br> <input type = "text" name = "age" /><br/><br/> <input type = "button" value = "Calculate Your Maximum Heart Rate:" onclick= "calcHeartRate()"/> <br/><br/> Max Heart Rate:<br/> <input type = "text" name = "yourRate" /><br/><br/> </form> I'm sure this is jacked up code since I have definitely been struggling. If you want me to post my entire code, I will, but it is my understanding that it is against the guidelines. Posting a working code is definitely not necessary. Please give me an idea as to what is wrong and I will go from there. I do not want the actual answer. I kind of think the problem is with my age variable but I am not sure what it is. Thanks! 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>
I'm building an order form for a food delivery business website and I'm struggling of getting the page to display the total prices of the items on the order page before the order is sent. The form ideally consists of: Product 1 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) Product 2 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) ..... Product n - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) Total price: (sum of all selected multiplied by the single prices) Name Telephone Address Postal Code Comment SUBMIT BUTTON What I have so far is: HTML: 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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>COMIDA GREGA OLYMPO</title>
<style type="text/css">
.Subheader {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: large;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
}
.Header {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: x-large;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
text-decoration: none;
}
.auto-style1 {
text-align: center;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
box-shadow: 0 1px 7px rgba(0,0,0,0.6);
-o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
}
.auto-style2 {
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body class="Subheader" style="background-image: url('bg.png')">
<p><br />
</p>
<table align="center" style="width: 940px" bgcolor="white" class="auto-style2">
<tr>
<td style="height: 33px"><span class="Header">HEADER IMAGE + LOGO</span></td>
</tr>
<tr>
<td style="height: 33px">
<table style="width: 100%">
<tr>
<td class="auto-style1" style="width: 17%">
<a href="#prediastia">ПРЕДЯСТИЯ</a></td>
<td class="auto-style1" style="width: 17%"><a href="#osnovni">
ОСНОВНИ</a></td>
<td class="auto-style1" style="width: 17%"><a href="#deserti">
ДЕСЕРТИ</a></td>
<td class="auto-style1" style="width: 17%"><a href="#napitki">
НАПИТКИ</a></td>
<td class="auto-style1" style="width: 17%"><a href="order.html">ПОРЪЧАЙ</a></td>
<td class="auto-style1" style="width: 15%">КОНТАКТИ</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<form name="contactform" method="post" action="send_form_email.php">
<table width="750px" align="center">
<tr>
<td valign="top" width="40%">
<label for="first_name">ГРЪЦКА САЛАТА</label>
</td>
<td valign="top" width="30%">
<input type="number" placeholder="0" name="gruckasalata" maxlength="5" size="5">
</td>
<td width="30%"><img class="fancybox" alt="" height="42" src="grucka-salata.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
</td>
</tr>
<tr>
<td valign="top" width="40%">
<label for="first_name">МУСАКА</label>
</td>
<td valign="top" width="30%">
<input type="number" placeholder="0" name="musaka" maxlength="5" size="5">
</td>
<td width="30%"><img class="fancybox" alt="" height="42" src="musaka.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
</td>
</tr>
<tr>
<td valign="top" width="40%">
<label for="first_name">ПЪЛНЕНИ ЧУШКИ</label>
</td>
<td valign="top" width="30%">
<input type="number" placeholder="0" name="pulnenichushki" maxlength="5" size="5">
</td>
<td width="30%"><img class="fancybox" alt="" height="42" src="palneni_chushki26.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
</td>
</tr>
<tr>
<td valign="top" width="40%">
<label for="first_name">СВИНСКО СЪС ЗЕЛЕ</label>
</td>
<td valign="top" width="30%">
<input type="number" placeholder="0" name="svinskosuszele" maxlength="5" size="5">
</td>
<td width="30%"><img class="fancybox" alt="" height="42" src="zele-sus-svinsko.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
</td>
</tr>
<tr>
<td valign="top">
<label for="first_name">Name *</label>
</td>
<td valign="top">
<input type="text" name="name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number *</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Address *</label>
</td>
<td valign="top">
<textarea name="address" maxlength="1000" cols="45" rows="6"></textarea>
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Postal Code *</label>
</td>
<td valign="top">
<input type="text" name="postalcode" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="45" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form></td>
</tr>
<tr>
<td><span class="Header">FOOTER</span></td>
</tr>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = false;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
</body>
</html>
and the PHP: PHP Code: <?php if(isset($_POST['email'])) { // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = "georgi.pepelyankov@gmail.com"; $email_subject = "COMIDA GREGA ORDER"; function died($error) { // your error code can go here echo "We are very sorry, but there were error(s) found with the form you submitted. "; echo "These errors appear below.<br /><br />"; echo $error."<br /><br />"; echo "Please go back and fix these errors.<br /><br />"; die(); } // validation expected data exists if(!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['telephone']) || !isset($_POST['address']) || !isset($_POST['postalcode']) || !isset($_POST['gruckasalata']) || !isset($_POST['musaka']) || !isset($_POST['pulnenichushki']) || !isset($_POST['svinskosuszele']) || !isset($_POST['comments'])) { died('We are sorry, but there appears to be a problem with the form you submitted.'); } $name = $_POST['name']; // required $gruckasalata = $_POST['gruckasalata']; // not required $musaka = $_POST['musaka']; // not required $pulnenichushki = $_POST['pulnenichushki']; // not required $svinskosuszele = $_POST['svinskosuszele']; // not required $email_from = $_POST['email']; // required $telephone = $_POST['telephone']; // required $address = $_POST['address']; // required $postal_code = $_POST['postalcode']; // required $comments = $_POST['comments']; // not required $error_message = ""; $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; if(!preg_match($email_exp,$email_from)) { $error_message .= 'The Email Address you entered does not appear to be valid.<br />'; } if(strlen($error_message) > 0) { died($error_message); } $email_message = "Form details below.\n\n"; function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $email_message .= "ГРЪЦКА САЛАТА: ".clean_string($gruckasalata)."\n"; $email_message .= "МУСАКА: ".clean_string($musaka)."\n"; $email_message .= "ПЪЛНЕНИ ЧУШКИ: ".clean_string($pulnenichushki)."\n"; $email_message .= "СВИНСКО СЪС ЗЕЛЕ: ".clean_string($svinskosuszele)."\n"; $email_message .= "Name: ".clean_string($name)."\n"; $email_message .= "Email: ".clean_string($email_from)."\n"; $email_message .= "Telephone: ".clean_string($telephone)."\n"; $email_message .= "Address: ".clean_string($address)."\n"; $email_message .= "Postal Code: ".clean_string($postalcode)."\n"; $email_message .= "Comments: ".clean_string($comments)."\n"; // create email headers $headers = 'From: '.$email_from."\r\n". 'Reply-To: '.$email_from."\r\n" . 'X-Mailer: PHP/' . phpversion(); @mail($email_to, $email_subject, $email_message, $headers); ?> <!-- include your own success html here --> Thank you for contacting us. We will be in touch with you very soon. <?php } ?> Please, can you help me integrate a total of all the selected prices to be displayed somewhere in the form? Thanks in advance! Regards, Georgi I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!="");
That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()">
</body>
<div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;">
<img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/>
Loading...
</div>
</html>
formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> |
|||||||