|
JavaScript - Html Form Messing Up Javascript
This is the weirdest thing I've come across in awhile. I have some code that formats a input field for a date format. This code runs fine on all browser when the form tag isn't wrapped around the inputs. The second I wrap the form tag around the inputs everything messes up. The Javascript error I'm getting is "Object doesn't support this property or method." on line 45 which is the line of the date input field. I'm totally clueless what I'm doing wrong here. And so I'll leave it up to you the wonderful community to give me some help.
Thanks, Jon W Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html leng="en">
<head>
<script type="text/javascript">
function dob(val,e) {
if(e.keyCode != 8) {
if(val.length == 2 || val.length == 5) {
if(val.match(/[\/]$/) != "/") {
document.getElementById('dob').value += "/";
}
}
var regex = /[a-zA-Z]|\+|\-|\&|\\|\(|\)|\%\|\$|\#|\@|\*|\_|\?|\>|\<|\,|\./;
if(val.match(regex)) {
newStr = val.replace(regex,'');
document.getElementById('dob').value = newStr;
}
}
}
</script>
<style type="text/css">@import url(/css/home.css);</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><a href="/index.php"><img src="/images/logo.png" /></a></div>
</div>
<div id="container-arrow"></div>
<div id="container">
<img src="/images/no_image.png" />
<div id="sign-container">
<span class="sign-header">
Sign Up
</span>
<div id="sign-arrow-up"></div>
<div id="sign-content">
<form method="post" action="/account/index.php" name="sign">
<label for="email">Email</label><input name="email" class="sign-inputs" type="text" />
<p>
</p>
<label for="password">Password</label><input name="password" class="sign-inputs" type="password" />
<p>
</p>
<label for="dob">Date Of Birth</label>
<input type="text" name="dob" style="text-align:center;" maxlength="10" class="sign-inputs" id="dob" value="MM/DD/YYY" onkeyup="dob(this.value,event);" onkeydown="dob(this.value,event);" onfocus="if(this.value=='MM/DD/YYY') this.value='';" title="MM/DD/YYY" />
<p>
</p>
<input name="submit" type="submit" class="sign-submit" value="Sign Up" />
</form>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Similar TutorialsFor part of a project, I'm trying to create an order form with a real-time calculator (so, for example, if you enter in a quantity of a product into a form input box, it will multiply that quantity with the price of the product and display the total price in a different form input box). Most of the code works, in the sense that when I press the submit button on the form, I can see all of the values of each of the form input boxes in the address bar. However, when I wrote a function that sums all of the individual total prices into a final price and displays that in another form input box, pressing the submit button no longer puts the value of each field into the address bar. (In effect, everything works if I remove this code...but I really want to include it, since it seems like such a logical part of my intentions with this webpage.) Here's the function that I'm trying to get to work with the form. ("orderform" is the name of the form, and all of the "t#"s are the individual total prices that I'm trying to sum.) I know this code is probably far from the most efficient solution, but as long as it works...ahaha... Code:
function totaled(){
b = parseInt(document.orderform["t0"].value);
c = parseInt(document.orderform["t1"].value);
d = parseInt(document.orderform["t2"].value);
e = parseInt(document.orderform["t3"].value);
f = parseInt(document.orderform["t4"].value);
g = parseInt(document.orderform["t5"].value);
h = parseInt(document.orderform["t6"].value);
i = parseInt(document.orderform["t7"].value);
j = parseInt(document.orderform["t8"].value);
a = b+c+d+e+f+g+h+i+j;
document.orderform["total"].value = a;
}
Could anyone help me out, in explaining why my code is messing up the form submission? And I really really apologize if anyone out there is appalled by some ignorance of mine - I'm only just starting to learn how to use JavaScript. (Also, I'm sorry if I referred to things with the wrong terms and confused anyone. I'm not too good with proper naming either.) Oh, right! Just wanted to add, the code does exactly what it's supposed to do (minus the messed up form submission) and nothing comes up in the Error Console when I open my webpage, so there's no help to be found there. (I doubt that was actually helpful, but just in case...) At least, I think it is. On my test site (http://goo.gl/P4SLu), you'll see that the URL first goes to "emineer.com/thesis/," but then quickly changes to "emineer.com/thesis/#page=tabsservices" which refers to a piece of .js I have lower on the page (the tabbed navigation). Is there a way for me to configure this js or CSS so that the URLs are unchanged? I know it's possible because my main site functions perfectly fine: (emineer.com). The code on my main site is just clunky so I decided to start from scratch. Any help here? I'd really like my URLs clean and free of any tags or anything like that. Thanks, Brandon I'm trying to create a demo to display a new way of showing our data. I thought I remembered this being pretty simple but I'm hitting a snag. The table, the mouse over, and the check row by clicking on the row all work separately but when the check row by clicking function is on, seen in the first row, the checkbox stops working. Any insight into why this may be true? Any help is greatly appreciated Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function selectRow(row) {
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
</script>
</head>
<body>
<table id="tbl" border="2">
<thead>
<tr>
<td></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr onclick="selectRow(this)" onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
OK, a friend and I have been working on implementing the javascript slider you see in the header of my website http://www.billboardfamily.com (hover over the facebook icon under the search area). For some reason, this is causing a lot of the other items on the site to stop functioning all together. Can anyone help me figure out how to fix this? NOTE: Running Wordpress Here are some of the problems: 1) http://billboardfamily.com/videos/ The thumbnail videos do not work when you click them 2) http://billboardfamily.com/the-process/ All 4 slides are on the page, but the slider is not working at all. 3) http://billboardfamily.com/contact-us/ The contact forms I have running are not working correctly, and the styling is no longer correct. Hey guys, I've never use JavaScript before so bare with me. But, I have a registration form, and I want to have a location field in it, and then a region field that changes depending on what the user set as their location. But, I cannot get it to work, and I have no idea of how to go about doing it. Here is the JavaScript I have been using so far: Code: function toggleTable(select)
{
if(select.value == "uk")
{
select.value = "uk";
document.getElementById("region2").style.visibility = "collapse";
document.getElementById("region1").style.visibility = "visible";
}
else if(select.value == "usa")
{
select.value = "usa";
document.getElementById("region1").style.visibility = "collapse";
document.getElementById("region2").style.visibility = "visible";
}
}
and it does show the right region depending on what the user inputed, but when the page loads, all the fields show up until the user click on the location field, here is the code for that so you can test it out: Code: <tr><td>Location: </td><td><select name="location" onclick="toggleTable(this);">
<option value="none">Please Select One</option>
<option value="uk">UK</option>
<option value="usa">USA</option>
</select></td></tr>
<tr id="region1"><td>Region: </td><td>
<select name="region">
<option value="uk1">uk1</option>
<option value="uk2">uk2</option>
</select></td></tr>
<tr id="region2"><td>Region: </td><td>
<select name="region">
<option value="usa1">usa1</option>
<option value="usa2">usa2</option>
</select>
</td></tr>
Any help at all please? I am not familiar with javascript only html, but I have researched this problem and found some solutions, but I am unsure what to do with them. I have an html checkbox form that lists book titles. The user will click on the checkbox next to the titles that interest them. Then when they click submit, I want a pop-up box to appear with the titles they selected in a printable list. I found this javascript code: Code: <script langauge="javascript" type="text/javascript">
function openPreview() {
var myWin = window.open ("popup.htm","myWindowName","width=500,height=350");
myWin.focus();
}
</script>
Then here is my html form code: Code: <form action="" form id= "myInput">
<table width="523">
<tr><td width="33"> <input type="checkbox" name="product" value="Ironman"></td>
<td width="229"><div align="left">Ironman</div></td>
<td width="174">Chris Crutcher </td>
<td width="56" align="right"> </td></tr>
<tr><td><input type="checkbox" name="product" value="Staying Fat for Sarah Byrnes">
<th><div align="left">Staying Fat for Sarah Byrnes </div></th>
<td>Chris Crutcher </td>
<td align="right"><tt>Realism</tt></td>
</tr>
<tr><td><input type="checkbox" name="product" value="The Watsons Go to Birmingham">
<th><div align="left">The Watsons Go to Birmingham </div></th>
<td>Chrisopher Paul Curtis </td>
<td align="right"> </td>
</tr>
</table>
<input type="button" id="btnPreview" name="btnPreview" value="Preview" onclick="openPreview()" />
</form>
Then on the popup.htm page I have this code Code: <script language="javascript" type="text/javascript">
document.write(window.opener.document.getElementById("myInput").value);
</script>
This code has worked for me when the form is a textarea or a label, but I don't know how to use it with a checkbox form. I know that labeling the form "my input" only works for textarea or labels, so I understand why the pop-up menu says undefined. What do I need to do to get the checkbox data to appear. Is it possible to use JavaScript to send a HTML FORM this way? (By the way, this is a huge guess - I don't know JavaScript very well) Code: <SCRIPT type="text/javascript">
function Cart1Function() {
get.INPUT.quantity.value
send.to.formsubmit1.php
}
function Cart2Function() {
get.INPUT.quantity.value
send.to.formsubmit2.php
}
</SCRIPT>
<FORM action="?" method="post" name="form">
<DIV>
<INPUT type="text" name="quanitity">
<INPUT type="submit" value="CART 1" onClick="Cart1Function">
<INPUT type="submit" value="CART 2" onClick="Cart2Function">
<DIV>
</FORM>
I want to make two forms sharing the same input (quantity). I'm fairly new to javascript and would appreciate any help offered. I'm trying to use the input from an HTML form to interact with a switch statement in javascript. I want my users to input a few specific words, and have each word they input redirect them to a specific page. Below is what I've currently come up with. I cannot get it to function properly as it continues to display the default output regardless of the input Code:
<script language="JavaScript" type="text/javascript" >
<!--
function checkform ( form )
{
var favcolour =("form.data", "")
switch (favcolour) {
case "red":
window.location="index.html";
break;
case "green":
window.location="index.html#tips";
break;
case "blue":
window.location="index.html#blue";
break;
default:
document.writeln("Invalid Input");
};
}
// -->
</script>
</head>
<body>
<form action="" method="post" onsubmit="return checkform(this);">
<input type="text" name="data" />
Again any help would be greatly appreciated! CHANGE XX to TT CHANGE zero in c0m to O becoming com CHANGE YYY to WWW hxxps://yyy.yousendit.c0m/download/dklxb2VIcVg1aWF4dnc9PQ first an example of what im trying to do: when logging in to a forum, you enter your info at the top right corner. thts where the login info txt boxes are usually located. under these you'll find a menu bar. if you're logged in, the menu commands/items arent the same as when you're not logged in. example of logged in is search. example of not being logged in is register. anyways under the menu there's the forum itself. u no, sections and topics. the table basically. this is wht im trying to do. even if im doing it wrong plz indulge me I know that ppl dont use frames much anymore. but just go with it. It DOES help to no how to do something in different ways. Ok, assuming you setup my pages, press submit. All 3 frames SHOULD go to 1.php BUT what happens is that the lower two frames go to 1.php. the first frame doesnt. It's the frame that has the form which has the button. If i put the button outside the form and press submit, it works. all 3 frames change. so i'm guessing it's got to do with the form itself. How do I fix it? Thank you!!!! Hello All, I have a form where the number of input fields (lets call them B through N) is determined by the length of a php array. Above those input fields is another field (lets call this field input A) that I would like to be auto populated based on what the user enters in fields B through N. Here is my code. The first table (with all of the "totals" fields) holds all of the input fields that I would like to auto update. These fields should auto update so that every input in EACH of the "fy" fields in the second table is added together. Example: every input in the id="fy_{$fy.fy}_high_impact_cost" field should be added together as the user enters them, and the id="totals_high_impact_cost" field should be auto updated with that total. Code: <form method="post" name="submit" action="new_item.php" accept-charset='UTF-8'> <table border="box" width="100%"> <tr> <td align="center">$<input id="totals_high_impact_cost" size="3" name="totals_high_impact_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_most_likely_impact_cost" size="3" name="totals_most_likely_impact_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_low_impact_cost" size="3" name="totals_low_impact_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_actual_expense" size="3" name="totals_actual_expense" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_high_mitigation_cost" size="3" name="totals_high_mitigation_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_most_likely_mitigation_cost" size="3" name="totals_most_likely_mitigation_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_low_mitigation_cost" size="3" name="totals_low_mitigation_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_cost_in_scope" size="3" name="totals_cost_in_scope" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_unfunded_threat" size="3" name="totals_unfunded_threat" maxlength="20" style="text-align: right" />M</td> </tr> </table> {foreach value=fy from=$php_array} <table> <tr> <td align="center">$<input id="fy_{$fy.fy}_high_impact_cost" size="3" name="fy_{$fy.fy}_high_impact_cost" maxlength="20" style="text-align: right" value="{$fy.high_impact_cost}" onchange="update_totals_high_impact_cost()" />M</td> <td align="center">$<input id="fy_{$fy.fy}_most_likely_impact_cost" size="3" name="fy_{$fy.fy}_most_likely_impact_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_impact_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_low_impact_cost" size="3" name="fy_{$fy.fy}_low_impact_cost" maxlength="20" style="text-align: right" value="{$fy.low_impact_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_actual_expense" size="3" name="fy_{$fy.fy}_actual_expense" maxlength="20" style="text-align: right" value="{$fy.actual_expense}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_high_mitigation_cost" size="3" name="fy_{$fy.fy}_high_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.high_mitigation_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_most_likely_mitigation_cost" size="3" name="fy_{$fy.fy}_most_likely_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_mitigation_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_low_mitigation_cost" size="3" name="fy_{$fy.fy}_low_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.low_mitigation_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_cost_in_scope" size="3" name="fy_{$fy.fy}_cost_in_scope" maxlength="20" style="text-align: right" value="{$fy.cost_in_scope}" />M</td> </tr> </table> {/foreach} </form> Please email me at alexhall12315@yahoo.com if you would like more explanation. Thanks in advance for any help!!! =) Hi I am trying to write a simple script for html form validation before going on to write a more complicated script for the full form which will eventually be on the web page. However, I cannot tell if the javascript is executing or not, as no alert messages come up. If I fill in the form with blanks (which is what the function checkform() checks for) then it should display an alert on submission and return false. Otherwise, returns true. I need to get this licked before going on to the more complex coding, but I really can't see why this doesn't appear to work. I'd be most grateful if some kind soul out there could have a look at it for me.... Links below. Thank you in anticipation! http://www.kellyresources.co.uk/onli...ment_test.html http://www.kellyresources.co.uk/checkform.js I am just starting out using Javascript and created a simple knowledge check to give a learner feedback on a question. It will allow the learner to quickly check if they have mastered a topic. The problem that I am having is that if I put two of these knowledge checks on the same webpage than it just posts the same answer when the submit button is clicked. What I have been doing is just pasting the code below twice on the page and changing the question and answer out. When I click "Check Answer" it is the same answer for both questions. Here is my code: Code: <fieldset>
<legend><strong>Question 1</strong></legend>
<SCRIPT LANGUAGE="JavaScript">
function readText (form) {
TestVar =form.inputbox.value;
alert ("You typed: " + TestVar);
}
function writeText (form) {
form.inputbox.value = "The wavelength of the blue light scatters better than the rest, predominates over the other colors in the light spectrum, and makes the sky appear blue to us."
}
</SCRIPT>
<form name="myform" action="" method="GET">
<label for="question">Why is the Sky Blue?</label><br><br>
<input name="inputbox" value="" type="text" style="width: 287px; height: 112px">
<p>
<input id="question" value="Check Answer" onclick="writeText(this.form)" type="button">
</p>
</form>
</fieldset>
Any help would be much appreciated in terms of direction. Thank you. Hey, I'm looking for some help with something I have been developing over the last day or so. Basically, I have a form with some input boxes in it, and I am trying to use some javascript to do a calculation with these input boxes. The problem is that when I go to click on the "calculate" button nothing happens. The fields where the value should go to I have made visible instead of hidden to make sure that something is going there but nothing is appearing. I've checked various parts of my syntax with online checkers and other javascript examples and I'm stuck as to what has gone wrong. If anyone can shed some light on the problem and possible solutions that would be awesome. I am using Macromedia Dreamweaver MX2004 to develop this. I have added the code below for the entire test html page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#calc_container {
padding-right: 25px;
padding-left: 25px;
width: 900px;
}
.calculator_text1 {
color: #FFFFFF
}
</style>
<script type="text/javascript">
function Combat() {
var Attack = (document.Combat_Calculator.Combat_Attack.value);
var Strength = (document.Combat_Calculator.Combat_Strength.value);
var Defence = (document.Combat_Calculator.Combat_Defence.value);
var Constitution = (document.Combat_Calculator.Combat_Constitution.value);
var Magic = (document.Combat_Calculator.Combat_Magic.value);
var Ranged = (document.Combat_Calculator.Combat_Ranged.value);
var Prayer = (document.Combat_Calculator.Combat_Prayer.value);
var Summoning = (document.Combat_Calculator.Combat_Summoning.value);
var Sum_Melee = parseInt(0.25 * ((1.3 * (Attack + Strength)) + Defence + Constitution + (0.5 * Prayer)));
var Sum_Magic = parseInt(0.25 * ((1.3 * (2 / 3 * Magic)) + Defence + Constitution + (0.5 * Prayer)));
var Sum_Ranged = parseInt(0.25 * ((1.3 * ( 2 / 3 * Ranged)) + Defence + Constitution + (0.5 * Prayer)));
document.Combat_Calculator.Combat_Sum_Melee.value = (Sum_Melee);
document.Combat_Calculator.Combat_Sum_Magic.value = (Sum_Magic);
document.Combat_Calculator.Combat_Sum_Rangedr.value = (Sum_Ranged);
}
function MM_callJS(jsStr) {
return eval(jsStr)
}
</script>
</head>
<body>
<div id="calc_container" onselectstart="return false">
<form action="" method="post" name="Combat_Calculator" id="Combat_Calculator">
<table width="822" border="10" bordercolor="#2E2E2E" bgcolor="2E2E2E">
<tr bgcolor="2E2E2E">
<td width="87" height="15"></td>
<td width="146" height="15"></td>
<td width="122" height="15"></td>
<td width="145" height="15"></td>
<td width="37" height="15" bgcolor="2E2E2E"></td>
<td width="179" height="15"></td>
<td width="56" height="15"></td>
</tr>
<tr>
<td height="58" colspan="7" bgcolor="#FFFFFF"><div align="right"></div>
<div align="center">Your combat level is:<input name="Free_Player" type="text" id="Free_Player" maxlength="3" disabled="disabled" style="background-color:#FFFFFF; border:none;">
+<input name="Member" type="text" id="Member" maxlength="2" disabled="disabled" style="background-color:#FFFFFF; border:none;">
</div><div align="right"></div><div align="center"></div><div align="right"></div><div align="center"></div></td>
</tr>
<tr>
<td height="15"><div align="right" class="calculator_text1">Attack:</div></td>
<td height="15" bgcolor="2E2E2E"><input name="Combat_Attack" maxlength="2" type="text" id="Combat_Attack"></td>
<td height="15"><div align="right" class="calculator_text1">Magic:</div></td>
<td height="15" bgcolor="2E2E2E"><input name="Combat_Magic" maxlength="2" type="text" id="Combat_Magic"></td>
<td width="37" height="15" bgcolor="2E2E2E"></td>
<td height="15" bgcolor="2E2E2E"></td>
<td height="15" bgcolor="2E2E2E"></td>
</tr>
<tr>
<td height="15"><div align="right" class="calculator_text1">Strength:</div></td>
<td height="15" bgcolor="2E2E2E"><input name="Combat_Strength" maxlength="2" type="text" id="Combat_Strength"></td>
<td height="15"><div align="right" class="calculator_text1">Ranged:</div></td>
<td height="15" bgcolor="2E2E2E"><input name="Combat_Range" maxlength="2" type="text" id="Combat_Range"></td>
<td width="37" height="15" bgcolor="2E2E2E"></td>
<td height="15" bgcolor="2E2E2E"><div align="center">
<input name="Combat_Calculate" type="button" id="Combat_Calculate" onClick="MM_callJS('Combat();')" value="Calculate"></div></td>
<td height="15" bgcolor="2E2E2E"></td>
</tr>
<tr>
<td height="15"><div align="right" class="calculator_text1">Defence:</div></td>
<td height="15" bgcolor="2E2E2E"><input name="Combat_Defence" maxlength="2" type="text" id="Combat_Defence"></td>
<td height="15"><div align="right" class="calculator_text1">Prayer:</div></td>
<td height="15" bgcolor="2E2E2E"><input name="Combat_Prayer" maxlength="2" type="text" id="Combat_Prayer"></td>
<td width="37" height="15" bgcolor="2E2E2E"></td>
<td height="15" bgcolor="2E2E2E"></td>
<td height="15" bgcolor="2E2E2E"></td>
</tr>
<tr>
<td height="15"><div align="right" class="calculator_text1">Constituion:</div></td>
<td height="15" bgcolor="2E2E2E"><input name="Combat_Constitution" maxlength="2" type="text" id="Combat_Constitution"></td>
<td height="15"><div align="right" class="calculator_text1">Summoning:</div></td>
<td height="15" bgcolor="2E2E2E"><input name="Combat_Summoning" maxlength="2" type="text" id="Combat_Summoning" ></td>
<td width="37" height="15" bgcolor="2E2E2E"></td>
<td height="15" bgcolor="2E2E2E"></td>
<td height="15" bgcolor="2E2E2E"></td>
</tr>
</table>
<p><input name="Combat_Sum_Melee" type="text" id="Combat_Sum_Melee">Melee</p>
<p><input name="Combat_Sum_Magic" type="text" id="Combat_Sum_Magic">Magic</p>
<p><input name="Combat_Sum_Range" type="text" id="Combat_Sum_Range">Range</p>
</form>
</div>
</body>
</html>
Edit: I have edited the code to remove/change the things that "Philip M" kindly pointed out were not needed and a bit of re-designing the page. I still can't get the javascript to put the answer value in the correct place on the click of the button. I'm under the impression it has something to do with the button rather than the javascript code but I might be wrong. Hello, I am nearing completion on the modification of a Javascript/Html Order Form. The problem arises when I click on 'Submit Order' after filling in details and choosing a product. For some reason, the pop up box shows the correct product, but it shows the $ Total from the previous box in the table. Thank you all for your time in looking into this: Code: <html>
<head>
<title>JS Order</title>
<script language="JavaScript">
<!-- Start hiding from older browsers.
// This function displays the nag screen when a field hasn't been filled in.
function nag(form, field, x)
{
ufield=field.toUpperCase();
alert("Details missed " + ufield + "!" + "\n\nPlease fill in the field and submit the form again.");
form.elements[x].focus();
}
// This function is used to round the tax amount to the nearest hundreths.
function roundPrice(price)
{
// save a copy of the price in case it is an even dollar amount.
var workPrice = price;
// Make the price a string by adding a string 0 to the end.
workPrice += "0";
// Find out where the decimal point is.
var pointIndex = workPrice.indexOf(".",0);
// If there is a decimal point now check to see if it needs to be rounded up.
if (pointIndex >= "0") {
// Set an index for the thousands digit.
var thousands = pointIndex +3;
// if the third number past the decimal point is greater than or
// equal to 5, then we need to round up the hundredth digit.
if (workPrice.charAt(thousands) >= "5")
{
// Turn the price into a number.
workPrice=parseFloat(price);
// Round up the price.
workPrice=workPrice + .01;
// Turn it back into a string.
workPrice=workPrice + "0";
// Cut off the thousands on down.
rPrice = workPrice.substring(0,thousands);
} else {
// We didn't need to round the price up so cut off the
// thousands on down and return the price
rPrice = workPrice.substring(0,thousands);
}
// Its an even dollar amount so just put on the .00 on the end.
} else {
rPrice = price + ".00";
}
// Now return the rounded price.
return rPrice;
}
// This function calculates the form.
function updatePrice()
{
// Reset the subtotal price
var addPrice = 0;
// Reset the running total prices.
var nowPrice = 0;
// Reset the nubmer of part ordered.
var partcount = 0;
// Step through each element in the form.
for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++)
{
// If the form element has "qty" in the name then we need to process it.
if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty')
{
// If the item has a quantity of not 0, then we need to process it.
if (self.document.forms[0].elements[i].value != 0)
{
// Locate the cost
costIndex = i + 1;
// Increment the part counter.
partcount++;
// Get the actual value for the quantity.
nowQty = eval(self.document.forms[0].elements[i].value);
// Get the cost of the item.
nowPrice = eval(self.document.forms[0].elements[costIndex].value);
// Calculate the extended cost (i.e., quanty * cost).
nowPrice = eval(nowPrice * nowQty);
// Add to the subtotal.
addPrice += nowPrice;
}
}
}
// Round off the subTotal price.
subTotal=roundPrice(addPrice);
// Put the sub total price into the form.
self.document.forms[0].subtot.value = subTotal;
// Figure the tax.
tax = parseFloat(self.document.forms[0].taxrate.value * addPrice);
// Round off the tax price.
totalTax = roundPrice(tax);
// Put the total tax into the form.
self.document.forms[0].totaltax.value = totalTax;
// Start figuring the total including tax.
// Turn the price string into a number.
subPrice = parseFloat(addPrice);
// Turn the tax string into a number.
addTax = parseFloat(totalTax);
// Add the tax and subtotal to get the total price.
totalPrice = (addTax + subPrice);
// Round the total price.
finalPrice = roundPrice(totalPrice);
// Update the form with the total cost.
self.document.forms[0].cost.value = finalPrice;
// Update the form with the number of line items.
self.document.forms[0].items.value = partcount;
}
function orderIt(form)
{
// If the order is zero, display a message.
if (form.cost.value == "0.00")
{
alert("You have not ordered anything. Please select an item and re-submit your order.")
} else {
if (form.elements[0].value == "")
{
nag(form, form.elements[0].name,0)
} else if (form.elements[1].value == "")
{
nag(form, form.elements[1].name, 1)
} else if (form.elements[2].value == "")
{
nag(form, form.elements[2].name, 2)
} else if (form.elements[4].value == "")
{
nag(form, form.elements[4].name, 4);
} else if (form.elements[5].value == "")
{
nag(form, form.elements[5].name, 5);
} else if (form.elements[6].value == "")
{
nag(form, form.elements[6].name, 6);
} else if (form.elements[10].value == "")
{
nag(form, form.elements[10].name, 10);
} else {
var message = "You have ordered the following items:\n";
message = message + "Qty\tCost\tDescription\n";
// Step through each element in the form.
for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++)
{
// If the form element has "qty" in the name then we need to process it.
if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty' && self.document.forms[0].elements[i].value !=0)
{
// Get the quantity.
qtyItem = self.document.forms[0].elements[i].value;
costItem = self.document.forms[0].elements[i-2].value;
// Get the description.
descItem = self.document.forms[0].elements[i-1].value;
// add the line item to the confirmation message.
message = message + qtyItem + "\t" + costItem + "\t" + descItem + "\n";
}
}
message = message + "\nOrder total: $" + self.document.forms[0].cost.value
if (confirm(message))
{
self.document.forms[0].submit();
}
}
}
}
// end hiding from older browsers -->
</script>
</head>
<body bgcolor="white" text="black" alink="red" vlink="purple" link="blue" background="images/bkgrd.gif">
<p>
<table width=440>
<tr><td>
<p>
<form name=options method=post action="/cgi-bin/order.cgi">
<table border="0" width="100%" id="table1">
<tr>
<td width="109" align="right"><font face="Arial" size="2"> First Name:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=FirstName size=30 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Last Name:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=LastName size=30 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Address Line 1:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=Address1 size=40 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Address Line 2:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=Address2 size=40 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Suburb:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=Suburb size=25 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">City:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=City size=25 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Postal Code:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=PostalCode size=15 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Country:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=Country size=15 maxlength=40 value=NZ></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Home Phone:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=HomePhone size=20 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Mobile Phone:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=MobilePhone size=20 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">E-Mail Address:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=EmailAddress size=30 maxlength=40></font></td>
</tr>
<tr>
<td width="109" align="right"><font face="Arial" size="2">Domain Name:</font></td>
<td width="15"> </td>
<td align="left"><font size="1" face="Arial">
<input type=text name=DomainName size=30 maxlength=40></font></td>
</tr>
</table><br>
<font face="Arial" size="2">Enter a quantity of 1 into the package you require.<br><br>
Monthly payments incur a $2 per month administration fee.
Set up is <b>free</b> for all packages (for a limited time).</font><br><br>
<table border=1 cellpadding=2 width="500" bordercolorlight="#808080">
<tr>
<th><font face="Arial" size="2">Description</font></th>
<th><font face="Arial" size="2">Qty</font></th>
<th><font face="Arial" size="2">Total</font></th>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc1" value="Basic Monthly">
</font><font face="Arial" size="2">Basic Package <BR><B> Pay Monthly</B></font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty1" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost1" value="11.99">
</font><font face="Arial" size="2">$11.99</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc2" value="Basic PrePay 1 Year">
</font><font face="Arial" size="2">Basic Package - $9.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty2" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost2" value="109.89">
</font><font face="Arial" size="2">$109.89</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc3" value="Basic PrePay 2 Years">
</font><font face="Arial" size="2">Basic Package - $8.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty3" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost3" value="197.78">
</font><font face="Arial" size="2">$197.78</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc4" value="Basic PrePay 3 Years">
</font><font face="Arial" size="2">Basic Package - $7.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty4" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost4" value="263.67">
</font><font face="Arial" size="2">$263.67</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc13" value="Deluxe Monthly">
</font><font face="Arial" size="2">Deluxe Package<BR><B> Pay Monthly</B></font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty13" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost13" value="21.99">
</font><font face="Arial" size="2">$21.99</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc14" value="Deluxe PrePay 1 Year">
</font><font face="Arial" size="2">Deluxe Package - $19.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty14" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost14" value="219.89">
</font><font face="Arial" size="2">$219.89</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc15" value="Deluxe PrePay 2 Years">
</font><font face="Arial" size="2">Deluxe Package - $18.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty15" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost15" value="417.78">
</font><font face="Arial" size="2">$417.78</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc16" value="Deluxe PrePay 3 Years">
</font><font face="Arial" size="2">Deluxe Package - $17.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B>
</font></td>
<td align=center><font size="1" face="Arial"><input type=text name="qty16" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center><font size="1" face="Arial"><input type=hidden name="cost16" value="593.67">
</font><font face="Arial" size="2">$593.67</font></td>
</tr>
</table>
<font face="Arial" size="2">
<br>
</font>
<table border=1 cellpadding=2 width="500" bordercolorlight="#808080">
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc17" value="Blogging Software Installation Service">
</font><font face="Arial" size="2">Installation Service<BR><B> Blogging software
(Wordpress etc)</B></font></td>
<td align=center width="39"><font size="1" face="Arial"><input type=text name="qty17" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost18" value="39.00">
</font><font face="Arial" size="2">$39.00</font></td>
</tr>
<tr>
<td align=center><font size="1" face="Arial"><input type=hidden name="desc19" value="Shopping Cart Installation Service">
</font><font face="Arial" size="2">Installation Service<BR><B> Shopping Cart
(ZenCart, osCommerce, Cubecart etc)</B></font></td>
<td align=center width="39"><font size="1" face="Arial"><input type=text name="qty19" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>
<td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost19" value="349.00">
</font><font face="Arial" size="2">$349.00</font></td>
</tr>
</table>
<p>
<table width=500>
<tr>
<td align=right>
<div align="left">
<table cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=right><font face="Arial" size="2">Sub Total: $</font><font size="1" face="Arial"><input name=subtot value="0.00" size=10 maxlength=10 onChange="updatePrice()"></font></td>
</tr>
<tr>
<td valign=bottom><font size="1" face="Arial"><input type=hidden value=".15" name=taxrate size=5 maxlength=5 onchange="updatePrice()">
</font></td>
<td align=right><font face="Arial" size="2">GST: $</font><font size="1" face="Arial"><input type=text name=totaltax size=10 maxlength=10 value="0.00" onChange="updatePrice()"></font></td>
</tr>
<tr>
<td colspan=2 align=right><font face="Arial" size="2">Total Order: $</font><font size="1" face="Arial"><input name="cost" type=text value="0.00" size=10 maxlength=10 onChange="updatePrice(this.form)"><input type=hidden maxlength=4 size=4 name=items></font></td>
</tr>
</table>
</div>
<p>
<font size="1" face="Arial">
<input type=button value="Submit Order" onClick="orderIt(this.form);" style="float: left"></font><font face="Arial" size="2">
</font><font size="1" face="Arial">
<input type=reset value="Clear Order" style="float: left"><font face="Arial" size="2">
</form>
</font></font>
</center>
</body>
</html>
I am very new to javascript and really can't figure out what I am doing wrong. I am trying to make a 1 page store that allows you to type in an item and select the color and size you want for that item. If you don't fill in a field, an alert message should tell you that. If all the fields are filled in, a "thank you for purchasing ____________" message should appear in a text area at the bottom of the page. This is my current code: Code: <html>
<head>
<script>
function processform()
{
if ( document.form1.item1.value == "")
{
alert("No Item Chosen")
}
else
{
chosen = ""
len = document.form1.c1.length
for (i = 0; i <len; i++) {
if (document.form1.c1[i].checked) {
chosen = document.form1.c1[i].value
}
}
if (chosen == "") {
alert("No Color Chosen")
}
}
else {
itemname = document.form1.item1.value;
itemcolor = document.form1.c1.value;
itemsize = document.form1.size.value;
document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname;
}
}
</script>
</head>
<body>
<h1>Store</h1>
<br/><br/>
<form name="form1">
<h4>What item would you like to buy?</h4>
<input type="text" name="item1" value="" /><br />
<br/><br/>
<h4>Color</h4>
<input type="radio" name="c1" value="blue" /> Blue<br />
<input type="radio" name="c1" value="red" /> Red<br />
<input type="radio" name="c1" value="green" /> Green<br />
<input type="radio" name="c1" value="yellow" /> Yellow<br />
<br/><br/>
<h4>Size</h4>
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>
<br/><br/>
<button onclick="processform()">Purchase</button>
<br/><br/>
<textarea rows="2" cols="40" name = "txtarea1"> </textarea>
</form>
</body>
</html>
When I press the purchase button, no alert message is shown, nor does anything get displayed in the textarea. What am I doing wrong? Dear all, attached is a page for my website to allow visitors to purchase photos. It is made from 2 Paypal example scripts - one for the form and another for an additional text box. It works fine apart from one detail, the text being entered does not get sent - instead, the information it forwards is "6x4 Colour Prints. Item Number id10" The "6x4 Colour prints" bit is good - the "Item number id10" is where I'd ideally like to see the custom text being entered and the guys at Paypal developer forums have said that a Javascript command is overriding the text being forwarded and to seek advice from those who know Javascript. I've tried for a day by trial and error to see if I can take this command out but it has got to the hair pulling out stage so I'm calling on those who know best to cast a wise eye over the code and see if there is an easy fix to this. Any help or suggestions as to howe to alter this will be most gratefully received. Thanks in advance, Dave. hello everyone Im new to javascript as well as to this forum, Im coming here for first class help that I can only get from skilled programmers like you. I have a html form that uses javascript for validation, this is an assignment that consists of a form that sells hard drives from three different manufacturers, more specifically the part im stuck on is where if a manufacturer hoes have a number in the number of drives textbox, javascript needs to check to see that one of the radio buttons in that row is checked, if no radio button is checked an alert is displayed, however when I do select a radio button I still get the alert I used a "if...else if...else" construction but my logic is not well structured and thereby I get those problems, I have included the code down below if anyone is interested in helping a newbie out, thanks Code: <html>
<head>
<style type="text/css">
.bold {font-weight:bold ; font-family:"comic sans ms"}
</style>
<script type="text/javascript">
function number_of_drives()
{
//checks that a value is entered for at least one drive's manufacturer
if(document.myform.drive1.value=="" && document.myform.drive2.value=="" && document.myform.drive3.value=="")
{
alert("please enter a quantity for the number of drives you wish to purchase from a manufacturer"); //if no value is entered in any the message is displayed
return; //no further calculation is done
}
else if(isNaN(document.myform.drive1.value || document.myform.drive2.value || document.myform.drive3.value ))//verifies that only numeric values were entered
{
alert("make sure you enter a numeric values for the 'number of drives' column");
return;
}
else
{
if(document.myform.drive1.value !="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)
alert("please select a size for the western digital drive");
else if(document.myform.drive2.value !="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)
alert("please select a size for the maxtor digital drive");
else if(document.myform.drive2.value !="" && document.myform.quantum[0].checked==false && document.myform.quantum[].checked==false && document.myform.quantum[2].checked==false)
alert("please select a size for the quantum digital drive");
}
}
function check_radios()//function to check that a size is selected in the same row as the number of drives textbox//function to check that a size is selected in the same row as the number of drives textbox
{
if(document.myform.drive1!="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)// if drive1 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'western digital' drive");
return;
}
else{return;}
if(document.myform.drive2!="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)// if drive2 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'maxtor' drive");
return;
}
else{return;}
if(document.myform.drive3!="" && document.myform.quantum[0].checked==false && document.myform.quantum[1].checked==false && document.myform.quantum[2].checked==false) // if drive2 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'quantum' drive");
return;
}
else{return;}
}
function clear_form()
{
document.myform.western[0].value=="";
document.myform.western[1].value=="";
document.myform.western[2].value=="";
document.myform.maxtor[0].value=="";
document.myform.maxtor[1].value=="";
document.myform.maxtor[2].value=="";
document.myform.quantum[0].value=="";
document.myform.quantum[1].value=="";
document.myform.quantum[2].value=="";
document.myform.drive1.value=="";
document.myform.drive2.value=="";
document.myform.drive3.value=="";
document.myform.size1.value=="";
document.myform.size2.value=="";
document.myform.size3.value=="";
document.myform.totalsize.value=="";
document.myform.totalcost.value=="";
document.myform.discount.value=="";
document.myform.grandtotal.value=="";
}
</script>
<title></title>
</head>
<body>
<form name="myform">
<table align="center" border="1" width="80%">
<tr style="font-family:'comic sans ms'; font-size:24pt"><td align="center" colspan="6">Rupert's Hard Drive Emporium</td></tr>
<tr><td class="bold" valign="middle" align="center" rowspan="2">Manufacturer</td><td colspan="3" align="center" class="bold">Drive Size</td><td rowspan="2" class="bold">Number of Drivers</td><td rowspan="2" class="bold">Number of GB</td></tr>
<tr><td class="bold">500 Gigabytes</td><td class="bold">1 Terabyte</td><td class="bold">2 Terabytes</td></tr>
<tr><td>Western Digital ($0.12/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="western" value="500" /></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="2048"/></td><td align="center"><input type="text" name="drive1"/></td><td align="center"><input type="text" name="size1"/></td></tr>
<tr><td>Maxtor ($0.16/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="2048"/></td><td align="center"><input type="text" name="drive2"/></td><td align="center"><input type="text" name="size2"/></td></tr>
<tr><td>Quantum ($0.09/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="2048"/></td><td align="center"><input type="text" name="drive3"/></td><td align="center"><input type="text" name="size3"/></td></tr>
<tr><td rowspan="4" align="center"><img src="hardisk.jpg" height="120pt" width="90pt"/></td><td colspan="3" align="right">Total Gigabytes Purchased</td><td align="center" colspan="2"><input type="text" name="totalsize" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Total Cost of Drives</td><td align="center" colspan="2"><input type="text" name="totalcost" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Discount</td><td align="center" colspan="2"><input type="text" name="discount" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Grand Total</td><td align="center" colspan="2"><input type="text" name="grandtotal" readonly="true"/></td></tr>
<tr><td align="center"><input type="submit" value="calculate" onclick="number_of_drives()"/></td><td align="center" colspan="5"><input type="submit" value="clear the form" onclick="clear_form()"/></td></tr>
</table>
</form>
</body>
</html>
Hi all Can someone please help me with a javascript that can validate textfields, checkboxes, radiobuttons and dropdownlist? I found a working javascript, but it only validates textfields. http://www.insidedhtml.com/tips/elements/ts13/page1.asp Can someone please help me modify it? Any help is much appreciated! - Mikey Hi guys, I have a simple calculator on my website which has a few options selectable by radio buttons. When the user adds selections - the total price of their order is automatically calculated and displayed in a <div> for them to see. The client then can deselect options or add according to their budget. The code which deals with this is as follows (just sections of it but you get the point ....) In the <HEAD> Code: <script type = "text/javascript">
var allprices = [];
var index = 0;
function chkrads(frmName,rbGroupName) {
var chosen = "";
var radios = document[frmName].elements[rbGroupName];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
chosen = radios[i].value;
}
}
if (chosen == 0) {printprice = 0}
if (chosen == 1) {printprice = 99}
if (chosen == 2) {printprice = 150}
if (chosen == 3) {printprice = 250}
if (chosen == 21) {printprice = 200}
if (chosen == 22) {printprice = 300}
if (chosen == 30) {printprice = 50}
if (chosen == 41) {printprice = 50}
if (chosen == 42) {printprice = 70}
if (chosen == 43) {printprice = 90}
if (rbGroupName == "size") {index = 0}
if (rbGroupName == "colour") {index = 1}
if (rbGroupName == "frame") {index = 2}
if (rbGroupName == "glass") {index = 3}
if (rbGroupName == "hook") {index = 4}
if (rbGroupName == "delivery") {index = 5}
allprices[index] = printprice;
var totalprice = 0;
for (var i =0; i <allprices.length; i++) {
if (!isNaN(allprices[i])) {
totalprice = totalprice + allprices[i];
}
}
document.getElementById("result").style.display = "block";
document.getElementById("result").innerHTML = totalprice;
}
</script>
Then in the <BODY> Code: <form name= "myform" style="font-size:11px; font-family:Arial, Helvetica, sans-serif;">
<input type = "radio" name = "size" value = "0" onclick = "chkrads('myform', 'size')"> <b>0</b>
<input type = "radio" name = "size" value = "1" onclick = "chkrads('myform', 'size')"> <b>1</b>
<input type = "radio" name = "size" value = "2" onclick = "chkrads('myform', 'size')"> <b>2</b>
<input type = "radio" name = "size" value = "3" onclick = "chkrads('myform', 'size')"> <b>3</b>
<br /><br /><br /><br />
<input type = "radio" name = "colour" value = "0" onclick = "chkrads('myform', 'colour')"><b>No</b>
<input type = "radio" name = "colour" value = "21" onclick = "chkrads('myform', 'colour')"><b>black</b>
<input type = "radio" name = "colour" value = "22" onclick = "chkrads('myform', 'colour')"><b>Multi Colour</b>
<br /><br /><br /><br />
<input type = "radio" name = "frame" value = "0" onclick = "chkrads('myform', 'logo')"><b>No</b>
<input type = "radio" name = "frame" value = "30" onclick = "chkrads('myform', 'logo')"><b>Yes</b>
<br /><br /><br /><br />
<input type = "radio" name = "glass" value = "0" onclick = "chkrads('myform', 'glass')"><b>No</b>
<input type = "radio" name = "glass" value = "51" onclick = "chkrads('myform', 'glass')"><b>Yes</b>
<br /><br /><br /><br />
<input type = "radio" name = "hook" value = "0" onclick = "chkrads('myform', 'hook')"><b>0</b>
<input type = "radio" name = "hook" value = "41" onclick = "chkrads('myform', 'hook')"><b>1</b>
<input type = "radio" name = "hook" value = "42" onclick = "chkrads('myform', 'hook')"><b>2</b>
<input type = "radio" name = "hook" value = "43" onclick = "chkrads('myform', 'hook')"><b>3</b>
<br /><br /><br /><br />
<input type = "radio" name = "delivery" value = "0" onclick = "chkrads('myform', 'delivery')"><b>No</b>
<input type = "radio" name = "delivery" value = "61" onclick = "chkrads('myform', 'delivery')"><b>Yes</b>
</form>
This all calculates the cost and then supplies the answer into this code: Code: <div id="result" style="display:none;"><strong></strong> <span id="totalprice"></span> </div> This all works exactly as I want - my question is this .... I have added an HTML contact form at the bottom of the page which goes off to a Form2Email PHP script. (All working fine) I really want to autofill one of the sections of this form "QUOTED PRICE" with the value calculated by my earlier product calculator. The form looks like so: Code: <form id="ContactForm" method="post" action="FormToEmail.php" class="input2"> <label>Name: <input name="name" type="text" id="name" value="" size="" maxlength="80" class="input"/></label> <br /><br /> <label>QUOTED PRICE: <input name="QUOTED PRICE" type="text" id="QUOTED PRICE" value="" size="" maxlength="80" class="input"/></label> <br /><br /> <label> <input type="submit" class="submit" name="submit" id="submit" value="submit"/> </label> </form> Does anyone know how to achieve this?! It would be a massive help! |
|||||||