|
JavaScript - Adding Options To Selectobject
I have the following code below to make and populate a select box for a row. It is working on my IE, Firefox, and Chrome, but some others are having problems. It makes the select box, but it does not put the options in there. I am having issues troubleshooting because I cannot replicate the error.
Any ideas? Code: newManufacturerCell = newRow.appendChild(document.createElement('td'));
var newSelect=newManufacturerCell.appendChild(document.createElement('select'));
var firstOption=document.createElement('option');
var secondOption=document.createElement('option');
firstOption.text="Dell DCS";
secondOption.text="Hp";
newSelect.add(firstOption,null);
newSelect.add(secondOption,null);
newSelect.id="man"+count;
Similar TutorialsI currently have two selectbox, the first for categories and the second for subcategories. When an option from the category selectbox is chosen I would like the subcategory selectbox to be filled with options drawn from an array. The following code I have works for Chrome and Firefox but not in IE, I would appreciate any help to fix the code or new code which does a similar function. HTML: Code: <select size="9" id="category" name="category" onclick="return categoryChange();">
<option>Antiques ></option>
<option>Art and Crafts ></option>
</select>
<select style="visibility:hidden" id="subcategory" name="subcategory" size="9">
</select>
JAVASCRIPT: Code: function addOption(selectbox,text,value){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
var antiques = new Array("Furniture","Ceramics","Glass");
var art = new Array("Drawings and Paintings","Photographs");
function categoryChange(){
document.getElementById("subcategory").style.visibility = "visible";
document.getElementById("subcategory").innerHTML = "";
if(document.getElementById("category").value == "Antiques >"){
for (var i=0; i < antiques.length;++i){
addOption(document.myForm.subcategory, antiques[i], antiques[i]);
}
}
else if(document.getElementById("category").value == "Art and Crafts >"){
for (var i=0; i < art.length;++i){
addOption(document.myForm.subcategory, art[i], art[i]);
}
}
}
Hello! coding forums pals, I am resorting to you for help with a html form that uses javascript to validate data. the form is an invoice for a trip order where the user can select a trip location out of a listbox, a number of people traveling, and where they wish to stay(ex. hotel, tent, etc.) after the user selects one for each category and hits the "add to invoice" button, the fields in the invoice should get filled with the corresponding information. Now my question is how can I write code that will insert information in the next row down after the previous row has been filled? basically what logic and programming structure do I need in my function that will know when the first row in the invoice is filled. I'm struggling at the part where when the "add to invoice" button is clicked. some data is added to the invoice, and if the user wants to book another trip, the second trip should be appended in the second row of the invoice. what is happening in mine is that whenever I book another trip, the first one gets overwritten when in fact it should be left intact and the data should get appended in the next row down. Code: <html>
<head>
</head>
<script type="text/javascript">
function addit()
{
var f = document.myform;
var cost = 0;
var percentage = 0;
if(f.destination.selectedIndex == -1)
{
alert("please select a trip from the list");
return false;
}
if((f.travelers[0].checked == false) && (f.travelers[1].checked == false) && (f.travelers[2].checked == false) && (f.travelers[3].checked == false) && (f.travelers[4].checked == false) && (f.travelers[5].checked == false))
{
alert("please specify the number of people traveling")
return false;
}
if(f.accomodation.selectedIndex == -1)
{
alert("please specify your place of stay")
return false;
}
switch(f.destination.selectedIndex)
{
case 0:
document.myform.trip1.value="Mt. Kilimanjaro";
cost="2600";
break;
case 1:
document.myform.trip1.value="Denali";
cost="2000";
break;
case 2:
document.myform.trip1.value="Mt. Everest";
cost="3500";
break;
case 3:
document.myform.trip1.value="Maui";
cost="2700";
break;
case 4:
document.myform.trip1.value="Machu-Pichu";
cost="3100";
break;
}
for(i=0;i<f.travelers.length;i++)
{
if(f.travelers[i].checked)
f.num1.value=f.travelers[i].value;
}
f.cost1.value=parseInt(f.num1.value) * parseInt(cost);
switch(document.myform.accomodation.selectedIndex)
{
case 0:
percentage="0.00";
break;
case 1:
percentage="0.05";
break;
case 2:
percentage="0.15";
break;
case 3:
percentage="0.22";
break;
}
f.accom1.value=f.cost1.value * parseFloat(percentage);
f.total1.value=parseInt(f.cost1.value) + parseInt(f.accom1.value);
}
function deleteit()
{
var f = document.myform;
var txtbox = document.getElementsByClassName("text");
var rad = document.getElementsByClassName("rad");
f.destination.selectedIndex=-1;
f.accomodation.selectedIndex=-1;
for(j=0;j<txtbox.length;j++)
{
txtbox[j].value="";
}
for(x=0;x<rad.length;x++)
{
rad[x].checked=false;
}
}
function submitform()
{
document.myform.submit();
}
</script>
<body>
<form name="myform">
<table align="center" border="1" bgcolor="skyblue" cellpadding="0" cellspacing="0">
<tr><th>Trips Available</th><th>Number</br> Traveling</th><th>Accomodation</br> Type</th><th>Invoice</th></tr>
<tr><td align="center"><select name="destination" id="Select1" size="4">
<option>Mt. Kilimanjaro</option>
<option>Denali</option>
<option>Mt. Everest</option>
<option>Maui</option>
<option>Machu-Pichu</option>
</select></td>
<td align="center">1<input type="radio" name="travelers" value="1" class="rad"></br>2<input type="radio" name="travelers" value="2" class="rad"/></br>3<input type="radio" name="travelers" value="3" class="rad"/></br>4<input type="radio" name="travelers" value="4" class="rad"/></br>5<input type="radio" name="travelers" value="5" class="rad"/></br>6<input type="radio" name="travelers" value="6" class="rad"/></td>
<td align="center">
<select name="accomodation" id="Select2" size="3">
<option value=0>Tents</option>
<option>Yurts</option>
<option>Hostels</option>
<option>Hotels</option>
</select></td>
<td><table width="90%" align="center" cellpadding="2">
<tr><th>Trip</th><th>Num</th><th>Base</br>cost</th><th>Accom.</br>Surcharge</th><th>Total</th></tr>
<tr><td><input type="text" name="trip1" class="text" readonly></td><td><input type="text" name="num1" size="1" class="text" readonly></td><td><input type="text" name="cost1" class="text" readonly></td><td><input type="text" name="accom1" class="text" readonly></td><td><input type="text" name="total1" class="text" readonly></td></tr>
<tr><td><input type="text" name="trip2" class="text" readonly></td><td><input type="text" name="num2" size="1" class="text" readonly></td><td><input type="text" name="cost2" class="text" readonly></td><td><input type="text" name="accom2" class="text" readonly></td><td><input type="text" name="total2" class="text" readonly></td></tr>
<tr><td><input type="text" name="trip3" class="text" readonly></td><td><input type="text" name="num3" size="1" class="text" readonly></td><td><input type="text" name="cost3" class="text" readonly></td><td><input type="text" name="accom3" class="text" readonly></td><td><input type="text" name="total3" class="text" readonly></td></tr>
<tr><td><input type="text" name="trip4" class="text" readonly></td><td><input type="text" name="num4" size="1" class="text" readonly></td><td><input type="text" name="cost4" class="text" readonly></td><td><input type="text" name="accom4" class="text" readonly></td><td><input type="text" name="total4" class="text" readonly></td></tr>
</table></td></tr>
</tr>
<tr><td><input type="button" value="Add to Invoice" onclick="addit()"/></td><td><input type="button" value="Clear" onclick="deleteit()"/></td><td><input type="button" value="Buy Now" onclick="submitform()"/></td><td align="right">Total Sale:<input type="text" name="total" readonly/></td></tr>
</table></form>
</body>
</html>
Hi All, I have a javascript function which adds a label and value to a select widget in its parent window. The function is working fine in firefox and chrome without any errors or warnings. But it is not working in internet explorer. Please tell me what the issue is. Thanks in advance for your help. Code: function addToParent( formName, selectName, name, label ) {
var parent = window.opener;
var selectWidget = parent.document.forms[formName].elements[selectName];
if( selectWidget ) {
var length = selectWidget.length;
selectWidget[length] = new Option( name, label, false, false );
}
}
When I tried to debug, internet explorer shows an error in the following line Code: selectWidget[length] = new Option( name, label, false, false ); Is there anything wrong with this statement ?? Okay, I'm having some trouble getting my head around how to do this.. Code: <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="Rhino">Rhino</option> <option value="Bird">Bird</option> <option value="Rooster">Rooster</option> </select> <select> <option value="0202A">Rhino - Text</option> <option value="0203A">Rhino - Text2</option> <option value="0204A">Bird - Text1</option> <option value="0205A">Bird - Text2</option> <option value="0202B">Rhino - Text</option> <option value="0204B">Rhino - Text2</option> <option value="0204C">Rooster - Text1</option> <option value="0205C">Rooster - Text2</option> <option value="0206C">Rooster - Text3</option> </select> So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down. Just can't figure this out. >.< Hi I am trying to use Overlib code to develop a dropdown box area that I can populate with categories and buttons, however the Overlib seem to lie relevent to the mouse and not the button. Does anyone know any good examples maybe jquery, to create this type of large dropdown. I want to be able to populate the area with images, and categories using php. I hope this make some sense. Steve I've got 2 drop down boxes, dropdown1 and dropdown2, and i want certain options on dropdown2 to be greyed out or unavailable if certain selections are made in dropdown1. is this possible? and if so, how? thanks Hi there, I am looking for a javascript code for an html file. I am looking for something where when you put your mouse over the text, a drop down list will come down. If anyone can point me in the right direction that would be helpful. An example would be on a site like www.espn.com - when you put your mouse over NBA the following options appear: NBA Home, Scores, Schedule, Teams, etc. Hello everyone, Forgive me if I ask something stupid or don't word something just right. Basically in short I'm really struggling because I don't know javascript beyond the simplest of basic's "manipulating other code".... What I'm after or trying to do is simply create a script to launch a new page after a X amount of time, like a popup. But I need the new window to have the following options like no toolbar or scroll bars etc... This is the code I've been trying to manipulate for my purpose and just can't get it right meaning it doesn't work at all in fact I haven't even been able to get the timer part worked in since I couldn't get the launch part working..... I've made a web app using asp.net & vb.net and need a launch page so I don't have any toolbars or scrollbars etc.... Any help or input is much appreciated!! Thanks Code: <html>
<script>
var customerWindow;
function launchit() {
var var_height = screen.availHeight - 10;
var var_width = screen.availWidth - 10;
var customerUrl = "default.aspx";
if ( !customerWindow || customerWindow.closed ) {
options = 'top=0,' +
'left=0,' +
'height=' + var_height + ',' +
'width=' + var_width + ',' +
'fullscreen=no,' +
'directories=no,' +
'location=no,' +
'menubar=no,' +
'resizable=yes,' +
'scrollbars=yes,' +
'status=yes,' +
'titlebar=yes,' +
'toolbar=no';
var wname = new String(location.pathname);
var re1 = /\//g;
var re2 = /\\/g;
var re3 = /\./g;
wname = wname.replace( re1, "" );
wname = wname.replace( re2, "" );
wname = wname.replace( re3, "" );
customerWindow = window.open(customerUrl, wname, options);
if (customerWindow == null) {
alert("Could not open a new window. Are popups being blocked?");
}
else {
customerWindow.opener = null;
}
}
else {
customerWindow.focus();
}
}
</script>
<head>
<title>Test Lanuch</title>
</head>
<body id="launcher" onload="launchit();">
<div class="submit">
<input class="button" type="button" value="Launch" onClick="javascript:launchit();" />
</div>
</body>
</html>
I'm trying to make a jQuery slider, and I want the user (the person who installs it on their site) to be able to specify options easily. I know the Nivo slider does it from within the $(document).ready() event, but I can't figure out how to do it that way. I want it to be like this: Code: <script>
$(document).ready(function() {
myFunction({
option1: 'value1',
option2: 'value2',
etc: 'etc'
});
});
</script>
But how do I recover this data so I can use it later? Please i am new here and i need some urgent help. I am not much familiar with JavaScript. i have 3 options list as <ul> now what i want is when first scrollbar is chosen the second and third will be enable and will display dates and time..and when somebody choose a date he will be taken to a registration form. for example in my second option i will display dates this will be only enable when the city is being selected from first list: Code: <select> <option>Please Select</option> <option> 12/12/2009</option> <option > 12/12/2010</option> <option> 12/12/2011</option> <option> 12/12/2012</option> </select> here is the code for my option list: Code: <ul>
<li>I am in City<select name="dates">
<option value=0 >Please Select</option>
<optgroup label='test'>
<option value=3 style='font-family:Arial; color:#ffffff;'> City One</option>
<option value=4 style='font-family:Arial; color:#ffffff;'> City Two</option>
<option value=5 style='font-family:Arial; color:#ffffff;'> City Three</option>
<option value=6 style='font-family:Arial; color:#ffffff;'> City Four</option></select></optgroup>
</li>
<li>Dates Available<select name="dates">
<option value=0>Please Select</option></select>
</li>
<li>Times Available<select name="dates">
<option value=0>Please Select</option></select>
</li>
</ul>
Thanks for any help Hello! I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as: <select name="distance" id="jr_radius"> <option value="0.5">0.5 Miles</option> <option value="1">1 Mile</option> <option value="3" selected="selected">3 Miles</option> <option value="5">5 Miles</option> <option value="10">10 Miles</option> </select> So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right. Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5". Does that make sense? Any help will be greatly appreciated! Okay so I'm trying to come up with as many alternative methods to accomplish something. So I'm just seeking input from anyone who is willing to supply some. After the user clicks on a match type it'll know HOW MANY sides to the match there are so say for a singles match it'd have 2 sides (1 vs. 1) for a Triple Threat Match it'd have 3 sides (1 vs. 1 vs. 1) and so on. All matches have a stored field in the database of how many sides they have. So I'm thinking that I could have it create 3 divs (or something) down in the competitors area of how many sides there are in the match (separated by a VS. text block) and when the user selects a character from the dropdown and adds a character the user can maybe drag and drop the character's name to whatever side they choose. Its one idea. If you think of an EASIER more EFFICIENT way to do something like this and have an idea say something please or even if you can't let me know that you think it's a worth while idea. Code: <label for="matchtypedrop<?php echo $i+1 ?>">Match Type:</label>
<select class="dropdown" name="matchtypedrop<?php echo $i+1 ?>" id="matchtypedrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, matchtype FROM matchtypes';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['matchtype']."</option>\r";
}
?>
</select>
<label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
<select class="dropdown" name="charactersdrop<?php echo $i+1 ?>" id="charactersdrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, `character` FROM characters ORDER BY `character`';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
}
?>
</select>
<input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>
This code is supposed to batch transfer options between selects. It works flawlessly for single values, but when I select multiple options, all of them get deleted, but only one transferred. Any help is greatly appreciated! Thank you. Code: <html>
<head>
<title></title>
<script type="text/javascript">
function removeOptionSelected(b,j)
{
var elRem = document.getElementById(b);
var elAdd = document.getElementById(j);
var elOptNew = document.createElement('option');
var i;
for (i = elRem.length - 1; i>=0; i--) {
if (elRem.options[i].selected) {
//alert(elRem.options[i].text+' '+elRem.options[i].value+' deleted!')
elOptNew.text = elRem.options[i].text;
elOptNew.value = elRem.options[i].value;
try {
elAdd.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elAdd.add(elOptNew); // IE only
}
elRem.remove(i);
}
}
}
</script>
<style type="text/css">
div {
float: left;
/*border: 1px solid black;*/
}
div.contain {
width: 536px;
height: 500px;
border: none;
}
div.side {
width: 215px;
height: 500px;
}
div.middle {
width: 100px;
height: 300px;
padding-top: 200px;
}
select {
width: 200px;
height: 500px;
}
input {
width: 82px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="contain">
<div class="side">
<form name="left">
<select id="left" class="left" multiple name="out">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="orange">orange</option>
<option value="tangerine">tangerine</option>
<option value="pineapple">pineapple</option>
<option value="carrot">carrot</option>
<option value="grapefruit">grapefruit</option>
<option value="plum">plum</option>
<option value="blueberry">blueberry</option>
<option value="strawberry">strawberry</option>
<option value="cashews">cashews</option>
<option value="peanuts">peanuts</option>
</select>
</form>
</div>
<div class="middle">
<input type="button" value="Add-->" onClick="removeOptionSelected('left','right');" />
<input type="button" value="<--Remove" onClick="removeOptionSelected('right','left')" />
</div>
<div class="side">
<form name="right">
<select id="right" class="right" multiple name="out">
<option value="greenbeans">greenbeans</option>
<option value="walnuts">walnuts</option>
</select>
</form>
</div>
</div>
</body>
</html>
Hi all! I'm using a multiselect box on my website, similar to this one: <Select Name="multiselect[]" multiple="multiple"> <option>This is option 1</option> <option>This is option 2</option> <option>This is option 3</option> <option>This is option 4</option> </select> Now I want to set option 1, option 2 and option 3 as selected (highlighted) in javascript. How would I go about doing this? I tried something like this: document.taakform.elements['multiselect[]'].selectedIndex = "1" document.taakform.elements['multiselect[]'].selectedIndex = "2" document.taakform.elements['multiselect[]'].selectedIndex = "3" Of course this doesn't work (else I wouldn't be posting here ), but I hope you catch my drift. Thanks in advance guys (and gals)! Hi. I am not sure if this has been answered to other posts but I tried to search and I can't find the right answer for my problem. I am trying to learn javascript for my self and can't figure out my self. Actually this is the same like the pop-up calendar but the only difference is I don't want numbers, I need a list of options so user can choose and when they select, it will transfer to the textbox right away like the calendar. I have a form and trying to use a pop-up window to select an option then transfer the option selected to show on the textbox. I have 10 textboxes and all of them has a "Select" button to pop-up the option list. BTW, the "SELECT" button will populate the same option list. Here is my html code: Code: <select id="droplist" name="droplist" size="1" >
<option>Click to select...</option>
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option <?php echo helper_selected($prompt == $form['droplist']); ?> value="<?php echo $prompt; ?>" style="width:500"><?php safeEcho($prompt); ?> </option>
<?php endforeach; ?>
</select>
below is my array: PHP Code: <?php $designation_list = array( "00111" =>"Aloha of the Pacific/Transfer Assistance Program for High Income Students", "71122" =>"Aloha", "71231" =>"Free Housing Information", "71232" => "Drama Queen and King", "98765" => "Aloha Boy Home of the Land", "12345" => "Aloha Home", ); I wanted to use the option list over and over again for the 10 textboxes. Is that possible? Below is my sample code but didn't work. Please help.... Code: //javascript
var testpopup5 = new PopupWindow("testdiv5");
testpopup5.offsetX=-20;
testpopup5.offsetY=20;
testpopup5.autoHide();
var testpopup5input=null;
testpopup5.populate('<select>Select: <select name="sel" id="sel" onChange="testpopup5pick(this.options[this.selectedIndex].value);"><OPTION VALUE="A">A</option>
<OPTION VALUE="B">B</option><OPTION VALUE="C">C</option></SELECT>');
function test5popupactivate(obj,anchor) {
testpopup5input=obj;
testpopup5.showPopup(anchor);
}
function testpopup5pick(val) {
testpopup5input.value = val;
testpopup5.hidePopup();
}
//html
<INPUT NAME="test5" SIZE=30 id="I">
<A HREF="#sel" onClick="test5popupactivate(document.getElementById['I'].test5,'anchor5');return false;" NAME="anchor5" ID="anchor5">Select</A>
<DIV ID="testdiv5" STYLE="position:absolute;visibility:hidden;background-color:#CCCCCC;width:200px;height:50px;"></DIV>
As you can see I get this code from somewhere else but it doesn't work on me. Is there an easy way to do it? Please help. Thanks in advance. Hi, I have two dropdown lists, and I want to have each option from the first dropdown list to give the specific options on the second dropdown list. For instance, <select name="module"> <option value="pic1.jpg>TM1</option> <option value="pic2.jpg>TM2</option> <option value="pic3.jpg>TM3</option> </select> <select name="location"> <option value="loc_1">Box1</option> <option value="loc_2">Box2</option> <option value="loc_3">Box3</option> Note: The option values are just examples, but each option must have a value in order for other things to work. Here is what I need to do: If TM1 is selected, only Box1 and Box 2 are available (Box3 is removed from the dropdown "location" list); If TM2 is selected, only Box 2 is available (Box 1 and 3 are removed from the dropdown "location" list); If TM3 is selected, all options in the dropdown "location" list are available. My javascript knowledge is very limited. Any help is greatly appreciated. Thanks in advance, JW If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?
Hi all, I have table in Javascript and it has addrow, deleterow, submit, and functions. when i click it automatically adds new row and it has select option to choose some of them for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte. So i need once i select the name from combobox, should not allow user to select same name in coming rows Here is my code. Thanks beforehands PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><title>dinamik sheet</title> <script> var i=iteration; function addrow(){ var tbl = document.getElementById('sheet'); var iteration = tbl.rows.length; document.getElementById('count_rows').value = iteration; var row=tbl.insertRow(iteration); var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow'+iteration; el.id = 'txtRow'+iteration; el.size = 15; el.value = '0'; el.onblur = sum; cellRight.appendChild(el); var cellRight = row.insertCell(2); var elaz = document.createElement('input'); elaz.type = 'text'; elaz.name = 'txtRowaz'+iteration; elaz.id = 'txtRowaz'+iteration; elaz.size = 20; elaz.value = '0'; elaz.onblur = sum; cellRight.appendChild(elaz); var cellRight1 = row.insertCell(3); var ela = document.createElement('input'); ela.type = 'text'; ela.name = 'txtRowe'+iteration; ela.id = 'txtRowe'+iteration; ela.size = 20; ela.value = '0'; ela.onblur = sum; cellRight1.appendChild(ela); var cellRightsel = row.insertCell(4); var sel = document.createElement('select'); sel.name = 'selRow' + iteration; sel.id = 'selRow' + iteration; sel.onchange = sum; sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); cellRightsel.appendChild(sel); sum(); } function removeRowFromTable() { var tbl = document.getElementById('sheet'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1); } function sum(){ var s1 = 0; var s2 = 0; var tbl=document.getElementById('sheet'); var iteration=tbl.rows.length-1; for(var i=1; i<=iteration; i++){//loop through table rows var el1 = document.getElementById('txtRow'+i);//Row's Income field var el2 = document.getElementById('selRow'+i);//Row's percentage menu var ela = document.getElementById('txtRowe'+i);//Row's Tax cell var elaz=document.getElementById('txtRowaz'+i); if(!el1 || !el2 || !ela||!elaz) continue; var txt = el1.value; if(txt != ( '' + Number(txt) )) continue; //reject non-numeric entries var tax = Number(txt) * Number(130); if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ var tax = Number(txt) * Number(150); } if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ var tax = Number(txt) * Number(100); } if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ var tax = Number(txt) * Number(85); } if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ var tax = Number(txt) * Number(95); } if (el2[el2.selectedIndex].value=="GraphigCard ATI") { var tax = Number(txt) * Number(88); } ela.value = tax.toFixed(2); elaz.value=tax.toFixed(2)/Number(txt); if(isNaN(elaz.value)){ elaz.value=0; } s1 += Number(txt); s2 += tax; } var t1 = document.getElementById('total'); var t2 = document.getElementById('taxtotal'); if(t1){ t1.value = s1.toFixed(2); } if(t2){ t2.value = s2.toFixed(2); } } onload = function(){ addrow(); } </script> </head> <body> <form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> <table align="center" width="75%"> <tr> <td align="center">Balance sheet</td></tr> <tr> <td align="center"> <table id="sheet" border="1"> <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> </table> </td> </tr> <tr> <td align="center"> <input type="hidden" name="count_rows" id="count_rows" /> <input type="button" value="Add" onclick="addrow()" /> <input type="button" value="Remove" onclick="removeRowFromTable()" /> <input type="button" value="SUM" onClick="sum()"/> <input type="submit" value="Submit" /><br /> </td> </tr> <tr> <td align="left"> <input id="total" name="total" type="text"/>total amount of products<br /> <input id="taxtotal" name="taxtotal" type="text"/>total price of products </td> </tr> </table> </form> </body> </html> Hey guys.... me again.... tried doing this a few different ways but it seems no matter what I do the last option won't remove for some reason..... if it's the only option, it won't remove either. as it's the last one. Here is my code.. PHP Code: function removeCats() { // Set selected category list var sel_cats = document.getElementById('cat_sel'); for (i = sel_cats.length-1; i >= 0; i--) { // Check if the cat is selected if (sel_cats.childNodes[i].selected == true) { // Remove the category sel_cats.removeChild(sel_cats.childNodes[i]); } } } Thanks again guys! Hi All Not sure if this is the right place to post but could do with some help. Scenario: 1 Box holds 3 items, Complete box weighs 75g, each item 25g, customer chooses their own 3 combo items. This could be the same all the same item or 3 different items. I need a script that will require the selections to make up 75g in order to continue the process. i.e customer can only continue when 3 items / 75g worth are selected. Here is a short version, I have about 12 selectors at the moment and possible more will be created (if that matters). Code: <form name="cart_quantity" action="myProduct?action=add_product" method="post" enctype="multipart/form-data">
<
<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-6">Hard Boiled 1</label><br />
<select name="id[6]" id="attrib-6">
<option value="">Select Portion</option>
<option value="24">25g</option>
<option value="25">50g</option>
<option value="26">75g</option>
</select>
<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-7">Hard Boiled 2</label><br />
<select name="id[7]" id="attrib-7">
<option value="">Select Portion</option>
<option value="27">25g</option>
<option value="28">50g</option>
<option value="29">75g</option>
</select>
<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-8">Hard Boiled 3</label><br />
<select name="id[8]" id="attrib-8">
<option value="">Select Portion</option>
<option value="30">25g</option>
<option value="31">50g</option>
<option value="32">75g</option>
</select>
<div class="placeholder">
<img src="" alt="Image Placeholder" />
</div>
<label class="attribsSelect" for="attrib-9">Hard Boiled 4</label><br />
<select name="id[9]" id="attrib-9">
<option value="">Select Portion</option>
<option value="33">25g</option>
<option value="34">50g</option>
<option value="35">75g</option>
</select>
</form>
The section of the form is just the portion with selctors, there are other fields with radio buttons for color choice etc. I have searched for something like this all over but cant find it. Please please please could some genius out there help. Thanks in advance |
|||||||