|
JavaScript - Taking Information From Forms To Change Form Value
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=""> Similar Tutorialshello 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 I am having some trouble with my code in that I am trying to take the value from the date of birth field and check to see if over 18 years old. I they are not over 18, a window.alert dialog box pops up to tell them. Any help with this I would greatly appreciate. Below is the check if 18 validation. Script section in the document head: Code: //check if over 18
function overAge(){
var age;
var input = document.forms[0].birthDate.value;
var pyear = parseInt(input.substring(6,10));
var pmonth = parseInt(input.substring(0,2)) - 1;
var pday = parseInt(input.substring(3,5));
if ( month < pmonth ){
age = year - pyear - 1;
}
else if ( month > pmonth ){
age = year - pyear;
}
else if ( month == pmonth ){
if ( day < pday ){
age = year - pyear - 1;
}
else if ( day > pday ){
age = year - pyear;
}
else if ( day == pday ){
age = year - pyear;
}
}
if(age < 18){
window.alert('Attention: Under 18!');
valid=false;
return valid;
}
}
Code for body section: Code: Date of Birth: <br/> <input type = "text" name = "date" value = "(mm/dd/yyyy)"/> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <head> <title>Student Information</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> Code: <SCRIPT type="text/javascript">
<!--
function displayEntries () {
var sfirst = document.frmStudentInfo.textSfirst.value;
var smi = document.frmStudentInfo.textSmi.value;
var slast = document.frmStudentInfo.textSlast.value;
var sadd = document.frmStudentInfo.textSadd.value;
var scity = document.frmStudentInfo.textScity.value;
var sstate = document.frmStudenInfo.textSstate.value;
var szip = document.frmStudentInfo.textSzip.value;
var sphone = document.frmStudentInfo.textSphone.value;
var sdob = document.frmStudentInfo.textSdob.value;
window.alert('sfirst' + 'smi' + 'slast' + '\n' +
'sadd' + '\n' +
'scity' + 'sstate' + 'szip' + '\n' +
'sphone' + '\n' +
'sdob');
}
//-->
</SCRIPT>
</head> <body> <table width="70%" align=center ID="Table1"> <tr><td><img SRC = "nwlogo.jpg" width=120 height=60></td> <td><H3>Student Information</H3></td></tr> </table> <form name="frmStudentInfo" action="ignore"> <table align="center"> <tr><td> Last Name:</td> <td><input type="text" name="txtSlast" size="20"></td> <td> </td> <td></td> </tr> <tr><td> First Name:</td> <td><input type="text" name="txtSfirst" size="20" ></td> <td> </td> <td></td> <tr><td> MI:</td> <td><input type="text" name="txtSmi" size="5" tabindex="3"><td> <td> </td> </tr> <tr><td> Address:</td> <td><input type="text" name="txtSadd" size="20" tabindex="4"></td> <td> </td> <td></td> </tr> <tr><td> City:</td> <td><input type="text" name="SCity" size="20" tabindex="5"></td> <td> </td> <td></td> </tr> <tr><td> State:</td> <td><input type="text" name="txtSstate" size="5" tabindex="6"></td> <td> </td> Code: <td><input type="button" name="cmdUpdate" value="Update" onClick="displayEntries();"></td> </tr> <tr><td> ZIP Code:</td> <td><input type="text" name="txtSzip" size="20" tabindex="7"></td> <td> </td> <td></td> </tr> <tr><td> Phone:</td> <td><input type="text" name="txtSPhone" size="20" tabindex="8"></td> <td> </td> <td></td> </td> </tr> <tr><td> Date of Birth:</td> <td><input type="text" name="txtSdob" size="20" tabindex="9"></td> <td> </td> <td></td> </tr> </table> </form> </body> </html> I'm having trouble with the pop up window. I cannot get it to pop up and I'm not sure where I have went wrong with it. I need it to pop up once the update button is clicked and contain the information that has been input into the form. Any help would be much appreciated. Attached is the code. It does open the email but does not send any information. Can someone please assist. Code: <!-- Table 2 for the Content -->
<form name="orders" onsubmit="return confirmSubmit()" onreset="return window.confirm('Are you sure you want to reset your Orders.'); " action="mailto:lynette@sayorkies.co.za" method="post" enctype="text/plain">
Code: // Function to Confirm certain conditions and confirm to proceed with order
function confirmSubmit() {
var itemsOrdered = true;
if (document.forms[2].totalExcl.value == 0 || document.forms[2].delivery.value == 0) {
itemsOrdered = false;
}
if(itemsOrdered != true) {
window.alert("You have not chosen any products to purchase or No Delivery Option selected.");
return false;
}
var submitOrder = window.confirm("Are you sure you want to place the order?");
if(submitOrder == true)
return true;
return false;
}
// Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
var formField = orders.elements[i];
// Get the fields name
var formName = formField.name;
// Is it a "product" field?
if (formName.substring(0,4) == "prod") {
// Items price extracted from name
var itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
// Get the Quantity
var itemQuantity = parseInt(formField.value);
// Update the OrderValue
if(itemQuantity >= 0) {
orderValue += itemQuantity * itemPrice;
}
}
}
// Display the totals
orders.totalExcl.value = "R " + orderValue.toLocaleString();
// function to calculate VAT at 15% as required and total inclusive.
function calcTotals(oValue) {
var vat = oValue * .15;
var totalIncluding = oValue + vat;
var tDelivery = Number( orders.delivery.value.substring(2) );
var theTotalOrder = totalIncluding + tDelivery;
orders.vat.value = "R " + vat.toLocaleString();
orders.totalIncl.value = "R " + totalIncluding.toLocaleString();
orders.totalOrder.value = "R " + theTotalOrder.toLocaleString();
}
return calcTotals(orderValue);
}
Hello everyone, I've got a problem while trying to fetch some informations from multiple forms in the same page. What I'm trying to do with this code is fetching informations from the multiple forms on my page and checking if the information is the information I need. If so, I take this information and add it into a javascript generated form that I submit once every form in the page have been taken care of. It's the only way I found to 'submit' multiple forms at the same time. Everything was fine until I decided to give the user the option to add more forms on the page by clicking on a button (the form is then generated by javascript and appended on the page). There seems to be a problem when checking these particular forms, the script doesn't seem to recognize the value of the radio button (wich is add_question_faq) and never ever enters in this case. Code: case "add_question_faq":
alert ("pourquoi, ho, pourquoi")
if (mesForms[cpt].question.value=="" || mesForms[cpt].answer.value==""){
chaineModif+="StopSendRightNow"
}
break;
Except when the commentarised Code: //for (h=0;h<mesForms[cpt].elements.length;h++){
//alert (mesForms[cpt].elements[h].name)
//}
ain't commentarised. Any Idea why a simple alert changes the behavior of the function? Here's the said function: Code: function select_forms_faq(){
var chaineModif=""
var mesFormsModif=new Array();
var mesForms=document.getElementsByTagName("form");
for (cpt=0;cpt<mesForms.length;cpt++){
//for (h=0;h<mesForms[cpt].elements.length;h++){
//alert (mesForms[cpt].elements[h].name)
//}
if (mesForms[cpt].action.length!=0 && mesForms[cpt].action.length!=undefined){
for (k=0;k<mesForms[cpt].action.length;k++){
if (mesForms[cpt].action[k].checked==true){
switch (mesForms[cpt].action[k].value){
case "delete":
chaineModif+="<input type=\'text\' name=\'delete_"+mesForms[cpt].id_question.value+"\' value=\'"+mesForms[cpt].id_question.value+"\' />";
break;
case "save_changes_question":
chaineModif+="<input type=\'text\' name=\'update_question_faq_"+mesForms[cpt].id_question.value+"\' value=\'id"+mesForms[cpt].id_question.value+"question"+mesForms[cpt].question.value+"answer"+mesForms[cpt].answer.value+"\' />"
break;
case "save_changes_cat":
chaineModif+="<input type=\'text\' name=\'update_cat_faq_\' value=\'id"+mesForms[cpt].id_cat.value+"category"+mesForms[cpt].cat.value+"\' />"
break;
case "add_question_faq":
alert ("pourquoi, ho, pourquoi")
if (mesForms[cpt].question.value=="" || mesForms[cpt].answer.value==""){
chaineModif+="StopSendRightNow"
}
break;
}
}
}
}
}
if (chaineModif!="" && chaineModif.indexOf("StopSendRightNow")==-1){
var formFinal=document.createElement("form")
with(formFinal){
method="POST"
action=""
name="formFinal"
id="formFinal"
style.display="none"
}
chaineModif+="<input type=\'hidden\' name=\'submit_changes_faq\' value=\'submit_changes_faq\' />"
document.getElementById("wpbody-content").appendChild(formFinal)
document.getElementById("formFinal").innerHTML=chaineModif
formFinal.submit();
return false
}
else{
return false
}
}
Please assist, I have the following code to remember form inormation but it does not seem to work. Probably something stupid. Code: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="yorkie.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
// Confirm resetting of forms.
function confirmReset() {
var resetForm = confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
}
// If box clicked value within disappears
function Focus(element) {
if (element.value == element.defaultValue) {
element.value = '';
}
}
// If nothing typed and box onblur the default value is restored within
function Blank(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
// Submission of Contact Form Verified
function verifySubmission() {
var retValue = true;
if (document.forms[2].email.value == "Enter Email Address"
|| document.forms[2].firstname.value == "Enter First Name"
|| document.forms[2].lastname.value == "Enter Last Name"
|| document.forms[2].telephone.value == "Enter Contact number") {
window.alert("You did not fill in one of the following required fields: First Name, Last Name, Email Address, or Telephone Number.");
retValue = false;
}
return retValue;
}
// Email address verified as a valid email address
function validateEmail(formObject) {
var email = formObject.value;
var emailCheck = /^[_\w\-]+(\.[_\w\-]+)*@[\w\-]+(\.[\w\-]+)*(\.[\D]{2,3})$/;
if (emailCheck.test(email) == false) {
window.alert("The e-mail address you entered does not appear to be valid.");
formObject.value = formObject.defaultValue;
return false;
}
formObject.value = email.toLowerCase();
return true;
}
// Telephone number verified as a valid 10 digit number with no alpha characters
function verifyPhone(number) {
var phone = number.value;
var phoneCheck = /^(\d{10})$/;
if(phoneCheck.test(phone) == false) {
window.alert("The telephone number you entered does not appear to be valid.");
number.value = number.defaultValue;
return false;
}
return true;
}
// Show additional contact form details onclick of yes radio button
function showDiv() {
document.getElementById('breeders').style.visibility = 'visible';
}
// Hide certain contact form info onclick of No radio button
function hideDiv() {
document.getElementById('breeders').style.visibility = 'hidden';
}
// SAVE FORM INFORMATION FOR THE NEXT VISIT
function saveSelections(frm) {
var setvalue;
var fieldType;
var index;
var formname = frm.name;
// CookieExpiry in 30 days.
var today = new Date();
var exp = new Date(today.getTime()+30*24*60*60*1000);
var string = "formname=" + formname + "|";
var cookieName = formname;
var n = frm.length;
for (i = 0; i < n; i++) {
e = frm[i].name;
fieldValue = frm[i].value;
fieldType = frm[i].type;
// Radio Buttons
if (fieldType == "radio") {
for (x=0; x < frm.elements[e].length; x++) {
if (frm.elements[e][x].checked)
{
index = x
}
}
string = string + index + "\|";
}
// Text, Textarea, and dropdowns
if ((fieldType == "text") || (fieldType == "textarea") || (fieldType == "select")) {
string = string + frm.elements[e].value + "\|";
}
// Checkboxes
if (fieldType == "checkbox") {
if (frm.elements[e].checked==true) {
var setvalue = "1";
}
if (frm.elements[e].checked==false) {
var setvalue = "0";
}
string = string + setvalue + "\|";
}
// Hidden field
if (fieldType == "hidden") {
string = string + frm.elements[e].value + "\|";
}
}
setCookie(cookieName, string, exp);
}
// Load Form Fields from saved cookie
function loadSelections(frm) {
var e;
var z;
var x;
var cookieName;
var fieldArray;
var fieldValues;
var fieldValue;
var formname = frm.id;
// Retrieve form elements from cookie and split into array.
cookieName = formname;
fieldValues = getCookie(cookieName);
fieldArray = fieldValues.split("\|");
var n = frm.length;
for (i = 0; i < n; i++) {
e = frm[i].name;
z = i;
z++;
var fieldType = frm[i].type;
var fieldValue = fieldArray[z];
// Radio Buttons
if (fieldType == "radio") {
x = fieldValue;
frm.elements[e][x].checked = true;
}
// Text, Textarea, and dropdowns
if ((fieldType == "text") || (fieldType == "textarea") || (fieldType == "select")) {
frm.elements[e].value = fieldValue;
}
// Checkboxes
if (fieldType == "checkbox") {
var fld_checkbox = fieldValue;
if (fld_checkbox == "1") {
frm.elements[e].checked = true;
}
}
// Hidden fields
if (fieldType == "hidden") {
frm.elements[e].value = fieldValue;
}
}
}
// COOKIE FUNCTIONS
function setCookie(name, value, expires) {
document.cookie= name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "");
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
/* ]]> */
</script>
</head>
<body class="contact" onload="var begin=setInterval('changeBanner()',9000); currentClock(); currentDate(); document.getElementById('breeders').style.visibility = 'hidden'; " onunload="saveSelections(document.forms[0])">
<table width="92%">
<form action="mailto:lynette@sayorkies.co.za, subject=Contact Form" method="post" enctype="text/plain" onsubmit="return verifySubmission()" onreset="return confirmReset();">
<table class="center" cellpadding="5" border="1">
<!-- This enters a horizontal line -->
<tr><td><hr /></td></tr>
<!-- This is for the personal information -->
<tr><td><strong>Tell us who you a </strong></td></tr>
<tr><td><input type="text" name="firstname" size="25" maxlength="35" value="Enter First Name" onfocus="Focus(this);" onblur="Blank(this);" /> *
<input type="text" name="lastname" style="margin-left: 52px;" size="25" maxlength="35" value="Enter Last Name" onfocus="Focus(this);" onblur="Blank(this);" /> *</td></tr>
<!-- This is for the contact information -->
<tr><td><strong>Your Contact details:</strong></td></tr>
<tr><td><input type="text" name="email" size="30" maxlength="60" value="Enter Email Address" onfocus="Focus(this);" onblur="Blank(this); validateEmail(this)" /> *
<input type="text" name="telephone" style="margin-left: 20px;" size="20" maxlength="10" value="Enter Contact number" onfocus="Focus(this);" onblur="Blank(this); verifyPhone(this)" /> * </td></tr>
<!-- This is where you enter your message also select what type of message-->
<tr><td><strong>Your Message:</strong></td></tr>
<tr><td align="left">What is your message about?<br />
<input type="radio" name="type" value="compliment" /> Compliment
<input type="radio" name="type" value="complaint" /> Complaint
<input type="radio" name="type" value="general" checked="checked" /> General
<input type="radio" name="type" value="enquiry" /> Enquiry
<input type="radio" name="type" value="feedback" /> Feedback</td></tr>
<tr><td align="center"><textarea name="message" rows="6" cols="45" onfocus="Focus(this);" onblur="Blank(this)">Enter your message here...</textarea></td></tr>
<!-- Additional information -->
<tr><td align="left">Are you looking to purchase a Yorkie puppy?<br />
<input type="radio" name="purchase" value="yes" /> Yes
<input type="radio" name="purchase" value="no" checked="checked" /> No</td></tr>
<tr><td align="left">Do you own a Yorkie?<br />
<input type="radio" name="owner" value="yes" onclick="showDiv()" /> Yes
<input type="radio" name="owner" value="no" checked="checked" onclick="hideDiv()" /> No<br />
<!-- If answer is no above the below questions are hidden, if yes then they appear -->
<div id="breeders">
How many? <select name="qnty" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5+</option></select>
Are you a breeder? <input type="radio" name="breeder" value="yes" /> Yes
<input type="radio" name="breeder" value="no" checked="checked" /> No</div></td></tr>
<!-- Subscriptions -->
<tr><td align="left">Do you wish to subscribe to the following?<br />
<input type="checkbox" name="subscribe" value="letter" checked="checked" /> Monthly Newsletter<br />
<input type="checkbox" name="subscribe" value="pups" /> Notification of a new litter<br />
<input type="checkbox" name="subscribe" value="updates" /> Notification of site updates<br />
<input type="checkbox" name="subscribe" value="register" /> Registrations</td></tr>
<!-- Add a picture file -->
<tr><td align="left">Upload your favourite Yorkie photo for the Picture of the Month.<br />
<input type="file" name="upload" accept="image/gif, image/jpeg" size="30" style="margin-left: 15px; margin-top:5px;" /></td></tr>
<!-- This enters a horizontal line -->
<tr><td><hr /></td></tr>
<tr><td align="center">Required fields marked with *</td></tr>
<!-- Buttons to clear the form or to submit the form -->
<tr><td align="center"><input type="reset" value="Clear the Form" />
<input type="submit" value="Send your message" /></td></tr>
</table></form<script type="text/javascript">loadSelections(document.forms[0]);</script>
</body>
</html>
Console Error: Unable to get value of the property 'split': object is null or undefined for this line: Code: fieldArray = fieldValues.split("\|");
I am hitting a brick wall, dont know what to do? Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!="");
That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()">
</body>
<div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;">
<img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/>
Loading...
</div>
</html>
formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> 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 = "";
}
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() The below script keeps a running total dollar tab. It uses the "name" of the elements but I would like it to use the "ID" instead. Can somebody pretty please adjust the function to look at the id. I've changed the first 2 form elements to id. Tracy Code:
<script language="JavaScript" type="text/javascript">
<!--
function CalculateTotal(frm) {
var order_total = 0
// Run through all the form fields
for (var i=0; i < frm.elements.length; ++i) {
// Get the current field
form_field = frm.elements[i]
// Get the field's name
form_name = form_field.name
// Is it a "product" field?
if (form_name.substring(0,4) == "PROD") {
// If so, extract the price from the name
item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
// Get the quantity
item_quantity = parseInt(form_field.value)
// Update the order total
if (item_quantity >= 0) {
order_total += item_quantity * item_price
}
}
}
// Display the total rounded to two decimal places
frm.TOTAL.value = round_decimals(order_total, 2)
}
function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}
function pad_with_zeros(rounded_value, decimal_places) {
// Convert the number to a string
var value_string = rounded_value.toString()
// Locate the decimal point
var decimal_location = value_string.indexOf(".")
// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0
// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
}
else {
// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}
// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length
if (pad_total > 0) {
// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}
//-->
</script>
<FORM>
<TABLE BORDER =3>
<TR><TD ALIGN="CENTER"><B>Please <BR>
enter <BR>
quantity:</FONT></TD>
<TD ALIGN="CENTER"><B>Description</TD><TD ALIGN="CENTER"><B>Price<BR>
(each)</B></TD></TR>
<TR>
<TD ALIGN="CENTER"><INPUT TYPE=TEXT ID="PROD_SP_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Bread 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT ID="PROD_SPMG_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Multi-Grain Bread* 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_SPCR_4.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt Cinnamon-Raisin Bread 24 oz</TD><TD ALIGN="RIGHT">$4.99</TD>
</TR>
<TR><TD ALIGN="CENTER"><INPUT TYPE=TEXT NAME="PROD_SW_3.99" SIZE=3 MAXLENGTH=3 onkeyup="CalculateTotal(this.form)"></TD><TD>Spelt White Bread* 18 oz</TD><TD ALIGN="RIGHT">$3.99</TD>
</TR>
<TD>TOTAL</TD>
<TD ALIGN="RIGHT"><INPUT TYPE=TEXT NAME=TOTAL SIZE=10 onFocus="this.form.elements[0].focus()"></TD>
</TABLE>
<P>
</FORM>
I have recently installed google custom search on a page- using the iframe selection, so I can have control over the look of the page and it isn't a google branded page. The problem is- with JS disabled, this form doesn't work. However, the option to display results on a google hosted page does work. This is very important for accessibility for this site, so what I am wanting to do is have the basic search show ONLY if there is no JS enabled. But for everyone else- it displays as I intended. JS isn't my bread and butter, but I think it's the tool to use here. Could someone offer some guidance? Main Form Code: <div style="float:right">
<script type="text/javascript" src="/js/main.js"></script>
<div id="searchBox" class="searchBoxTopLevelNav">
<form name="search" id="search" action="search.php?">
<label for="q" style="display:none";>Site Search</label>
<input onclick="javascript:SearchClear(this);" onkeypress="javascript:OverrrideForms(this);" name="q" id="q" autocomplete="off" class="GoogleSearchTextBox" value="Search" />
<input name='btnG' onclick="javascript:SearchGoogle($(this).prev('input.GoogleSearchTextBox:first'));return false;" type='image' value='Search' src='../img/icons/search-gray.gif' alt='Go' align="top"/>
</form>
</div>
Form to display only if JS is not enabled Code: <form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="#" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
hi, Can any one tell how to change action attribute in form tag using javascript. thanks in advance regards sugeet Greetings, I'm working on a php/mysql app that has multiple tabs with multiple form fields. I am trying to incorporate a javascript form field detection function that alerts the user that they have not submitted their changes if they try to navigate away. The detection works as designed, but the problem I am having is when the form is submitted, the script senses an unload and still fires the alert. The form submits to itself and updates the database and then reloads the page with the new values. Is there a way to have the script ignore the forms submit url and skip the form check? Here is the code ( NOT mine, found it somewhere else.) Code: <script language="javascript">
var ids = new Array('description');
var values = new Array('<?php echo $detail['description']; ?>');
function populateArrays() {
// assign the default values to the items in the values array
for (var i = 0; i < ids.length; i++) {
var elem = document.getElementById(ids[i]);
if (elem)
if (elem.type == 'checkbox' || elem.type == 'radio')
values[i] = elem.checked;
else
values[i] = elem.value;
}
}
var needToConfirm = true;
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm) {
// check to see if any changes to the data entry fields have been made
for (var i = 0; i < values.length; i++) {
var elem = document.getElementById(ids[i]);
if (elem)
if ((elem.type == 'checkbox' || elem.type == 'radio') && values[i] != elem.checked)
return "Your changes have not been saved. Are you sure you want to leave?";
else if (!(elem.type == 'checkbox' || elem.type == 'radio') && elem.value != values[i])
return "Your changes have not been saved. Are you sure you want to leave?";
}
// no changes - return nothing
}
}
</script>
The url of the page is "edit.php?&mode=edit&t=2&id=284&cn=2009-002" The only detectable change to the query string would be the 't' variable. Basically what I want to do is have the script look for a change in the 't' variable and if detected, check the form values for changes. If 't' doesn't change, skip the script completely. Thanks.. Okay I have searched google for hours literally without luck so hopefully someone here can help. What I am trying to do is when someone submits the form if there are empty textboxes change the textbox's style from class="input" to class="inputreq". Someone please help, the formname is "signup" and the textboxes are "domain" and "username". Please help. Thanks. I'm in the middle of teaching myself PHP and SQL so I'm only at the paste-and-tweak level with Javascript. Bear with my newbie-ness. I've seen a few solutions for creating a form dropdown menu that changes a nearby image based on what is selected. I want exactly that, but is it possible to have the images also appear on mouseover? I found a menu solution using CSS, but when I applied it to a form, it didn't work. Can anyone put me in the right direction on how to do that? I've started with this code, but need to tweak it to do this if possible: Code:
<html>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)">
<option selected value="What is JavaScript?">What is JavaScript?</option>
<option value="Why learn JavaScript?">Why learn JavaScript?</option>
<option value="The difference between JavaScript and Java">The difference between Java and JavaScript</option>
<option value="What is DHTML?">What is DHTML?</option>
</select><br>
</td>
</tr>
<tr>
<td width="100%"><div id="output"></div><br>
<font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<p>
<script language="JavaScript">
/*
Drop down messages script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/
//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()
thecontents[0]='JavaScript is a scripting language developed by Netscape to add interactivity and power to web documents. Examples of JavaScript include live clocks, rollover effects,<br> <img src="http://www.google.com.au/intl/en_au/images/logo.gif"></img>'
thecontents[1]='The first word that comes to mind is: "Freedom baby, freedom!" With html, you are restricted to creating static, non interactive webpages. This, in today\'s internet standards, etc etc 1'
thecontents[2]='Java is completely different from JavaScript-It\'s a lot more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, etc. etc. 2'
thecontents[3]='DHTML, or Dynamic HTML, is a new web technology that enables elements inside your web page to be, well, dynamic. Things once considered unchangeable etc. etc 3'
//don't edit pass this line
function changecontent(which){
document.getElementById('output').innerHTML=thecontents[which.selectedIndex]
}
document.getElementById('output').innerHTML=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>
</body>
</html>
I'm probably missing something really obvious here, but I can't figure out how to get this to work. I'm trying to get a tooltip to work, as shown he http://jquerytools.org/demos/tooltip/index.html this is where I got the basic code for the javascript and the css styling, and I've put it all together in the way that I think it should work, but instead of creating a tooltip, it basically opens the content on a separate page. Would anyone be able to look at the source code for the website below and tell me if I'm missing something here? http://boardemotion.co.uk/test.html Any help would be really appreciated |
|||||||