|
JavaScript - Help How To Show The Difference In A Form
is there a simple way or any way at all of making the ($50.00) ($40.00) ($30.00) ($20.00) show the difference instead... like if i chose $40.00 then the $50.00 would say +$10.00 and the 30 and 20 would say -$10.00 and -$20.00
Code: <p align="left">CASE</p> <center> <select name="caseselect" style="width:625px" onchange="Calculate(); swapImage(this,'caseimg');"> <option value="50#COOLER MASTER Elite 310red.jpg" selected="1">COOLER MASTER Elite 310 Red ($50.00)</option> <option value="40#COOLER MASTER Elite 310blue.jpg">COOLER MASTER Elite 310 Blue ($40.00)</option> <option value="30#COOLER MASTER Elite 310orange.jpg">COOLER MASTER Elite 310 Orange ($30.00)</option> <option value="20#COOLER MASTER Elite 310silver.jpg">COOLER MASTER Elite 310 Silver ($20.00)</option> </select> Similar TutorialsI have a drop down selection where it shows and hides form inputs depending on selection. When the page loads it shows the drop down selections with no form inputs. After user selects drop down it shows the form fields. It works great but I want it to show the same form fields after the user hits the submit button which submits the page to itself. It currenlty goes back to the default selection list and doesnt show any of the form fields. Basically it hides all the form fields after the user hits submit button. How do I make it keep the last shown form fields after the user hits the submit button? test3.html looks like this: Code:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
</script>
</head>
<body>
<form name="tester" action="test3.html" method="get">
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">
<select name="type" onchange="display(this,'text','image');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Texts</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Hi, I have any form for tell friends ! How To show Div After Click (tell friend) link and hide div after onsubmit form ? ( using Jquery or java script) Example : TELL FRIENDS CLICK LINK <div id="formhide"></div> (default is hidden). After Click Show Loading Message and show form for send data to any email . so if Form is valid Show loading message and message Success ! so hide dive ( to default) DMEO: http://www.makaan.com/ ( please search any . . . ) after search click in send email & sms button . you see . . . . Thanks Hi, I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like... PHP Code: <form id="form1" name="form1" method="post" action=""> <p> <label for="select">Membership:</label> <br /> <select name="select" id="select"> <option value="Premium" selected="selected">premium</option> <option value="Bronze">bronze</option> </select> </p> <p>Membership No:<br /> <input type="text" name="textfield" id="textfield" /> </p> OR<br /> Sponsor: <br /> <select name="select2" id="select2"> <option value="329">329</option> <option value="234">234</option> </select> </form> appreciate the help So I am trying to make a form that will eventually take the user to a specified link. It is a form that uses drop down menus. I based this off of someone elses code (with permission ), but it shows everything <= user input. I cannot for the life of me figure out how to make it only show only one of the next options. here is the JS code: Code: <script language="JavaScript">
function ShowMenu(num, menu, max)
{
for(i = 1999; i <= num; i++){
var menu2 = menu + i;
document.getElementById(menu2).style.display = 'block';
}
var num2 = num;
num2++;
while(num2 = max){
var menu3 = menu + num2;
document.getElementById(menu3).style.display = 'none';
num2=num2+1;
}
}
</script>
This is only the JS code. I didn't want to waste space with the rest of the code. If you want to see it let me know and I can include that. I am sure this is rather basic, but my JS knowledge is less than that...It has been some time since undergrad computer science class. Thanks in advance for any help! I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show. I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful. Code: <select id="Program" name="Program" size="1" onchange="
$other = document.getElementById('other_program').style;
$invoice = document.getElementById('invoice');
if (selectedIndex==6) {
$other.visibility='visible';
if ($invoice.value == 'General Fund') $invoice.value='';
} else {
$other.visibility='hidden';
if (selectedIndex==1) {
$invoice.value='Renegade Fund';
} else {
$invoice.value='Please Specify';
}
}
">
<option selected="selected" value="Not Selected"> - - Select One - - </option>
<option value="Athletics">Athletics</option>
<option value="Drum Line">Drum Line</option>
<option value="Renegade Fund">Renegade Fund</option>
<option value="General Scholarships">General Scholarships</option>
<option value="President's Circle">President's Circle</option>
<option value="Other">Other</option>
</select>
<span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>
<!-- the following is the new select group ive set up
<span id="alumni">
<select id="select-alumni" name="select-alumni" size="1">
<option selected="selected" value="Not Selected">Yes or No</option>
<option value="Yes-alumni">Yes</option>
<option value="Not-alumni">No</option>
</select>
</span>
-->
The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks! <head> <script type="text/javascript" language="javascript"> function showInfo() { var typeOne = document.getElementById('bmp'); var typeTwo = document.getElementById('junction'); var typeThree = document.getElementById('mile'); if(document.basicform01.Location_Type.value == "BMP to EMP") { typeOne.style.display="inline"; typeTwo.style.display="none"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Junction to Junction") { typeOne.style.display="none"; typeTwo.style.display="inline"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Milepost") { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="inline"; } else { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="none"; } } </script> <style>*[style] {outline:none}</style> </head> <body> <fieldset> <dl> <dt><label for="Location_Type">Location Type *</label></dt> <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()"> <option value="" selected="selected">Select One...</option> <option value="BMP to EMP">BMP to EMP</option> <option value="Junction to Junction">Junction to Junction</option> <option value="Milepost">Milepost</option> </select></dd> <div id="bmp" style="display:none;"> <dt><label for="bmpDetails">BMP</label></dt> <dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd> <dt><label for="empDetails">EMP</label></dt> <dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd> </div> <div id="junction" style="display:none;"> <dt><label for="fromJunction">From Junction:</label></dt> <dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd> <dt><label for="toJunction">To Junction:</label></dt> <dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd> </div> <div id="mile" style="display:none;"> <dt><label for="milepostNum">Milepost</label></dt> <dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd> </div> <p> </dl> <p> </fieldset> </body> Hi Guys, I'm developing a registration form to be viewed on an iPad, this will be put on display in store for customers to complete. The idea is that once the form has been completed a success message will show in lightbox form (currently using query reveal) and then after a few seconds disappear and the form will be refreshed. Any idea on how to do this? I am using the below code but the obvious error is with the action. "<form name="signup" class="form" id="signup" action="data-reveal-id="myModal"" method="post" onsubmit="return validate_signup(this)">" All help very much appreciated. Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it. Rather than waste tons of space pasting it here, here's the pastebin: http://pastebin.ca/1822165 alternatively here is the live version: http://soniajacobwedding.com/site/rsvptest.html I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy. Helloo Im new to javascript.. I need help badly... here are two tabless. 1. information of a friend. 2nd table i get when i click da image (ADD ANOTHER FRIEND) but, on validation and submission.. the second table is not showing upp... When i once click ADD FRIEND.. i want the table to show up on reload and validation.... Thanks Here is my code <? if (isset($_POST['submit'])) { if (!$frndname) { $frndname_error = 1; $problems=1; } if (!$frndcity) { $frndcity_error = 1; $problems=1; } ///doo db stuff insertion } ?> <!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>Untitled Document</title> <script type="text/javascript"> function showTable() { var table = document.getElementById("myTable"); if (table) table.style.display = "block"; var div = document.getElementById("frndimg"); if(div) div.style.display = "none"; } </script> </head> <body> <form action="" method="POST" name="form1"> <?php if(!isset($_POST['submit']) or $problems) { ?> <table> <tr> <td colspan="2"> <table width="21%"> <tr> <td width="3%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="3%" align="left" valign="top"> </td> <td width="16%"><? if ($frndname_error) { echo ("<font color='#FF0000'>Name:</font>"); } else { echo ("Name:"); }?> <b><font color="#FF0000">*</font></b><br> <input type="text" name="frndname" id ="frndname" value="<?php echo $frndname; ?>" maxlength=45 size=25></td> <td width="81%" colspan="3">City: <b><font color="#FF0000">*</font></b><br><input type="text" id="frndcity" name="frndcity" value="<?php echo $frndcity; ?>" maxlength=45 size=25> </td> </tr> </table></td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td > <div style="float:left;cursorointer;"> <img src="images/referral_add_friend.jpg" width="190" height="28" onClick="showTable()" title="Click to add another friend" id="frndimg"> </div> </td></tr> <tr> <td colspan="2"> <table width="100%" id="myTable" style="display:none;"> <tr> <td width="4%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td width="53%"> NAme: <b><font color="#FF0000">*</font></b><br> <input type="text" name="frnd1name" id ="frnd1name" value="<?php echo $frnd1name; ?>" maxlength=45 size=25></td> <td width="47%" colspan="3">City: <b></b><br><input type="text" id="frnd1city" name="frnd1city" value="<?php echo $frnd1city; ?>" maxlength=45 size=25> </td> </tr> <tr> <td width="4%" align="left" valign="top"> </td> <td>Phone Number: <b></b><br> <input type="text" name="frnd1phone" id ="frnd1phone" value="<?php echo $frnd1phone; ?>" maxlength=45 size=25></td> <td colspan="3">Email: <br><input type="text" id="frnd1email" name="frnd1email" value="<?php echo $frnd1email; ?>" maxlength=45 size=25> </td> </tr> <tr><td> </td></tr> </table> </td></tr> <tr> <td><input type="image" src="images/submit_referral.jpg" height="30" width="173" border="0" alt="Submit Form" value="submit"></td></tr> <tr><td> </td><td align="center" class="referralheading"> Fields Marked With * Are Required</td></tr> </table> <? } ?> </form> </body> </html> What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears. I was so close to make it , using this example: Code: <script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>
<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>
But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears. Here are some images of what I want to do. Befo http://img82.imageshack.us/img82/7093/beforens9.jpg After http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules). So can someone help me with this script?? Please! I am pritty noob to the javascript. I'm trying to write something to display the percentage difference of my parents' ages. I'm obviously having issue. Also I would like to shorted the percentage output to three digits, e.g. 9.25%. Any help would be greatly appreciated. Here is what I have. Code: //Set the two dates var dadDate=new Date(1964, 9, 27); //Month is 0-11 in JavaScript var momDate=new Date(1962, 4, 29); var today=new Date(); //Get 1 day in milliseconds var one_day=1000*60*60*24; //Calculate difference btw the two dates, and convert to days var dadDay=Math.ceil(today.getTime()-dadDate.getTime())/(one_day); var momDay=Math.ceil(today.getTime()-momDate.getTime())/(one_day); //Calculate difference var abDif=Math.abs(dadDay-momDay); var agePer=Math.ceil(((abDif)/(dadDay + momDay)/2)*100); document.write"Dad, congratulations. You are " agePer "% younger than Mom."; Hi there How can you calculate the difference in two dates that are in different formats? I have one date as: '2010-06-16 21:20:44.000' and the other date as now = new Date(); I want to subtract the dates to see if it is over 30 days. Thanks! Hi, back for more help Im doing a hire price script for my works website, i have two time input input boxes using <select> function. I need a script to figure out the time diffrence between the two times, and if the second time is 3 or more hours before the first time it adds a days charge, well, it dosent even need to figure out the exact difference between the two, only need to see if the second is > by 3 or more, here is my script Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" profile="http://gmpg.org/xfn/11">
<head>
<meta http-equiv="Content-Type" content="UTF-8" />
<title>Car Hire Ottershaw | Van Hire Ottershaw | Car Rental | Van Rental </title>
<meta name="keywords" content="Car Hire Ottershaw, Surrey, Van Rental Ottershaw, Van Hire Ottershaw, Car Rental Ottershaw, " />
<link rel="stylesheet" href="layout-ff.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<!-- put java here................................. -->
<script language="javascript" type="text/javascript" src="datetimepicker.js">
//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com
</script>
<!-- stop java here ................................. -->
</head>
<body>
<!-- content ................................. -->
<form name="date">
<select name="car" id="car">
<option value="A">Manual Panda / Auto Smart</option>
<option value="B">Manual Clio 3 3Dr or 5 Dr / Manual Picanto</option>
<option value="CD">Manual Rio / Clio 1.2T / Auto Picanto</option>
<option value="E">Manual Venga / Auto Rio</option>
<option value="F">Auto Focus / Cee'd / Manual Megane</option>
<option value="G">Auto Cee'd Estate / Manual Megane Estate</option>
<option value="H">Auto Mondeo</option>
<option value="I">Manual Sportage 2WD</option>
<option value="J">Auto Sportage 4X4</option>
<option value="K">Auto Galaxy / Manual RCZ</option>
<option value="L">Auto Sorento 4X4</option>
<option value="M">Manual Kangoo Van</option>
<option value="O">Manual LWB LL29 Trafic</option>
</select>
<p>start date:</p>
<input id='firstDate' type="text" size="25"><a href="javascript:NewCal('firstDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
<p>Start Time:
<select name="time1" id="time1">
<option value="1">08:00</option>
<option value="2">08:30</option>
<option value="3">09:00</option>
<option value="4">09:30</option>
<option value="5">10:00</option>
<option value="6">10:30</option>
<option value="7">11:00</option>
<option value="8">11:30</option>
<option value="9">12:00</option>
<option value="10">12:30</option>
<option value="11">01:00</option>
<option value="12">01:30</option>
<option value="13">02:00</option>
<option value="14">02:30</option>
<option value="15">03:00</option>
<option value="16">03:30</option>
<option value="17">04:00</option>
<option value="18">04:30</option>
<option value="19">05:00</option>
<option value="20">05:30</option>
<option value="21">06:00</option>
<option value="22">06:30</option>
<option value="23">07:00</option>
<option value="24">07:30</option>
</select>
<p>end date:</p>
<input id='secondDate' type="text" size="25"><a href="javascript:NewCal('secondDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
<p>End Time:
<select name="time2" id="time2">
<option value="1">08:00</option>
<option value="2">08:30</option>
<option value="3">09:00</option>
<option value="4">09:30</option>
<option value="5">10:00</option>
<option value="6">10:30</option>
<option value="7">11:00</option>
<option value="8">11:30</option>
<option value="9">12:00</option>
<option value="10">12:30</option>
<option value="11">01:00</option>
<option value="12">01:30</option>
<option value="13">02:00</option>
<option value="14">02:30</option>
<option value="15">03:00</option>
<option value="16">03:30</option>
<option value="17">04:00</option>
<option value="18">04:30</option>
<option value="19">05:00</option>
<option value="20">05:30</option>
<option value="21">06:00</option>
<option value="22">06:30</option>
<option value="23">07:00</option>
<option value="24">07:30</option>
</select>
<p>Days:</p>
<input type="text" name="days" />
<p>Price:</p>
<input type="text" name="rentalamount" />
<p>Deposit:</p>
<input type="text" id="depo" name="depo" />
<p>Excess mile price</p>
<input type="text" name="mile" />
<p><input type="button" value="Quote" onclick="dateDiff() ;calculate() ;deposit() ;milecharge() ;agecheck()" />
<INPUT TYPE=RESET name="clear" value="Clear Form"/></p>
</form>
<p> GAV: Deposit and mile excess now working, 28 days now works and now have a reset button also made a pop up for age restriction(select sportage/galaxy/rcz
) all prices are now on here now all to do is set up cecks on the dates ( summer/ winter. collect before return e.c.t) im starting to like this java script **** !</p>
<!-- /content -->
</body>
</html>
thanks I'l not good in Javascript and I can't find anything about what I want.. . On a sports website there is a table with our ranking and results. On this site the content is changed weekly, but it stays in the same tables.. . Is it possible to make a javascript to get those tables and put them on my own website so the content will change on my site when the content is changed on the sports site? Please help me, it would save me lot of time.. . THx Hi peeps, I thought I'd post this here as I haven't had any luck finding what I'm after but wondered it someone else had seen a slideshow that worked this way. In theory it seems simple enough to do. Description: Bascially I'd have a slideshow with several list items (or divs) within it. Now the main think with this slidshow is the list items or divs would have differing widths. The pagination would be 'Previous' and 'next' arrows. When you clicked next, it would slide along and line up the left edge of the next item/div with the left item of the slideshow. An likewise for every click. Esentially I guess you'd be sliding along the width of the 'active slide'. 2 items/divs being visible in the window is not a problem, neither is one being cropped off at the end. As the 'active' slide would always be the left most slide. Does this seem Ok, am I making any sense at all? I hope so! If anyone has seen something like this it would be great or maybe point me in the right direction. Cheers & thanks for reading, Ste Calculating the difference between two dates in JavaScript is relatively straightforward, provided you choose the right Date methods to work with. Whichever way you get there.... see this http://www.tutorials99.com/tutorials...aScript/page_1 Hello, I'd like to be able to calculate the difference between 2 dates in the format dd/mm/yyyy var date1 = 06/01/2012 var date2 = 10/01/2012 Then an alert box would tell me there is a difference of 4 days. Thanks a bunch Jay. Hi all, I use JS to dynamically generate HTML such as a <select> dropdown menu. I do it by placing an empty element where I want the dropdown to appear (i.e. <span id="dropdown"></span>) then getElementById('dropdown') and insert the HTML with innerHTML = html. But I could also do it by getting the empty element and then doing an "insertBefore" or "appendChild" call. Is one "preferred" over the other? Is one "better" than the other? Thanks. -- Roger Please can u help? how would i get the total work hours between two times (8:30 to 5:30) from a web form. I tried just minusing one from the orther but it came back with "Nan" |
|||||||