|
JavaScript - Sum Total From Multiple Select Menus To Display In <div>
I have 9 select menus that are populated by a php for loop. Each has a numeric value that is displayed base on the selection (which I have working).
I can not figure out how to sum all of these values and display them in a <div> tag. Any help will be greatly appreciated. what I have thus far: PHP Code: // Part of a function that creates drop down boxes <select name="$name" onchange="document.getElementById('cost_$name').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('cost_$name')"> // option is generated in a for loop $i is a number and $cost is a different number <option value="$i" cost_$name="$cost">$i</option> // <div> tag for output of cost_$name where cost_$name is output <div align="center" id="cost_$name">0</div> /* the above is working fine.. it will display the correct output when an option is selected from the drop downs */ //At the bottom of the table I want to total the values of the cost_$name 's // So far I came up with this to do the addition, what I don't know is how to // get the values into the // getValues() function and output them in a <div> tag. <script language="javascript"> function getValues(){ var numVal1=parseInt(document.getElementById("cost_body").value); var numVal2=parseInt(document.getElementById("cost_agility").value); var numVal3=parseInt(document.getElementById("cost_reaction").value); var numVal4=parseInt(document.getElementById("cost_strength").value); var numVal5=parseInt(document.getElementById("cost_charisma").value); var numVal6=parseInt(document.getElementById("cost_intuition").value); var numVal7=parseInt(document.getElementById("cost_logic").value); var numVal8=parseInt(document.getElementById("cost_willpower").value); var numVal9=parseInt(document.getElementById("cost_edge").value); var totalValue = numVal1 + numVal2 + numVal3 + numVal4 + numVal5 + numVal6 + numVal7 + numVal8 + numVal9; document.getElementById("cost_total").value = totalValue; } </script> Similar TutorialsHi, please help. I've been trying to check what I did wrong in my code but still the total doesn't show. Below is my javascript function: Code: function CalculateTotal(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r)
{
var tota= document.getElementById('a');
var totb= document.getElementById('b');
var totc= document.getElementById('c');
var totd= document.getElementById('d');
var tote= document.getElementById('e');
var totf= document.getElementById('f');
var totg= document.getElementById('g');
var toth= document.getElementById('h');
var toti= document.getElementById('i');
var totj= document.getElementById('j');
var totk= document.getElementById('k');
var totl= document.getElementById('l');
var totm= document.getElementById('m');
var totn= document.getElementById('n');
var toto= document.getElementById('o');
var totp= document.getElementById('p');
var totq= document.getElementById('q');
var totr= document.getElementById('r');
var grandTotal = tota + totb +totc + totd + tote + totf + totg + toth + toti +totj + totk + totl + totm + totn + toto + totp +totq + totr; document.getElementById('Total').value = grandTotal.toFixed(2);
}
Below is my textbox where there are more than 10 textboxes for user to enter donation amount. I'd like to calculate all the donation amount entered then show total in the bottom. Code:
<fieldset id="fieldset-in_registration">
<table>
<tr>
<td style="width:390px;text-align:left"><label for="a" style="font-weight:bold">A. Aloha United Way Community Care Fund </label></td>
<td style="float:right"> <input id="a" name="a" class="text" type="text" value="$<?php safeEcho($form['a'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('a');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="b">211 Information and Referral Services </label></td>
<td style="float:right"> <input id="b" name="b" class="text" type="text" value="$<?php safeEcho($form['b'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('b');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="c">Volunteer Hawaii/Gifts-in-Kind</label></td>
<td style="float:right"> <input id="c" name="c" class="text" type="text" value="$<?php safeEcho($form['c'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('c');?> </td>
</tr>
</table>
</fieldset>
<fieldset id="fieldset-in_registration">
<label for="impact" style="font-weight:bold">B. Impact Areas</label>
<table>
<tr>
<td style="width:390px;text-align:left"><label for="d">Crime and Drug Use</label></td>
<td style="float:right"> <input id="d" name="d" class="text" type="text" value="$<?php safeEcho($form['d'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('d');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="e">Early Childhood Development</label></td>
<td style="float:right"> <input id="e" name="e" class="text" type="text" value="$<?php safeEcho($form['e'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('e');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="f">Emergency and Crisis Services</label></td>
<td style="float:right"> <input id="f" name="f" class="text" type="text" value="$<?php safeEcho($form['f'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('f');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="g" >Financial Stability and Independence</label></td>
<td style="float:right"> <input id="g" name="g" class="text" type="text" value="$<?php safeEcho($form['g'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('g');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="h" >Homelessness</label></td>
<td style="float:right"> <input id="h" name="h" class="text" type="text" value="$<?php safeEcho($form['h'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('h');?> </td>
</tr>
</table>
</fieldset>
<fieldset id="fieldset-in_registration">
<p>D. <b>Agency/Program Support ($48 MINIMUM PER CHOICE)</b></p>
<p>My gift is designated to one or more specific agencies or programs. Processing fee may apply.
<p style="color:#FF0000">(Note: Agency Name is intentionally shorten/cut-off and indented to the next line to fit in the page. Choose either one of the indented line will give the same code.)</p>
<div class="formfield">
<table>
<tr>
<td>
<select id="designation_list1" name="designation_list1" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="i" name="i" class="text" type="text" value="$<?php safeEcho($form['i'])?>" style="width:100px;" onChange="CalculateTotal()""/>
</td>
</tr>
<tr>
<td>
<select id="designation_list2" name="designation_list2" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="j" name="j" class="text" type="text" value="$<?php safeEcho($form['j'])?>" style="width:100px;" onChange="CalculateTotal();"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list3" name="designation_list3" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="k" name="k" class="text" type="text" value="$<?php safeEcho($form['k'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list4" name="designation_list4" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="l" name="l" class="text" type="text" value="$<?php safeEcho ($form['l'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list5" name="designation_list5" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="m" name="m" class="text" type="text" value="$<?php safeEcho($form['m'])?>" style="width:100px;" onChange="CalculateTotal();"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list6" name="designation_list6" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="n" name="n" class="text" type="text" value="$<?php safeEcho($form['n'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list7" name="designation_list7" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="o" name="o" class="text" type="text" value="$<?php safeEcho($form['o'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list8" name="designation_list8" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="p" name="p" class="text" type="text" value="$<?php safeEcho($form['p'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list9" name="designation_list9" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="q" name="q" class="text" type="text" value="$<?php safeEcho($form['q'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list10" name="designation_list10" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="r" name="r" class="text" type="text" value="$<?php safeEcho($form['r'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td style="text-align:right;"><b>TOTAL GIFT(S) DESIGNATED (A-D)</b><BR /> (Must not exceed donation amount)</td>
<td><input name="Total" id="Total" type="text" maxlength="10" readonly="true" onChange="CalculateTotal(this.value)" /></td>
</tr>
</table>
Please help. I tried for how many days using the javascript calculations and still didn't work. I have a form with the same calculations and it does work but this one doesn't. Please help. Thanks a lot. Hope to hear from you soon. i want to validate against the dropdown fields below name usrchoices which repeat depends upon the data records from database...so if there is 5 questions retrieved from the database then the 5 dropdowns appears with name usrchoices, i don't know how to validate all these fields...so please any one here fix the following code and send me....Thanks a Million <script language="JavaScript"><!-- function validating(validate) { **if (form.usrchoices.selectedIndex == 0) { ****alert('Please select all Questions'); ****document.getElementById("validate").reset(); * ****return false; **} **return true; } //--></script> <form action="submitsurvey.asp" method="post" name="validate" id="validate" onSubmit="return validating()"> <% Do while Recordset_questions.EOF %> ****<select name="usrchoices" id="usrchoices"> **********<option value="" selected>Select Choices</option> **********<option value="Y">Yes</option> **********<option value="N">No</option> **********<option value="IDK">I Dont know</option> ********</select> <%Loop%> </form> Good day! I am new in javascript function. I have Javascript code for auto calculate here is the code: Code: <script type="text/javascript" language="javascript">
function autocalearn(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotEarn = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotEarn += val; //accumulate
}
}
var tot=Number(TotEarn) + Number(document.getElementById('Amount').value);
oForm.TotEarn.value = tot.toFixed(2);
//oForm.TotEarn.value = TotEarn.toFixed(2); //out
}
</script>
<!--Total Deduction AutoCompute-->
<script type="text/javascript" language="javascript">
function autocalded(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotalDed = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotalDed += val; //accumulate
}
}
//oForm.TotalDed.value = TotalDed.toFixed(2); //out
var totded=Number(TotalDed) + Number(document.getElementById('Deductions').value);
oForm.TotalDed.value = totded.toFixed(2);
}
</script>
and now my problem is...I have a textbox for the overall total, and i want it automatic subtract the total earn and total deduction.. I will attach my codes for further understanding. Thank you in advance I got no idea how to create a filter based on multiple drop menus to filter & sort data from php mysql query. Can anyone help me to write javascipt for this problem? My php mysql query as below:- mysql_select_db($database_winwin, $winwin); $query_rsMobile = "SELECT product_detail.product_Id, product_detail.product, product_detail.product_category, product_detail.product_brand, product_detail.product_name, product_detail.product_price, product_detail.thumbnail_url, product_detail.product_url, product_detail.product_status, product_detail.commission, product_detail.product_added_date FROM product_detail WHERE product_detail.product='Mobile Devices' AND product_detail.product_status='For sales'"; $rsMobile = mysql_query($query_rsMobile, $winwin) or die(mysql_error()); $row_rsMobile = mysql_fetch_assoc($rsMobile); $totalRows_rsMobile = mysql_num_rows($rsMobile); Whereby:- Product Brand: product_brand Product price: product_price Commission: commission Product name: product_name Product Thumbnail: thumbnail_url Product URL: product_url HTML for filters & sorter:- <div id="filters"> <form action="" method="post" name="form_filters" id="form_filters"> <table width="750" border="0"> <tr> <td>Brand:</td> <td><select name="productBrand" id="productBrand"> <option value="All Brands">All Brands</option> <option value="Sony Ericsson">Sony Ericsson</option> <option value="Samsung">Samsung</option> <option value="Nokia">Nokia</option> </select></td> <td>Price:</td> <td><select name="priceRange" id="priceRange"> <option value="All Price">All Price</option> <option value="Below RM1000">Below RM1000</option> <option value="RM1000-RM1999">RM1000-RM1999</option> <option value="RM2000 & Above">RM2000 & Above</option> </select></td> <td>Sort by:</td> <td><select name="productSort" id="productSort"> <option value="Sort By Name">Name</option> <option value="Sort By Price">Price</option> </select></td> <td><input name="Apply Filters" type="submit" value="Apply Filters"/></td> <td><input name="Reset Filters" type="Reset" value="Reset Filters"/></td> </tr> </table> </form> </div> Once user click on "Apply Filters" javascript has to sort list the product items. HTML for Pager (Value for total items, display some page numbers with hyperlink (1,2,3....10,11,12), hyperlink to previous page, hyperlink to next page) :- <div id="pager"> No. of items per page: <select name="NumOfItem" id="NumOfItem"> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> Total Item: Pages ... Next... Previous </div> Javascript has to manage pager column. HTML for Product display:- <div id="product"> <div id="Thumbnail"> Here Javascript has to display Thumbnail image based on filters & sorter drop menus inputs. When click on this image page must redirect to "Product URL". </div> <div id="Price"> Here Javascript has to display "Price" based on filters & sorter drop menus inputs. When click on this "Price" page must redirect to "Product URL". </div> <div id="Commission"> Here Javascript has to display "Commission" image based on filters & sorter drop menus inputs. When click on this "Commission" page must redirect to "Product URL". </div> </div> Javascript has to repeat regions (<div id="product"></div>)based on "NumOfItem" drop menu (number of items display per page) and also update the pager column Hello, I REALLY like the dropdown menus that are on the Patagonia website. How difficult would this be to replicate? Is there a write-up or tutorial somewhere I can read and learn how to do this? Any help would be greatly appreciated, Thanks Here is the link: http://www.patagonia.com/web/us/home hi, i am totally new to JS and was wondering if anyone could just suggest me a JS code, "THAT WOULD SELECT MULTIPLE LINKS ON MOUSE CLICK" <div id="container"> <ul id="seatplan"> <li class="seat_01 A"><a href="#row_01" title="01A">01A</a></li> <li class="seat_02 A"><a href="#row_02" title="02B">02A</a></li> <li class="seat_03 A"><a href="#row_03" title="03C">03A</a></li> </ul></div> Presently, i can select ONE. these codes are assigned to images, if selected they change color. But i just want help on MULTIPLE SELECTION. thanks Hi, I am using a multiple select with javascript to update the navigation bar <li> depending on which single option is selected and it's working well. The only problem however, is when multiple are selected, I want all a class to be added to all the <li> but it's not working. if (document.getElementById("status_advanced").value == "1"){ $('.moduleTitle').html("<h2>Enquiries</h2><span class='utils'> <a id='create_image' href='index.php?module=AOS_Invoices&action=EditView&return_module=AOS_Invoices&return_ac tion=DetailView' class='utilsLink'><img src='custom/themes/default/images/create-record.gif?v=9FuiS_EWfdVgVhHTU4vK3g' alt='Create'></a><a id='create_link' href='index.php?module=AOS_Invoices&action=EditView&return_module=AOS_Invoices&return_ac tion=DetailView' class='utilsLink'>Create</a></span>"); $("#enquiries-nav").addClass("currentTab"); $("#jobs-nav").removeClass("currentTab"); } else if (document.getElementById("status_advanced").value == "2"){ $('.moduleTitle').html("<h2>Jobs</h2>"); $("#jobs-nav").addClass("currentTab"); $("#enquiries-nav").removeClass("currentTab"); } else if (document.getElementById("status_advanced").value == "3"){ $('.moduleTitle').html("<h2>Clearance</h2>"); $("#clearance-nav").addClass("currentTab"); $("#jos-nav").removeClass("currentTab"); } else if ((document.getElementById("status_advanced").value == "1") && (document.getElementById("status_advanced").value == "2")){ $('.moduleTitle').html("<h2>All</h2>"); $("#enquiries-nav").addClass("currentTab"); $("#jos-nav").addClass("currentTab"); } Any suggestions? Reply With Quote 01-20-2015, 01:56 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Suggest you have a select option "All". Use this example:- Code: <!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="InventoryList" method="post" action="">
<select id="SelBranch" class="class1" size="5" multiple="multiple">
<option value="All Branches">All Branches</option>
<option value="001 London">001 London</option>
<option value="002 Birmingham">002 Birmingham</option>
<option value="003 Manchester">003 Manchester</option>
<option value="004 Nottingham">004 Nottingham</option>
<option value="005 Bradford">005 Bradford</option>
<option value="006 Newcastle">006 Newcastle</option>
</select>
<input type="button" id ="ViewReport" value="View" class="class1" onclick="GetInventory();">
</form>
<script type = "text/javascript">
function GetInventory() {
var sel = document.getElementById("SelBranch");
var count = 0;
var SelBranchVal = [];
for (x=0; x<sel.length; x++) {
if (sel[x].selected) {
SelBranchVal[count] = sel[x].value;
count++;
}
}
alert(SelBranchVal);
}
</script>
</body>
</html>
Quizmaster: Which word for a spring or town with thermal or mineral waters used for drinking or bathing takes its name from a town in Belgium which is famed for its supposedly curative waters? Contestant: Volvic I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated. Code:
function details(val)
{
var info = val.split("|");
document.getElementById('num').value = info[0];
document.getElementById('price').value = info[1];
document.getElementById('package_name').value = info[2];
}
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>
Hope some one can assist me Below is my code which works fine. I need to be able to select more than one of the options at the same time. The code at the moment will only select one option rather than all my options. Any advice would be great. <HTML> <HEAD> <title>MDT Role and Application Selection Application - Gen-i</title> <!-- Example of the multiple selections Sub RunScript For i = 0 to (Dropdown1.Options.Length - 1) If (Dropdown1.Options(i).Selected) Then strComputer = strComputer & Dropdown1.Options(i).Value & vbcrlf End If Next Msgbox strComputer End Sub --> <script> function setOptions(chosen) { var selbox = document.myform.opttwo; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('Microsoft Project','Microsoft Project selected'); selbox.options[selbox.options.length] = new Option('Microsoft Visio','Microsoft Visio selected'); selbox.options[selbox.options.length] = new Option('Cognos Application','Cognos Application selected'); } if (chosen == "2") { selbox.options[selbox.options.length] = new Option('Microsoft Project','Microsoft Project selected'); selbox.options[selbox.options.length] = new Option('Microsoft Visio','Microsoft Visio selected'); selbox.options[selbox.options.length] = new Option('Cognos Application','Cognos Application selected'); selbox.options[selbox.options.length] = new Option('Oracle Discoverer','Oracle Discoverer selected'); selbox.options[selbox.options.length] = new Option('At Risk 5.55','At Risk 5.55 selected'); } if (chosen == "3") { selbox.options[selbox.options.length] = new Option('Microsoft Project','Microsoft Project selected'); selbox.options[selbox.options.length] = new Option('Microsoft Visio','Microsoft Visio selected'); selbox.options[selbox.options.length] = new Option('Vulcan 8','Vulcan 8 selected'); selbox.options[selbox.options.length] = new Option('Autocad Lite 2010 Lite','Autocad Lite 2010 Lite selected'); selbox.options[selbox.options.length] = new Option('Autocad Lite 2010 Full','Autocad Lite 2010 Full selected'); selbox.options[selbox.options.length] = new Option('Aquire','Aquire selected'); selbox.options[selbox.options.length] = new Option('WellCad','WellCad selected'); selbox.options[selbox.options.length] = new Option('ArcGis','ArcGis selected'); selbox.options[selbox.options.length] = new Option('QuickMap','QuickMap selected'); } } </script> <HTA:APPLICATION border="thin" borderStyle="normal" caption="yes" maximizeButton="yes" minimizeButton="yes" showInTaskbar="no" innerBorder="yes" navigable="yes" scroll="auto" scrollFlat="yes" /> <script LANGUAGE="VBScript"> Sub Window_onLoad window.resizeTo 600,720 End Sub </script> </head> <body style="{background-image:url('bg2.jpg'); background-repeat:no-repeat;}"> <CENTER> <img src="logo.gif" /> <h2 style="font-size: 12pt; font-family: Arial; color: #000">Please select the required role - Gen-i</h2> <div style="font-size: 10pt; font-family: Arial; color: #298FFF"> <form name="myform"><div align="center"> <b>Select a Role:</b> <br /> <select name="optone" size="1" onchange="setOptions(document.myform.optone.options [document.myform.optone.selectedIndex].value);"> <option value=" " selected="selected"> </option> <option value="1">General</option> <option value="2">Technical</option> <option value="3">Finance</option> </select> <br /><br /><b>Select Applications:</b> <br /> <select name="opttwo" size="10" multiple> <option value=" " selected="selected">Please select one of the options above first</option> </select> <p></p> <input type="button" name="go" value="Value Selected" onclick="alert(document.myform.opttwo.options [document.myform.opttwo.selectedIndex].value);"> </div></form> </body> </html> Hi I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose. Anyone know how that can be done? thanks Hello; New to Javascripting, new to forum. I searched the forum, and tried to adapt, to no avail. I am building a store and want users to be able to see how two items look together. I have it working, but it uses a drop down. I would like to display many items and have the user click on one "image", from the display of "top" images, to display it on top, and from another section of "bottom" images, click another image to display it on bottom. For instance to see what one plant would look like in different vases. If I could be picky, is there a way to make it all happen in the BODY of the page? I use DW and a template. Code:
<html>
<head>
<script language="javascript">
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
document.images.pictures2.src=
document.mygallery2.picture2.options[document.mygallery2.picture2.selectedIndex].value
}
//-->
</script>
</head>
<body>
<p class="style1">Try a few selections for your gift.</p>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><form name="mygallery"><select
name="picture" size="1" onChange="showimage()">
<option selected value="images/bear1.jpg">Bear 1</option>
<option value="images/bear2.jpg">Bear 2</option>
<option value="images/plant1.jpg">Plant 1</option>
<option value="images/plant2.jpg">Plant 2</option>
<option value="images/plant3.jpg">Plant 3</option>
</select>
</form>
</td>
<td><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="images/bear1.jpg" name="pictures" width="150" border=0></a></td>
</tr>
<tr>
<td><form name="mygallery2"><select
name="picture2" size="1" onChange="showimage()">
<option selected value="images/cup1.jpg">Mug 1</option>
<option value="images/cup2.jpg">Mug 2</option>
</select>
</form>
</td>
<td><a href="javascript:linkrotate(document.mygallery2.picture2.selectedIndex)" onMouseover="window.status='';return true"><img src="images/cup1.jpg" name="pictures2" width="150" border=0></a></td>
</tr>
</table>
</body>
</html>
I am working with a script from Dynamic Drive (found here) that allows you to select and copy a form element. I would like to modify the code to allow me to select multiple form elements with one select all button. this is the code for the head section: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script language="Javascript">
<!--
/*
Highlight and Copy form element script- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
//specify whether contents should be auto copied to clipboard (memory)
//Applies only to IE 4+
var copytoclip=1
function HighlightAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
if (document.all&©toclip==1){
therange=tempval.createTextRange()
therange.execCommand("Copy")
window.status="Contents highlighted and copied to clipboard"
setTimeout("window.status=''",1800)
}
}
//-->
</script>
and this is what I have so far in the body: Code: <a class="highlighttext" href="javascript:HighlightAll('form1.select1')">Select All</a><br>
<div class="form">
<form name="form1">
<textarea name="select1" rows=1 cols=50 >document name</textarea>
<textarea name="select2" rows=1 cols=50 >company</textarea>
<textarea name="select3" rows=1 cols=50 >language</textarea>
</form>
</div>
From the code, I would like to make it so that I can HighlightAll for each of the textareas (there will be lots of them). I have tried a lot of different options...I am not very experienced with Javascript, but have used it from time to time. A little more experienced with jQuery, but not enough to convert this. Any help is greatly appreciated. I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly. Code: <head>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
}
// ]]>
</script>
</head><body>
<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>
</form>
</body>
But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work. Code: <head>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
}
// ]]>
</script>
</head><body>
<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div> <BR><BR><BR>
<select name="Atype" onchange="display(this,'romance','adventure');">
<option>Please select:</option>
<option value="romance">Romance</option>
<option value="adventure">Adventure</option>
</select><BR><BR>
<div id="romance" style="display: none;">Some new fields here</div>
<div id="adventure" style="display: none;">Some even newer fields here</div>
</form>
</body>
Is there any way to fuse them and get a second select to work the same? Thanks in advance for the help! Another task please...I need to display the appropriate div when a radio button is selected... PHP Code: <body> <script type="text/javascript"> function checkjob(jobvalue){ if(jobvalue="type") { document.getElementById("type").style.display = "block"; }else if(jobvalue="select"){ document.getElementById("select").style.display = "block"; }else if(jobvalue="tag"){ document.getElementById("tag").style.display = "block"; } } </script><br /> <table width="200"> <tr> <td><label> <input type="radio" name="cat" value="type" id="cat_0" onchange="checkjob(this.value)" /> type</label></td><td><label> <input type="radio" name="cat" value="select" id="cat_1" onchange="checkjob(this.value)" /> select</label></td> <td><label> <input type="radio" name="cat" value="tag" id="cat_2" onchange="checkjob(this.value)" /> tag</label></td> </tr> </table> <div id="type" style="display:none"><input name="contact" type="text" /></div> <div id="tag" style="display:none">tag:<input name="contact" type="text" /></div> <div id="select" style="display:none"><select name=""> <option value="a" selected="selected">option 1</option> <option value="b">option 2</option> </select></div> </body> I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box. So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists. My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box. I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked. I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list. I can post code if it is helpful. Thanks, Taylor hi ! i would like to write the code for multiple text box select as shown in the link below: http://www.downloadplex.com/Mobile/I...ne_284120.html please see the screen shot 3 Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. I'm having a problem using javascript with a form. I'm using javascript to determine whether or not a person has selected "yes" or "no" from the select list. If "yes" is selected, the form is supposed to slide down and reveal two more fields. If "no" is selected, the form is supposed to slide back up hiding those two fields again. When "yes" is selected, the form displays the two new fields properly. In Safari, it does the slideDown animation, yet in Firefox, the new form fields just suddenly display. If I select "no" again, nothing happens. The slideUp animation doesn't play. So currently I am having to use $("#parent1").hide(); to get the "no" to trigger. So my two questions a 1. Is there any reason the slide animation plays smoothly in Safari but not in Firefox? 2. Why won't $("#parent1").slideUp("fast"); work when I select "no?" http://megandmatt.fernandwilbur.com/rsvp.php Any help would be greatly appreciated. |
|||||||