|
JavaScript - Html Form Manipulation
I have created a simple webpage that allows users to search multiple comparison shopping sites at once. This is just a side project that I am working on. At the current time, the webpage has the sites listed with checkboxes. The user can put in a search term in the box and then select which sites they want to search. The sites then open in a new window or on different tabs depending on which browser they are using.
What I would like to do is find out if there is a way to have the same thing, but the sites open in the same window below the search box, like in tabbed frames. I tried doing something with the tabbed viewer script from dynamic drive: http://www.dynamicdrive.com/dynamici...bdocviewer.htm, but was unable to figure out how to get the search parameter into the url. My page can be found at http://www.imarkinteractive.com/tools/onesearch.html and all of the javascript is on the page. Does anyone know if this can be accomplished and if so, how would I go about doing it. I can run a php script on my server if that would be easier, but I would really appreciate the assistance. Thanks. Similar TutorialsHi i was wondering if anyone might be able to help me here as i hve an idea but not quite sure how to impliment it. I want to be able to create 2 Divs, 1 for my navigation button and a second for an image to be placed in. i ant to be able to have the 2nd div move position to underneath Div 1 when i hover over the navigaton(div 1). Ive attached a link to a diagram of what i mean Any help would be very much apreciated http://spark-box.co.uk/images/ideaz.jpg Hi I have a given url and want to back up a level. So for example if start with: url = "test/level1/level2/level3/" I would like to it remove the "level3/" to become url="test/level1/level2/" I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each. http://jsfiddle.net/defencedog/Zz7cX/ [My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine] regards;; Hi, I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image. I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree... Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated. I code through Greasemonkey using Firebug on Firefox. I'm trying to write my first script using a simple function to change the appearance of my email address in Gmail. My current email address is formatted like this example: Code: firstlast@gmail.com I want the script to manipulate the text to resemble this: Code: first.last@gmail.com I've posted my script below. The Mozilla error console shows no syntax errors or warnings. JavaScript IS allowed to run and there are no restrictions of any kind that should hinder this script's ability to run. What am I doing wrong in the code? Any help would be greatly appreciated! Code: (function () {
var loadOldName = window.document.body.getElementById('loading').getElementsByClassName('msg').textContent('\nLoading+ firstlast@gmail.com…\n');
var topLeftName = window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').innerHTML('<b>firstlast@gmail.com</b>');
var topLeftDrop = window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>');
function changeName() {
if(loadOldName) {
window.document.body.getElementById('loading').getElementsByClassName('msg').removeChild(textContent('\nLoading+ firstlast@gmail.com…\n')).appendChild(textContent('\nLoading+ first.last@gmail.com…\n'));
};
if(topLeftName) {
window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').removeChild(innerHTML('<b>firstlast@gmail.com</b>')).appendChild(innerHTML('<b>first.last@gmail.com</b>'));
};
if(topLeftDrop) {
window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').removeChild(innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>')).appendChild(innerHTML('<span class="Qu L4">first.last@gmail.com (default)</span>'));
};
};
changeName();
});
Hello, I am trying to get an image to change based on a date range within an array, then display that image on a webpage, if there is no corresponding date, then display a default image. I have NEVER coded in JavaScript and need some assistance with this. Here is the array example: Code: var holiday = new Array() holiday[0] = "images/bronc.jpg" holiday[1] = "0210, 0214, images/Valentines_Pic.jpg" holiday[2] = "0317, 0317, images/St-Patrics_Day.jpg" holiday[3] = "0701, 0704, images/4th_Of_July.jpg" holiday[4] = "1015, 1031, images/Halloween.jpg" holiday[5] = "1111, 1130, images/Thanks_Giving.jpg" holiday[6] = "1201, 1227, images/Christmas.jpg" holiday[7] = "9999, 9999, images/New_Years_Pic.jpg" holiday[0] would be the default image that would display if no other images fall in the date range at the begining of each array element. Then something like get date alter date to be mmdd if date >= firstarraydate and date <= secondarraydate then set image to ********.jpg else set image to *******.jpg loop then in the body display the correct image <p><img src="image" /></p> Or something simple like that. I have searched and cannot find anything simple like that. I have tried a few available scripts for rotating banners but they always either do not work at all or they use one specific date or time and since I am not too swift with javascript, any help would be greatly appreiated. Thanks Kel I have the following code for a textbox that is supposed to change itself to 20 if the entered value is over 20, to 1 if it's less than 1, and round itself to the nearest integer Code: <input type="text" size="1" name="blevel" value="1" onchange='
document.unitselect.blevel.value++;
document.unitselect.blevel.value--;
document.unitselect.blevel.value = document.unitselect.blevel.value / 1
Math.floor(document.unitselect.blevel.value);
if(document.unitselect.blevel.value > 20){
document.unitselect.blevel.value = 20
}else if(document.unitselect.blevel.value < 1){
document.unitselect.blevel.value = 1
}
'>
The textbox is in a form named "unitselect". For some reason, it just ignores the Math.floor line. After experimenting for a bit, I found out that it was treating the textbox value as a string. I tried both using the increment/decrement operators and dividing it by 1. Although the operations executed properly, it still treated it as a string after the operations. Does anyone know what I can do to round this value? Greetings. It has been a long while since I have needed to code and a lot has changed. I am looking for resources on how to use JavaScript to When a button is pressed it moves the playhead of a single video to an assigned frame or timestamp in the video and begin playing. Then when the playhead reaches its destination it stops. I have done this in Flash before using AS1 and simple keyframe based commands and buttons for goToandPlay and stop. Is there any good reading to be had on the interwebs on this topic? Thanks in advance!! Hello everyone, I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error. Thanks in advance, Alex Code(JS): Code: function runstuff() {
canvasthing = document.getElementById('1');
context = canvasthing.getContext('2d');
purple = new Image();
purple.src = 'img/buttonpurple.png';
purple.onload = function() {
context.drawImage('purple', 0, 0);
};
context.font = '16px Vani';
context.textBaseline = 'top';
context.fillText('Test', 26, 24);
}
Code(html): Code: <!doctype html> <html lang="en"> <head> <title>POB.G</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"> </script> </head> <body onload="runstuff()"> <canvas id="1" width="127" height="128"></canvas> </body> </html> Error: Code: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7" data: no] Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!! Here is the Code: Code: function getEl(element)
{
var object = null;
if (document.layers)
{
object = document.layers[element];
}
else if (document.all)
{
object = document.all[element];
}
else if (document.getElementById)
{
object = document.getElementById(element);
}
return object;
}
function addRow()
{
var tbl = getEl('invTbl');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellqty = row.insertCell(0);
var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
cellqty.appendChild(qty);
var cellitm = row.insertCell(1);
var itm = document.createElement('input');
itm.type = 'text';
itm.name = 'itm_' + iteration;
itm.id = 'itm_' + iteration;
itm.size = 30;
cellitm.appendChild(itm);
var celldsc = row.insertCell(2);
var dsc = document.createElement('input');
dsc.type = 'text';
dsc.name = 'dsc_' + iteration;
dsc.id = 'dsc_' + iteration;
dsc.size = 50;
dsc.value = iteration;
celldsc.appendChild(dsc);
var cellprc = row.insertCell(3);
var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
cellprc.appendChild(prc);
var celldel = row.insertCell(4);
var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
celldel.appendChild(del);
}
function removeRow(row)
{
alert("you are deleting row " + parseInt(row));
tbl = getEl('invTbl');
rowTotal = tbl.rows.length;
alert("there are " + rowTotal + " rows!");
tbl.deleteRow(parseInt(row));
for ( i = 1; i < rowTotal; i++ )
{
if ( i > parseInt(row) )
{
place = i - 1;
alert(i + " becomes " + place);
qtycontainer = "qty_" + i;
itmcontainer = "itm_" + i;
dsccontainer = "dsc_" + i;
prccontainer = "prc_" + i;
delcontainer = i.toString();
buttonchange = place.toString();
getEl(qtycontainer).name = 'qty_' + place;
getEl(qtycontainer).id = 'qty_' + place;
getEl(itmcontainer).name = 'itm_' + place;
getEl(itmcontainer).id = 'itm_' + place;
getEl(dsccontainer).name = 'dsc_' + place;
getEl(dsccontainer).id = 'dsc_' + place;
getEl('dsc_'+place).value = getEl('dsc_'+place).id;
getEl(prccontainer).name = 'prc_' + place;
getEl(prccontainer).id = 'prc_' + place;
getEl(delcontainer).name = buttonchange;
getEl(delcontainer).id = buttonchange;
alert("del button changed to " + getEl(i).id);
}
}
// updatePrice();
}
The button element for each row calls javascript:removeRow(this.id); Please help me figure out what I am doing wrong! If I have a javascript var in a webpage(html form textarea VALUE - yui) that contains html code, and want to appear it, in confirmformpage.php, then how to transfer it...? is it really needed go via PHP ...? and ofcourse use innerHTML to write it....yes I usually use an intermitened processform.php script. http://developer.yahoo.com/yui/editor Hi all, I have a form which takes some values as input and stores them in a db for another use. I have the following java script to validate the entries. Code: <HTML><HEAD><TITLE>Electronic Deposting Form</TITLE>
<script language="JavaScript">
<!-- script start
function validateComplete(formObj) {
if (emptyField(formObj.username))
alert("Please enter the Username.");
else if (emptyField(formObj.passwd))
alert("Please enter the Password.");
else if (emptyField(formObj.drop))
alert("Please enter the Drop Folder.");
else return true;
return false;
}
// Check to see if field is empty
function emptyField(textObj)
{
if (textObj.value.length == 0) return true;
for (var i=0; i<textObj.value.length; ++i) {
var ch = textObj.value.charAt(i);
if (ch != ' ' && ch != '\t') return false;
}
return true;
}
function chklen() {
var un = document.getElementById("username").value
var len = un.length;
if (len > 15) {
alert ("ERROR!!Only 15 characters are allowed in Username!!");
document.getElementById("username").value = un.substring(0,15); // remove excess characters
}
}
// script end -->
</script>
Now I am planning to add a combo box to the form where I have the environment field. Following is the code for the form. Code: <td align="left" valign="top"><FORM name="form" action="../saveDP.cgi" method="post" onSubmit="return validateComplete(document.form)"><TABLE width="100%" cellPadding=2 cellSpacing=2>
<TR>
<TD width="26%" class="label"><B>Username </B></TD>
<TD width="3%" class="label">:</TD>
<TD width="71%"><INPUT maxLength=255 size=28 name=username id='username' onkeyup="chklen()">
<TR>
<TD class="label" ><B>Password </B></TD>
<TD class="label">:</TD>
<TD><INPUT type=password maxLength=255 size=28 name=passwd>
<TR>
<TD class="label"><B> Environment </B></TD>
<TD class="label">:</TD>
<TD><SELECT class="input" size=1 name=environ>
<OPTION value=us selected><b> US </b></OPTION>
<OPTION value=uk><b> UK </b></OPTION>
</SELECT> </TD>
</TR>
<TD colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="19%"> </td>
<td width="9%"><INPUT type=submit value=Submit v:shapes="_x0000_s1034"> </td>
<td width="8%"><input type=reset value=Clear v:shapes="_x0000_s1035\"></td>
<td width="64%"> </td>
</tr>
</table></TD>
</TR>
As I am new to JS, can anybody help me to implement a combo box( ie first two options are US and UK and third one is a text box which i can enter any value, can't be left blank while submitting the form) with "Environment" field? How come this doesn't work? I take it because 'unchecked' is not valid? Code: if (document.forms["form"]["targetname"].value == "" && document.forms["form"]["unknownname"] == "unchecked") 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 want to build a form have a "payment" select option ex. when user choose option "credit card" is will show some textbox(firstname and lastname,ccnumber,ccv,expday...) when user choose option "paypal" is will show some textbox(firsname,email paypal). Please help me solve this Hi, Posting this in javascript because the problem might be caused by my scripting. I made a 3 page long form using javascript, and the contents of the second page aren't submitted to the php script. link Hope someone can check it for errors. Thanks! Hello experts ;p I'm new and i found this forums within google. I been stuck in a whole pile of thoughts and whatnot. I run a website for music community and basically postings of artists and their info.. Now a lot of my posters and specially the new ones don't know HTML at all so i'm the only one with HTML experience. So basically think in a way Wordpress. Authors need to post info about a band or artist .. Now it's a long progress to do by hand the same format and whatnot so what i need is i have already a layout i made in dreamweaver but the info is all marked as "Default Info" To put this short, i need so that my authors just fill out a Form that has all the required fields like "Bands Name" "Bands Bio" and they fill in the boxes. Now i those values to go in a Textarea so they just copy all the HTML and just paste it in the submission page so they all have the same format... Now i know how to make a form but using values from a form to go in a predefined html page so like.. would go on a page like this. Code: <html> <body> <h1>Value Band Name Here</h1> <br> <br> <h2>Band Biography</h2> <br> <VALUE Band BIO Here> <br> Albums :<br> <VALUE ALBUM NAME, VALUE ALBUM YEAR,<br> <br> <img src="ALBUM ART LOCATION VALUE HERE"> And so on.. Do you guys catch my drift? So they fill a form that then they click GENERATE CODE and the above goes in a textarea they copy from but the values are already filled from the form so it doesn't show up as <VALUE BAND NAME> it would just show what you filled in.. Any help would solve this problem that i been having for the past 3 months. Thank you if any help! PSSS I had this from someone but when i modified it , i broke it.. Is there a simpler way? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>band form</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> * { margin:0; padding:0; } body { background-color:white; } label, textarea { display:block; } </style> <script type="text/javascript"> window.onload=function() { document.getElementById('band').onsubmit=function() { var bandname=document.getElementById('bandname').value; var bio=document.getElementById('bio').value; var album1=document.getElementById('album1').value; var album1y=document.getElementById('album1y').value; var album1i=document.getElementById('album1i').value; var album2=document.getElementById('album2').value; var album2y=document.getElementById('album2y').value; var album2i=document.getElementById('album2i').value; var album3=document.getElementById('album3').value; var album3y=document.getElementById('album3y').value; var album3i=document.getElementById('album3i').value; var text="<h1>"+bandname+"</h1>\n\r<h2>Band Biography</h2>\n\r<p>"+bio+"</p>\n\r<h3>Albums</h3>\n\r<ul>\n\r<li>"+album1+" : "+album1y+" <img alt=\""+album1+"\" src=\""+album1i+"\"></li>\n\r<li>"+album2+" : "+album2y+" <img alt=\""+album2+"\" src=\""+album2i+"\"></li>\n\r<li>"+album3+" : "+album3y+" <img alt=\""+album3+"\" src=\""+album3i+"\"></li>\n\r</ul>"; document.getElementById('code').value=text; return false; } } </script> </head> <body> <form id="band" action="#"> <label>Band name: <input type="text" id="bandname"></label> <label for="bio">Band bio: </label> <textarea rows="20" cols="80" id="bio"></textarea> <label>Album 1: <input type="text" id="album1"></label> <label>Album 1 year: <input type="text" id="album1y"></label> <label>Album 1 image location: <input type="text" id="album1i"></label> <label>Album 2: <input type="text" id="album2"></label> <label>Album 2 year: <input type="text" id="album2y"></label> <label>Album 2 image location: <input type="text" id="album2i"></label> <label>Album 3: <input type="text" id="album3"></label> <label>Album 3 year: <input type="text" id="album3y"></label> <label>Album 3 image location: <input type="text" id="album3i"></label> <input type="submit"> </form> <p>Copy this:</p> <textarea rows="20" cols="80" id="code"></textarea> </body> </html> Wondering if anyone could point me in the right direction! I am trying to create a HTML form for a hire company that has multiple selection criterias i.e. mpg, passenger/seats, gearbox etc etc - based on these selections I need the form information to check against my JS object/array and find those objects which match the relevant attributes. The form itself has only radio buttons and one text field - I know how to take the data from an element of the form and put it into a variable so I can check it, but what I really want is to have all the information on the form matched against my object - Would I be looking at perhaps putting the form selections into a blank/new array and then comparing that to the object? If so any help/guidance would be greatly appreciated! Code: //array information */
var car=new Array("Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta");
var mpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
var passenger=new Array(2, 4, 5, 5, 7, 4, 5, 5, 2, 5);
var luggage=new Array(0, 1, 2, 2, 4, 1, 3, 2, 1, 2);
var fuel=new Array("Petrol", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Petrol", "Petrol");
var gearbox=new Array("Semi-Automatic", "Manual", "Manual", "Manual", "Manual", "Manual", "Automatic", "Automatic", "Manual", "Automatic");
var aircon=new Array("Yes", "No", "Yes", "Yes", "Yes", "No", "Yes", "Yes", "No", "Yes");
var daycost=new Array(2000, 30, 34, 44, 40, 25, 45, 87, 10, 31);
var weekendcost=new Array(3800, 90, 97, 110, 99, 70, 115, 243, 25, 90);
var weeklycost=new Array(12000, 135, 167, 183, 162, 124, 173, 560, 65, 130);
var cars = {};
for(var i=0;i<car.length;i++)
{
cars[i] = {
name: car[i],
mpg: mpg[i],
passenger: passenger[i],
luggage: luggage[i],
fuel: fuel[i],
gearbox: gearbox[i],
aircon: aircon[i],
daycost: daycost[i],
weekendcost: weekendcost[i],
weeklycost: weeklycost[i]
}
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Car Hires</title> <link rel="stylesheet" type="text/css" href="view.css" media="all"> <script type="text/javascript" src="array.js"></script> </head> <body id="main_body" > <img id="top" src="top.png" alt=""> <div id="form_container"> <h1><a>Car Hires</a></h1> <form id="myform" class="appnitro" method="post" action=""> <div class="form_description"> <h2>Car Hires</h2> <p>Fill the form below, and we will provide you with a list of cars that match your requirements.</p> </div> <ul > <li id="li_1" > <label class="description" for="element_1">Name </label> <span> <input id="element_1_1" name= "fname" class="element text" maxlength="255" size="8" value=""/> <label>First</label> </span> <span> <input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="14" value=""/> <label>Last</label> </span> </li> <li id="li_2" > <label class="description" for="element_2">Email </label> <div> <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> </div> </li> <li class="section_break"> <h3>Section Break</h3> <p></p> </li> <li id="li_4" > <label class="description" for="element_4">No. of Passengers </label> <div> <input id="element_4" name="passengers" class="element text small" type="text" maxlength="255" value=""/> </div><p class="guidelines" id="guide_4"><small>Enter the number of passengers in numerical format</small></p> </li> <li id="li_5" > <label class="description" for="element_5">Items of Luggage </label> <span> <input id="element_5_1" name="luggage" class="element radio" type="radio" value="1" /> <label class="choice" for="element_5_1">1</label> <input id="element_5_2" name="luggage" class="element radio" type="radio" value="2" /> <label class="choice" for="element_5_2">2</label> <input id="element_5_3" name="luggage" class="element radio" type="radio" value="3" /> <label class="choice" for="element_5_3">3</label> <input id="element_5_4" name="luggage" class="element radio" type="radio" value="4" /> <label class="choice" for="element_5_4">4</label> </span> </li> <li id="li_6" > <label class="description" for="element_6">Fuel Type </label> <span> <input id="element_6_1" name="fuel" class="element radio" type="radio" value="1" /> <label class="choice" for="element_6_1">Diesel</label> <input id="element_6_2" name="fuel" class="element radio" type="radio" value="2" /> <label class="choice" for="element_6_2">Petrol</label> </span> </li> <li id="li_7" > <label class="description" for="element_7">Transmission/Gear Box </label> <span> <input id="element_7_1" name="gearbox" class="element radio" type="radio" value="1" /> <label class="choice" for="element_7_1">Automatic</label> <input id="element_7_2" name="gearbox" class="element radio" type="radio" value="2" /> <label class="choice" for="element_7_2">Manual</label> </span> </li> <li id="li_8" > <label class="description" for="element_8">Airconditioning </label> <span> <input id="element_8_1" name="aircon" class="element radio" type="radio" value="1" /> <label class="choice" for="element_8_1">Yes</label> <input id="element_8_2" name="aircon" class="element radio" type="radio" value="2" /> <label class="choice" for="element_8_2">No</label> </span> </li> <li id="li_9" > <label class="description" for="element_5">Miles Per Gallon</label> <span> <input id="element_5_1" name="MPG" class="element radio" type="radio" value="1" /> <label class="choice" for="element_5_1">10-30</label> <input id="element_5_2" name="MPG" class="element radio" type="radio" value="2" /> <label class="choice" for="element_5_2">30-50</label> <input id="element_5_3" name="MPG" class="element radio" type="radio" value="3" /> <label class="choice" for="element_5_3">50-80</label> </span> </li> <li id="li_10" > <label class="description" for="element_9">Duration of Rental </label> <div> <select class="element select medium" id="element_9" name="element_9"> <option value="" selected="selected"></option> <option value="1" >Day</option> <option value="2" >Weekend</option> <option value="3" >Full Week</option> </select> </div> </li> <li class="buttons"> <input type="hidden" name="form_id" value="365314" /> <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" /> </li> </ul> </form> <div id="footer"> Car Hire Form</a> </div> </div> <img id="bottom" src="bottom.png" alt=""> </body> </html> This is what I'm trying to do. CONDITIONS: If a person selects a Friday Class but not a Saturday Class the Total Cost Field will automatically enter $99. If a person selects a Saturday Class but not a Friday Class the Total Cost Field will automatically enter $99 as well. If a person selects both a Friday & Saturday Class the Total Cost field will automatically be $159. I found the following code and so far only have it changing when a Friday class is entered. I have no idea where to go from here. Please help. 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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<p><span class="style1">Friday Class:</span>
<select id="fridayClass" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Saturday Class:</span>
<select id="saturdayClass" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
</div>
<div><span class="style1">Total Cost:</span>
<input type="text" id="totalCost"/></div>
<script>
window.onload = function () {
var friday = document.getElementById('fridayClass'),
saturday = document.getElementById('saturdayClass');
friday.onchange = function () {
totalCost.value = '$99.00';
};
};
</script>
Hi, I am trying to submit a form in javascript on clicking 'Button1'.On submission,it will disable the html table 'HTMLTable1' present in it.The code which I am using is as: Code: function OnButton1_Click ( ) {
var oRows = document.getElementById('HTMLTable1').getElementsByTagName('tr');
var irows = oRows.length ;
if (confirm("Are you sure you want Submit?"))
{
for(k=1; k<=irows; k++)
{
if(document.getElementById("list"+k).selectedIndex == 0)
{
document.getElementById("list"+k).selectedIndex = 1;
document.getElementById("list"+k).options[1].style.backgroundColor = "green";
}
}
Saver();
document.getElementById("HTMLTable1").disabled = true;
}
else{
alert("Submit cancelled!");
}
}
But On submit,the html table is getting disabled just for a moment then again it becomes active and user can interact with it.Can anyone tell me where this code is misbehaving? Thanks, Anil |
|||||||