|
JavaScript - How Do I Run Code On A Specific Form When There Are Multiple Forms?
I have a document that contains four forms. I want to run a function only in the form the user is currently in. I keep getting the "document.my_form_name is undefined" error. I've tried all sorts of ways of doing this but can't find a solution.
Here's a snippet of the HTML: Code: <form id="my_form_1" name="my_form_1" action="some action" method="POST"> // in here I call the function onchange_display_sel_droplist and // pass through the name of the form </form> <form id="my_form_2" name="my_form_2" action="some action" method="POST"> bla bla </form> Here's the part of the function in question: Code:
function onchange_display_sel_droplist(my_value, my_object, my_text_obj, my_form_name)
{
// create array with all the divs found
var arr = new Array();
arr = document.my_form_name.getElementsByTagName( "div" );
// loop through array
for(var i=0; i < arr.length; i++)
{
var tagId = document.my_form_name.getElementsByTagName( "div" ).item(i).id;
// find all the divs with ID "my_selected_div__"
if ( tagId.indexOf("add_selected_div__") > -1 )
{
// hide all
document.my_form_name.getElementById(tagId).style.display = "none";
}
}
// display selected object (droplist)
document.my_form_name.getElementById(my_object).style.display = "";
}
Similar TutorialsAnother thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me. I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them. Is there a single method using JS that works for all browsers? Thre is probably a very simple answer and I am just missing it somehow. Hi all - I'm having difficulty with the processing of 3 forms on my web page. We'll call my 3 forms A, B, and C. By default my page shows form A. The other 2 forms I have hidden via display:none My issue is when I have form B or C showing. Once I hit submit, say within form B for example, I'd like this form to remain for future entries/submital of data. However, instead what happens is form A appears. How do I get form B to remain, allowing for a user to submit multiple entries of data without going back to form A? Here's my code for form 'B' <div id="branches_info" style=" <?php echo $display_branches; ?> "> form method="post" action="annual_report_main.php" onsubmit="return validateBranches(this);"> <fieldset> <p><strong>Branch Location</strong></p><br /> <label for="branch_address" class="long">Street Address:</label> <input maxlength="50" type="text" name="branch_address" id="branch_address" value="<?php echo htmlentities($_POST['branch_address']);?>" /><br /> <div class="cleaner"></div> <label for="branch_city" class="long">City:</label> <input maxlength="20" type="text" name="branch_city" id="branch_city" value="<?php echo htmlentities($_POST['branch_city']);?>" /><br /> <div class="cleaner"></div> <label for="branch_state" class="long">State:</label> <input maxlength="2" type="text" name="branch_state" id="branch_state" value="<?php echo htmlentities($_POST['branch_state']);?>" /><br /> <div class="cleaner"></div> <label for="branch_zip" class="long">Zip Code:</label> <input maxlength="10" type="text" name="branch_zip" id="branch_zip" value="<?php echo htmlentities($_POST['branch_zip']);?>" /><br /> <div class="cleaner"></div> <div class="content_onecolumn"> <input type="submit" name="Branches" value="Submit to Database" class="inputSubmit" /> </div> <div class="content_onecolumn"> <input type="button" name="Finished" value="Finished" class="inputSubmit" onclick="window.open('https://www.dca.ca.gov/webapps/bppe/thankyou.php');return false" /> </div> </fieldset> </form> </div> I have been looking around on the webs but have not found anything. I can find how to add multiple fields, but what if they reside on different forms on the same page? For example, here is my code with two forms: Code: <FORM name="form1"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1" readonly="readonly"><b>Total Lbs<b> </FORM> <FORM name="form2"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1"><b>Total Lbs<b> </FORM> In this example, I want to sum the two fields named "tw1" (the last field on each form) into a text box. Is this possible? Hello all, I am trying to update a site that has a cookie feature enabled so that a certificate can be retrieved later on. I am using a form to collect and put the cookie, but I have to use two buttons to get the information stored and then direct the user on through to the rest of the site. My question is: Can I combine these functions into the same button? I have scoured the web for solutions, but I can't seem to find anyone doing this exact thing. I know that websites do this type of thing all of the time. Here is the code that I am using. I am an html / css person. I am just getting into js. It is ugly, but I'm coping Code: <body>
<div id="header">
</div>
<div id="main"><br>
<h2><SCRIPT LANGUAGE="JavaScript">
cookie_name = "dataCookie";
var YouEntered;
function putCookie() {
if(document.cookie != document.cookie)
{index = document.cookie.indexOf(cookie_name);}
else
{ index = -1;}
if (index == -1)
{
YouEntered=document.cf.cfd.value;
document.cookie=cookie_name+"="+YouEntered+"; expires=Saturday, 31-Dec-2011 23:59:59 GMT";
}
}
</SCRIPT>
<FORM NAME="cf">
Enter Your Full Name as you would like it to appear on the completion certificate: <br> <INPUT TYPE="text" NAME="cfd" size="20">
<INPUT TYPE="button" Value="Enter"
onClick="putCookie()">
</FORM>
<h6>Select Continue to review the information</h6>
<FORM METHOD="LINK" ACTION="cookie_2.htm">
<INPUT TYPE="submit" VALUE="Continue with Training">
</FORM></h2>
</div>
<div id="footer">
</div>
</body>
Normally I would just use document.getElementById to get anything I need but here is my problem: I have a zip code control that I load using AJAX. it has city, state, country, county and zip code. This gets loaded within a business application and at one point you can have both a bill to and ship to address forms on the screen at the same time, loading my zip control with the same fields, same ids and same name. This forced me to now pass in the form name that contains the control. I need to get to divs and spans within this form. Primarily as you type in a city or zip code, I am doing a hot search with a popup div that shows you results you can quickly choose from. The only time this becomes an issue is the situation I mentioned before when the zip code control is on the screen twice. I am not certain how to access the innerHTML of a span or div by way of the form name. Is this possible and if so what is the proper syntax? Here is a very basic example at its simplest form of my problem. Code: <form name="frm_billto" id="frm_billto"> <span id="myspan">Hello</span> </form> <form name="frm_shipto" id="frm_shipto"> <span id="myspan">World</span> </form> In the above example because the control was loaded twice, I now have 2 spans with the same ID. I want the innerHTML of the each span based on the form they are in. We wanted one control that we could use throughout the system that we could update in one place and the entire application be updated. Unfortunately we did not anticipate having it load more than once on the page. Thank you for any help I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated. Code:
function details(val)
{
var info = val.split("|");
document.getElementById('num').value = info[0];
document.getElementById('price').value = info[1];
document.getElementById('package_name').value = info[2];
}
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>
fyi, I have limited experience with web programming (even less with javascript). I am trying to search a database of molecules and display several columns for each returned molecule in a table in a new page (view_all.cgi). Within this table I have a button for each molecule from the database which I would like to be able to click it and view all of it's information in a new page (view_one.cgi) However, I also have a column in my table in view_all.cgi filled with check boxes so that only some of the returned molecules can be checked and then downloaded using a script (get_checked.cgi). QUESTION: How can I handle the table data so that one button sends one row of the table to view_one.cgi, while another button sends multiple columns of the table to get_checked.cgi without using nested forms? Thanks, Tom EDIT: A better question. I have the first part of my question working (sending one row of a table to view_one.cgi). So, using javascript, how can I get the status (checked/unchecked) of all the check boxes on a page and send the information to get_checked.cgi? Hello, I'm trying to make a simple webpage with two input text boxes that when submitted when empty, I'll get an error pop-up telling me which ones are empty, both, first name, or last name. When there's only one if, the script works. But when there's multiple else ifs, nothing happens if I press submit. Can someone help me? Code: <html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
var y=document.forms["myForm"]["lastname"].value;
if (x==null || x=="" && y==null || y=="")
{
alert("Please put in your first and last name.");
return false;
}
else if (x==null || x=="")
{
alert("Please put in your first name.");
return false;
}
else if (y==null || y=="")
{
alert("Please put in your last name.");
return false:
}
}
</script>
</head>
<body>
<form name="myForm">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="validateForm()">
</form>
</body>
</html>
I posted a thread a few days ago concerning a bit of javascript code to make checking one checkbox clear another one. I got some great, prompt help. However, I just got back to working on that web page, and realized that the functions only work on the first form on my web page. I have many forms and they are actively named using php. Here's are the functions (these works for just the first form on the page): Code: <script type="text/javascript">
function undo_Changes() {
if (document.getElementById("Complete").checked==true) {
document.getElementById("Needs_Change").checked=false;
}
}
function undo_Complete() {
if (document.getElementById("Needs_Change").checked==true) {
document.getElementById("Complete").checked=false;
}
}
</script>
I call them from the checkboxes involved: Code: <input name="Complete" id="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onChange="this.style.color='#FF0000'" onClick="undo_Changes()"> <input name="Needs_Change" id="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete()"> Here's how my forms are named: Code: <?php $DocName = "Schedule".$count; ?>
<form name="<?php echo $DocName; ?>" action="ScheduleCode.php" method="post" id="<?php echo $DocName; ?>">
I've tried the following and it doesn't work at all: Code: <script type="text/javascript">
function undo_Changes(myForm) {
if (myForm.getElementById("Complete").checked==true) {
myForm.getElementById("Needs_Change").checked=false;
}
}
function undo_Complete(myForm) {
if (myForm.getElementById("Needs_Change").checked==true) {
myForm.getElementById("Complete").checked=false;
}
}
</script>
<input name="Complete" id="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onChange="this.style.color='#FF0000'" onClick="undo_Changes(this.form)">
<input name="Needs_Change" id="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)">
Thanks for any help. Lisa Hi all, I have multiple forms on one page with the same element name and one of them is the <span>. Below is my sample code for a simple html file for testing purposes. I have no problem accessing the <input> element, but i had problems with the <span> element. Anyone knows why? In this scenario, i won't be able to use the document.getElementById() as both <span> have the same name. Code:
<html>
<head>
Test
<SCRIPT LANGUAGE="JavaScript">
// JavaScript statements go here
function test(tmpForm) {
window.alert(tmpFrm.elements["weight"].value);
window.alert(tmpForm.elements["error"].innerHTML);
}
</SCRIPT>
</head>
<body>
<form id="form_137" name="form_137">
<input id="weight" name="weight" value="" />
<span id="error" name="error">abc</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
<form id="form_137_down" name="form_137_down">
<input id="weight" name="weight" value="" />
<span id="error" name="error">zzz</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
</body>
</html>
I made a php page with multiple forms with javascript code in it. The javascript makes an input field for the date. The problem is that the script interfers between other scripts in the other forms and i get wrong orderdate. Code: <form action='dataadd.php' name='$id'>";
$datestime=time();
echo "<input type=hidden name=dateid value='$id'>";
echo "<input type=hidden name=datestime value='$datestime'>";?>
<script type="text/javascript">
DateInput('orderdate', true, 'yyyy-mm-dd')</script>....
hello everybody! this is my first atempt in writing javascript and i have a problem which I have no idea how to solve. I want to take the values from several dropdown forms and make some calculations whit those in order to display a number. Unfortunately the script responts in a way that i cannot identify what is happening. this is a shorten example of my script. Code:
<html>
<head>
<script type="text/javascript">
function calcul()
{
var pcno = document.plithospc.listplpc.value;
var ndno = document.plithosnd.listplnd.value;
var hotline = document.hotlform.listhotl.value;
var sumhotline = 0;
if (hotline == 2)
{
sumhotline = 8*(1+0.5*pcno) + 2*(1+0.5*ndno);
}
else if (hotline == 3)
{
sumhotline = 16*(1+0.5*pcno) + 4*(1+0.5*pcno);
}
else
{
sumhotline = 0;
}
document.write(sumhotline);
</script>
</head>
<body>
<FORM NAME="plithospc">
<SELECT NAME="listplpc">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>
<FORM NAME="plithosnd">
<SELECT NAME="listplnd">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>
<FORM NAME="hotlform">
<SELECT NAME="listhotl">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>1st selection</OPTION>
<OPTION VALUE=2>second selection</OPTION>
<OPTION VALUE=3>third selection</OPTION>
</SELECT>
<button type="button" onclick="calcul()">click me</button>
</body>
does anyone knows how to fix this? thanks in advance hello, i am looking a a specific javascript code for a school project. what the code does is it re-sizes your window to a specific size, and then makes it jump around to the four corners of your screen. a perfect example of this would be the rick roll site called http://www.20b.org/rickroll.html its best viewed in internet explorer, and will take effect after you allow it on the top pop up window. it seems that the latest version of firefox disables the window resizing and movement, so use IE. after examining the page source, i managed to find this code. window.resizeTo(640,625); window.moveTo(0,0); for (i = 1; i <= 9; i++){ setTimeout('window.moveTo(1599,1199);', i+"000"); i++; setTimeout('window.moveTo(0,1199);', i+"000"); i++; setTimeout('window.moveTo(1599,0);', i+"000"); i++; setTimeout('window.moveTo(0,0);', i+"000"); } the code worked perfectly on the macs used at school. but however, when i took it home and tried it on my PC, which has a different sized monitor, it didnt work right. my copied code section seemed to jump off the edges of the screen, like it was using the size of a Macs monitor, yet the original website works fine. this led me to believe that the source code seems to find the size of the monitor and adjust the position of where it moves. i cant seem to find that part of the code. any help would be appreciated Basically what I need to do is cause a bit of HTML to only display on a specific page. I have figured out how to do most of the work i.e. figuring out what page that the code is being displayed on, etc. However, for some reason the DOM element that I am using will not update based on the Javascript. I have searched the Internet for a solution and unfortunately I have found none. Here is the version of the code that I am currently working on: Code: <html>
<head>
<script type="text/javascript">
window.onload = function DisplayButton() {
var DesiredPage = 'Page to Display';
//Page that I want the code to display on
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
//This determines and places in a variable what page that the code will be on
if (sPage == DesiredPage) {
document.getElementById('HiddenCode').style.display = "block";
}
}
</script>
<p Id="HiddenCode" style="display:none">Code only to be displayed on indicated page</p>
</head>
</html>
I am somewhat new to Javascript so I feel like I might be missing something obvious here. Thank You to anyone who can help. Zbot I am trying to make it when a user comes to a site, if they have been there before an alert box will open saying "Welcome firstname, lastname, and email address". Right now I can get the code to work to show a first name, but when I try to get it to also show the last name and email I get an error or something like "Welcome NaN NaN, NaN". Here is the code I have right now. Code: function confirmSubmission()
{
var confirmed = validateData();
return confirmed;
}//confirmSubmission
function validateData()
{
if (document.forms[0].elements[1].value == "")
{
alert("You must enter a first name.");
document.forms[0].elements[1].focus();
return false;
}//blank first name
if (document.forms[0].elements[2].value == "")
{
alert("You must enter a last name.");
document.forms[0].elements[2].focus();
return false;
}//blank last name
if (document.forms[0].elements[3].value == "")
{
alert("You must enter an address.");
document.forms[0].elements[3].focus();
return false;
}//blank address
if (document.forms[0].elements[4].value == "")
{
alert("You must enter a city.");
document.forms[0].elements[4].focus();
return false;
}//blank city
if (document.forms[0].elements[5].value == "")
{
alert("You must enter a state.");
document.forms[0].elements[5].focus();
return false;
}//blank state
if (document.forms[0].elements[6].value == "")
{
alert("You must enter a zipcode.");
document.forms[0].elements[6].focus();
return false;
}
else
{
if (/...../.test(document.forms[0].elements[6].value) == false)
{
alert("You must enter a valid zipcode.");
document.forms[0].elements[6].focus();
return false;
}
}//blank zip
if (document.forms[0].elements[7].value == "")
{
alert("You must enter an e-mail address.");
document.forms[0].elements[7].focus();
return false;
}
else
{
if (/@/.test(document.forms[0].elements[7].value) == false || (document.forms[0].elements[7].value).indexOf(".", (document.forms[0].elements[7].value).indexOf("@")) == -1)
{
alert("You must enter a valid e-mail address.");
document.forms[0].elements[7].focus();
return false;
}
}//blank email
if (document.forms[0].elements[8].value == "" || document.forms[0].elements[9].value == "" || document.forms[0].elements[10].value == "")
{
alert("You must enter a telephone number.");
document.forms[0].elements[8].focus();
return false;
}
else
{
if (/.../.test(document.forms[0].elements[8].value) == false)
{
alert("You must enter a valid area code.");
document.forms[0].elements[8].focus;
return false;
}//area code
else
if (/.../.test(document.forms[0].elements[9].value) == false)
{
alert("You must enter a valid telephone exchange.");
document.forms[0].elements[9].focus;
return false;
}//NNX
else
if (/..../.test(document.forms[0].elements[10].value) == false)
{
alert("Your number must be four characters.");
document.forms[0].elements[10].focus;
return false;
}//number
}//blank telephone
setCookie('username', document.forms[0].elements[1].value, 2);
return true;
}//validateData
function setCookie(c_name, value, expiredays)
{
var expDate=new Date();
expDate.setDate(expDate.getDate() + expiredays);
document.cookie=c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires=" + expDate.toUTCString());
And on another page I have: Code: function checkCookie()
{
username = getCookie('username');
if (username != null && username != "")
alert('Welcome back, ' + username + '!');
}//checkCookie
function getCookie(c_name)
{
if (document.cookie.length > 0)
{
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1)
{
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
Any help would be appreciated. I am creating a website for someone and can get information from one form to check it so it can then change the data in another form. This what I have for JavaScript: <script type="text/javascript" language="JavaScript"> function price() { if(document.cust.top.value == None && document.cust.swirl.value == None) { document.price.hosted_button_id.value = "UDNNKUHTPGEEW"; } else { document.price.hosted_button_id.value = "CP8EVFLEASF28"; } } </script> The result I want is to take the value from my form that has a radio buttons and check to see if it equal none or not. Then using that information change the value in a different form. The first form looks like this for beginning: <form name="cust" method="get" action=""> Hey CF, I'm currently working on a website called 'eXtreme Gaming' I've almost completed it, apart from two things. - Adding two values on my checkout page for the Grandtotal (I've tried everything, but I'm too much of a noob and have probably missed something small). - Validation of forms (I don't know where to start here, I've looked on w3schools for tuts etc but I'm having difficulty incorporating it on my site) I'm going to put the code for my checkOut page only, if you are able to help me many thanks in advance. [quote] Code: <HTML>
<HEAD>
<script language="JavaScript" src="laptopsCookie.js">
</script>
<script language="JavaScript" src="desktopsCookie.js">
</script>
<script language="JavaScript"><!--
function calculateTotalPurchaseLaptop(formRef)
{
var laptopTotal=0;
for (var i=0; i<LaptopListPurchase.length/2;i++)
{
var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
// document.orderForm2.grandTotal.value = document.orderForm.laptopTotal.value + document.orderForm2.desktopTotal.value
laptopTotal += subTotal;
}
formRef.laptopTotal.value = laptopTotal.toFixed(2);
}
//--></script>
<script language="JavaScript"><!--
function calculateTotalPurchaseDesktop(formRef)
{
var desktopTotal=0;
for (var i=0; i<DesktopListPurchase.length/2;i++)
{
var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
desktopTotal += subTotal;
}
formRef.desktopTotal.value = desktopTotal.toFixed(2);
}
//--></script>
<script language="Javascript"><!--
function checkform()
{
if (document.payment.Name.value == "")
{
alert('Please enter a name');
return false;
}
//else if(isNaN(document.payment.CreditCard.value) || document.payment.CreditCard.length !== 10)
//{
// alert('Invalid Credit Card Number');
// return false;
//}
else if (document.payment.Adress.value == "")
{
alert('Please enter your adress.');
return false;
}
else if (document.payment.State.selectedIndex == 0)
{
alert('Please select a state');
return false;
}
return true;
}
</script>
</HEAD>
<BODY>
<TITLE>Check Out</TITLE>
<script>
var html = "";
html += '<TABLE align="center"><tr><td><img src = "images/checkOutTitle.png" align="center" style="border:none" /></td></tr></TABLE>';
html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
html += '<form id = "orderForm" name = "orderForm" method = POST action="javascript:void(0)">';
html += '<tr>';
html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
html += '</tr>';
for (var i=0; i<LaptopListPurchase.length;i=i+2)
{
html += '<tr><td>' + LaptopListPurchase[i] + '</td>';
html += '<td><select NAME="quantity' + i/2 + '" onChange="calculateTotalPurchaseLaptop(this.form)">';
html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
html += '</select></td>';
html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + LaptopListPurchase[i+1] + '" readonly></td>';
html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
html += '</tr>';
}
html += '<tr>';
html += '<td></td>';
html += '<td></td>';
html += '<td></td>';
html += '<td>$<input type=TEXT name="laptopTotal" value="" readonly size=7></td></tr>';
html += '</form>';
html += '</table>';
document.write(html);
// Update the quantities
//
var quantityLaptop;
for (var i=0; i<LaptopList.length/2;i++)
{
// Get the quantity of each type of Laptop
//
quantityLaptop = getCookie("Laptop" + i);
document.orderForm.elements("quantity"+i).value = quantityLaptop;
}
// Update the totals
//
calculateTotalPurchaseLaptop(document.orderForm)
var html = "";
html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
html += '<form id = "orderForm2" name = "orderForm2" method = POST action="javascript:void(0)">';
html += '<tr>';
html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
html += '</tr>';
for (var i=0; i<DesktopListPurchase.length;i=i+2)
{
html += '<tr><td>' + DesktopListPurchase[i] + '</td>';
html += '<td><select NAME="quantity' + i/2 + '" onChange="calculateTotalPurchaseDesktop(this.form)">';
html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
html += '</select></td>';
html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + DesktopListPurchase[i+1] + '" readonly></td>';
html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
html += '</tr>';
}
html += '<tr>';
html += '<td></td>';
html += '<td></td>';
html += '<td></td>';
html += '<td>$<input type=TEXT name="desktopTotal" value="0.00" readonly size=7></td></tr>';
html += '<td></td>';
html += '<td></td>';
html += '<td align = "center"><b>Grand Total</b></td>';
html += '<td>$<input type=TEXT name="grandTotal" value="0.00" readonly size=7></td></tr>';
html += '</form>';
html += '</table>';
document.write(html);
// Update the quantities
//
var quantityDesktop;
for (var i=0; i<DesktopList.length/2;i++)
{
// Get the quantity of each type of Desktop
//
quantityDesktop = getCookie("Desktop" + i);
document.orderForm2.elements("quantity"+i).value = quantityDesktop;
}
// Update the totals
//
calculateTotalPurchaseDesktop(document.orderForm2)
</script>
<table align = 'center'>
<tr>
<td><h1>Pay for your Purchase Below</h1></td>
</tr>
</table>
<table border="1" align = 'center' >
<form name="payment" method="post">
<tr>
<td>
Name on Credit Card: <input type="text" name="Name" /><br />
Credit Card number: <input type="text" name="CreditCard" /><br />
Street Adress: <input type="text" name="Adress" /><br />
Town: <input type="text" name="Town" /><br />
State/Territory: <select NAME="State"><OPTION VALUE="Null">--</OPTION><OPTION VALUE="Australian Capital Territory">ACT</OPTION><OPTION VALUE="South Australia">SA</OPTION><OPTION VALUE="Northen Territory">NT</OPTION><OPTION VALUE="Queensland">QLD</OPTION><OPTION VALUE="Victoria">Vic</OPTION><OPTION VALUE="Western Australia">WA</OPTION><OPTION VALUE="Tasmania">Tas</OPTION></select>
</td>
<td>
<INPUT TYPE="RADIO" NAME="Master Card" VALUE="Master Card">Master Card<BR>
<INPUT TYPE="RADIO" NAME="Visa" VALUE="Visa">Visa<BR>
<INPUT TYPE="RADIO" NAME="AMEX" VALUE="American Express">American Express<BR>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="return checkform()"></td>
</tr>
</table>
</BODY>
</HTML>[
/quote] I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made. Here is the code I have so far. Please help. Code: <body> <label id="Label1">ADMINISTRATOR CONSOLE - ADD AND EDIT ASSETS<br /> </label> <form action="" method="post" style="border-style: ridge; width: 311px; height: 37px;" name="myform"> <table> <tr> <td>Select Category:</td><td> <select name="category" onchange="set_sub_category()" style="width: 157px"> <option selected="selected" value="select">Select an Option</option> <option value="add">Add Category</option> <option value="district">Council District</option> <option value="region">Region</option> <option value="pom">POM</option> <option value="proptype">Property Type</option> <option value="assetcat">Asset Category</option> <option value="assettype">Asset Type</option> <option value="property">Property</option> <option value="asset">Asset</option> </select> </td> </tr> </table> </form> <form style="display:none" action= "admin_console_new.html" onsubmit="return (validate_form(this)& validate_list(this))" method="post" style="border-style: ridge; border-width: medium; height: 154px; width: 346px;" name="district"> <table style="height: 86px"> <tr> <td>Select District Value:</td><td> <select name="district"> <option selected="selected">Select an Option</option> <option>Add Council District</option> </select> </td> </tr><tr> <td>Enter District Name:</td><td> <input name="name" type="text"/> </td> </tr><tr> <td>Enter Description:</td><td><textarea name="description"></textarea> </td> </tr><tr> <td><input type="submit" value="Submit" name="Submit3" /><input type="reset" value="Reset" /> </td> </tr> </table> </form> I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() Hi All, This is my first post and I need some assistance. I'm learning code and attempting to put more than 1 script on a webpage, but individual (separate pages) but together, neither one works. I'm a newbie and my professor doesn't know how to teach so it's me trying to do this myself and any assistance will be helpful. This is what I have (trying to add random pictures and a cycling banner) <script> var imgArray = new Array (4); var index = 0; function cycle () { document.banner.src = imgArray[index].src; index++; if (index > 3) { index = 0; } setTimeout("cycle()", 2000); return; } function startup () { imgArray[0] = new Image; imgArray[0].src = "Im.png"; imgArray[1] = new Image; imgArray[1].src = "Tired.jpg"; imgArray[2] = new Image; imgArray[2].src = "of this.jpg"; imgArray[3] = new Image; imgArray[3].src = "Rainy.jpg"; cycle(); return; } </script> </head> <body onLoad="select();startup()"> <div align="center"> <img name="banner" src="Im.png"> </div> </body> </body> <script> var imgArray = new Array (5); var index = 0; function select () { index= Math.floor(Math.random() * 5); document.banner.src = imgArray[index].src; setTimeout("select()", 2000); return; } function startup () { imgArray[0] = new Image; imgArray[0].src = "1.jpg"; imgArray[1] = new Image; imgArray[1].src = "2.jpg"; imgArray[2] = new Image; imgArray[2].src = "3.jpg"; imgArray[3] = new Image; imgArray[3].src = "4.jpg"; imgArray[4] = new Image; imgArray[4].src = "sheep.jpg"; select(); return; } </script> </head> <body onLoad="cycle(); startup()"> <div align="center"> <img name="banner" src="1.jpg"> </div> </body> |
|||||||