|
JavaScript - Replace Selectbox With New Selectbox
My code (below) currently has a Table with 3 columns, each with a different selectBox. I wish to have just one cell with a changing selectBox.
Initial state: Only the citySelectBox should display. (this is currently in the first column of the table) State2: If user selects <option value='-1'>[-- change country --]</option> then the countrySelectBox should appear. (This is currently in the second column of the table) State 3: On click of the countrySelectBox, the cityDiv (id='ctWrapper') should display. This is currently in the third column of the table) Note: The commented-out code has a text link. OnClick opens up the countrySelectBox, but I don't want a text link. I want the user to use the <option value='-1'>[-- change country --]</option> Haven't a clue how to do any of this Any help out there? New Kid On The Block Code: <script type="text/javascript">
<!--
function loadCities(countryID){
if(countryID == "") {
displayCities("");
return;
}
var contentLoader = new ylib.util.ContentLoader(this,"/ajax/citiesServer.asp?c=" + countryID,cityCallback,null);
//var x = req.send("GET",,"",null,null,false,countryID,cityCallback,null);
contentLoader.SendRequest();
}
function cityCallback(request){
displayCities(request.responseText);
}
function displayCities(cityOptions) {
var citySelect = xGetElementById('ct');
xDisplay(citySelect,'block');
var cityDiv = xGetElementById('ctWrapper');
var selectBox = "";
if(cityOptions != "") {
selectBox = "<select name='ct' id='ct' onchange='this.form.submit();'><option value=''>-- select city --</option>" +
cityOptions +
"</select>";
}
cityDiv.innerHTML = selectBox;
}
-->
</script>
<table align="right" border="0">
<tr>
<%If Instr(sUrl, "city.asp") Then%>
<td>
<form name="citySelect" method="GET" action="../en/city.asp" onsubmit="alert('submit to default page');return false;">
<select name="ct" id="ct" onchange="submit()">
<option value=''>-- change city --</option>
<option value='-1'>[-- change country --]</option>
<%=list_CityOptions("")%>
</select>
</form>
</td>
<%End If%>
<!--
<td>
<a style="padding-left:8px;font-size:12px;text-decoration:none;" href="javascript:void(0);"
onclick="this.style.display='none';<%If Instr(sUrl, "city.asp") Then%>citySelect.style.display='none';<%End IF%>xDisplay('locationSelection','block');">change country</a>
</td>
-->
</tr></table>
<div id="locationSelection" style="float:right; display:none;">
<form method="GET" action="../en/city.asp" onsubmit="alert('submit to default page');return false;">
<th>
<select name='c' onchange='loadCities(this.options[this.selectedIndex].value);'>
<option value="">-- select country --</option>
<option value="1">Israel</option>
<option value="63">USA - Central</option>
<option value="2">USA - North East</option>
<option value="61">USA - South East</option>
<option value="62">USA - West</option>
<option value="3">United Kingdom</option>
<option value="4">South Africa</option>
<%=list_DefaultCountryOptions("")%>
</select>
</th>
<th>
<p id='ctWrapper'></p>
</th>
</tr>
</table>
</form>
Similar TutorialsHi there, i'm new in the forum and need some help. I'm using wordpress to make my website but i have a problem.. I'm making a tags-menu in wordpress and call it in php with this function: PHP Code: <?php $items = wp_get_nav_menu_items('tags-menu'); //var_dump($items); echo "<select id='designfields' name='designfields'>"; foreach ($items as $list){ if($list->menu_item_parent != "0"){ echo "<option value=".$list->url."> ".$list->title."</option>"; } else { echo "<option value=".$list->url.">".$list->title."</option>"; } } echo "</select>"; ?> this give me what i want: Code: <select id='designfields' name='designfields'> <option value=http://myweb.com.ar/portfolio/>All Fields</option> <option value=http://myweb.com.ar/tag/branding/>Branding</option> <option value=http://myweb.com.ar/tag/print-design/>Print Design</option> <option value=http://myweb.com.ar/tag/web-design/>Web Design</option> <option value=http://myweb.com.ar/tag/ui-design/>UI Design</option> <option value=http://myweb.com.ar/tag/motion-graphics/>Motion Graphics</option> <option value=http://myweb.com.ar/tag/illustration/>Illustration</option> </select> I want to style this with css so i use the plugin jquery.selectbox, but when i style my menu with this plugin i lose the functionality, i need to convert this optionvalues in links like function onChange (a jumpmenu). so i think the problem is in the jquery.selectbox.js in some place must transform optionvalue in link. Here is the jquery.selectbox im using: https://github.com/claviska/jquery-s...y.selectBox.js Need some help with this, thanks Hi All, I am a newbie to Javascript, I have a text box which when searched with 3 characters of vendor name will do ajax request and populate the results below the textbox, beside the box are two arrows pointing to a selectbox, when i clcik on the right arrow after the search the vendor name should to added to the select box.... similarly after i add required vendor names, I should be able to delete the name from the select box. I have completed the ajax search part of the textbox, and I am stuck with the passing value to the selectbox portion. Anyhelp will be appreciated. thanks in advance! Hi, I have a select box whose options are populated from an xml file, the code goes like this: Code: var sel_html = '<select onChange="handleSelected(this)">' +
'<option selected> - Select a zone - <\/option>';
var a = 0;
function createPolygon(pts,colour,name) {
var shape = new GPolygon(pts,"#000000",1,1,colour,0.5, {title:name});
gpolygons[a] = shape;
// ======= Add the entry to the select box =====
sel_html += '<option> ' + name + '<\/option>';
// ==========================================================
a++;
return shape;
}
// ======= This function handles selections from the select box ====
// === If the dummy entry is selected, the info window is closed ==
function handleSelected(opt) {
for (var a=0; a<gpolygons.length; a++) {
gpolygons[a].hide();
}
var a = opt.selectedIndex - 1;
if (a > -1) {
gpolygons[a].show()
}
}
sel_html += '<\/select>';
document.getElementById("selection").innerHTML = sel_html;
which works fine for showing one option at a time, but what I would like to do is have one of the selections to be to show all of the options at the same time. At the moment I have it working with a checkbox that works off a separate piece of code, but it would be great to have that option within the select box. You can see the select box in question here - it's the one on the right which says "Select a zone" thanks in advance. I 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, I have this code: PHP Code: <script> function checkForOther(obj) { if (!document.layers) { var txt = document.getElementById("otherTitle"); if (obj.value == "new") { txt.style.display = "inline"; // gives the text field the name of the drop-down, for easy processing txt.name = "selTitle"; obj.name = ""; } else { txt.style.display = "none"; txt.name = ""; obj.name = "selTitle"; } } } </script> it's should hide/show input field accourding the user choice - if he choose "<option value='new'>new</option>", the follow action should happend: PHP Code: <li id='otherTitle'> <label for='new'>new artist</label> <input type='text' name='new_artist_name' /> </li> The script works, but when I click "submit" the parameter that the "select box" should send don't get send... here is the full code: PHP Code: <li> <label for='artist'>Artists</label> <select name='artist_id' onchange="checkForOther(this)\"> <option value='new'>new artist</option>"; $query = mysql_query("SELECT id, name FROM `chords_artists` ORDER BY `name` "); while($index = mysql_fetch_array($query)) { $artist_id = $index['id']; $artist = $index['name']; echo "<option value='$artist_id'>$artist</option>"; } echo " </select> </li> <li id='otherTitle'> <label for='new'>new artist:</label> <input type='text' name='new_artist_name' /> </li> Can you please help me with it? I'm trying to figure out how to make a select box change which <div> should show or hide... Code: <script language="JavaScript">
function doHideShowMatchplayOptions(divName){
var objDiv = document.getElementById(divName);
if(objDiv.style.display == ''){
objDiv.style.display = 'none
} else {
objDiv.style.display = '
}
}
</script>
<select name="matchplaytype" onchange="doHideShowMatchplayOptions(\'idHideShowMatchplayOptions\');">
<option value="">Choose</option>
<option value="1"># 1</option>
<option value="2"># 2</option>
</select>
<div id="idHideShowMatchplayOptions" style="display:none;">
<table><tr><td colspan="2">This is # 1</td></tr></table>
</div>
<div id="idHideShowMatchplayOptions" style="display:none;">
<table><tr><td colspan="2">This is # 2</td></tr></table>
</div>
In the above script I'm only able to change one div... What I want is to be able to, if a user changes the selectbox from "# 1" to "# 2", to change the viewable div.... Hope this makes sense and somebody can help... THanks in advance :-) Hello there !! I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript...... I want to show multiple divs on select of a <option> box. So lets say there are 3 options Code: <select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>
And a javascript function to show the div`s Code: function showDivs(prefix,chooser) {
for(var i=0;i<chooser.options.length;i++) {
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedvalue = chooser.options[chooser.selectedIndex].value;
if(selectedvalue == "a")
{
displayDivs(prefix,"a");
displayDivs(prefix,"c");
displayDivs(prefix,"d");
}
if(selectedvalue == "b")
{
displayDivs(prefix,"b");
displayDivs(prefix,"c");
}
if(selectedvalue == "c")
{
displayDivs(prefix,"d");
}
}
function displayDivs(prefix,suffix) {
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
And some divs to show Code: <div id="diva" style="display:none;">blabla</div> <div id="divb" style="display:none;">blabla</div> <div id="divc" style="display:none;">blabla</div> <div id="divd" style="display:none;">blabla</div> All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good.. Then I choose option 'c' I get only one div. Thats good.. But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'.. Does anybody understand why?? Thanx allot !!! Hi, I'm trying to write a function that will show arrowheads on polylines selected from a select box in a google map. I only want the arrowheads that belong to the line shown to be displayed. I have got it working using check boxes, and the select box shows the lines, but am having trouble tweaking the code to get the arrows to show up as well. You can see the working checkboxes (and the semi-working selectbox) he http://www.xelawho.com/map/zonesarrowstest.htm I see the error at line 135 ("Cannot read property 'onclick' of undefined") which I assume refers to the option, but this is where my limited js understanding begins to falter... how do I define the option if the select box options come from xml? And will defining it actually make this code work? Below are (what I think are) the relevant bits of code. Thanks in advance for any help. (cross-posted on the google maps forum and here over the last few days, but unanswered) Code: var h = 0;
var v = 0;
// === Function to create a marker arrow ===
function createArrow(point,icon,category) {
var arrows = new GMarker(point,icon);
map.addOverlay(arrows);
pts[v] = arrows;
arrows.hide();
arrows.mycategory = category;
pts.push(arrows);
}
var select_html = '<select onChange="handleSelected2(this)">' + "selclick(this)" +
'<option selected> - Select a bus route - <\/option>';
function showsel(category) {
for (var v=0; v<pts.length-1; v++) {
if (pts[v].mycategory == category) {
pts[v].show();
}
}
document.getElementById(category+"option").onclick = true;
}
function hidesel(category) {
for (var v=0; v<pts.length-1; v++) {
if (pts[v].mycategory == category) {
pts[v].hide();
}
}
}
function selclick(option,category) {
if (option.onclick) {
showsel(category);
} else {
hidesel(category);
}
}
function handleSelected2(opt,category) {
for (var h = 0; h <gpolylines.length; h++) {
gpolylines[h].hide();
}
var h = opt.selectedIndex - 1;
if (h > -1) {
gpolylines[h].show();
}
for (var v=0; v<pts.length; v++) {
selclick(category);
}
}
GDownloadUrl("allzonesencoded.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var lines = xmlDoc.documentElement.getElementsByTagName("line");
for (var i=0; i< pts.length; i++) {
var category = lines[a].getAttribute("category");
}
// ===== final part of the select box =====
select_html += '<\/select>' ;
document.getElementById("selection2").innerHTML = select_html;
Hello. I am asking this question in the "javascript" forum as my"select box" does use javascript. (Maybe it is actually called a List menu)? It is probably a simple question. If you look at the link to my example, you will see that my selectbox only displays the first line of the list (which says "select one"). For reasons, I will not be putting images or anything in the blue area, so wish there is a way to have like the first 20 or so selections visible, so I do not have just a big blue box sitting there. I didn't know if there was a way to do this? I appreciate any advice. Thank you. Buffmin My link is: http://test.cnjwebsolutions.com/ i am trying to make an online graphing calculator with javascript. dont ask how because i dont know. but there is an annoying error in a do...while loop. although it should break out of the loop when the |'s (absolute value signs) are replaced with Math.abs( and ). here is the code. Code: var initec = function(){
var rg = {
}
;
rg.matc = false;
rg.i = 0;
rg.change = function(equ){
if (typeof(equ) != "string"){
alert('Equation must be a string');
return;
}
alert("starting equation: "+ equ);
rg.i = 0;
do{
rg.matc = equ.match(/\|/);
if(rg.i === 0){
equ.replace(/\|/, " Math.abs(");
rg.i = 1;
alert("1 "+equ);
}
else {
equ.replace(/\|/, " ) ");
rg.i = 0;
alert("0 "+equ);
}
}while(rg.matc)
alert("finished equation: " + equ);
}
return rg;
}
rg=initec();
rg.change("|8/x+7|-2");
the last 2 lines and the alerts are for debugging. as you can see, it is not finished. but still, it should work. Hi I'm looking for a very simple script to replace one div with another. I've found a few but they seem overly complicated with features I don't need. I simply want to be able to click on a div and for it to be replaced with another div previously hidden. If someone could suggest a solution or point me in the right direction I'd really appreciate it. Thanks I found a regular expression that will strip my string of every html tag... var stripped = htmlStr.replace(/(<([^>]+)>)/ig,""); Well, I also want it to strip every thing between parentheses, square brackets, and replace " &# 160;" with a space. It would be really cool if you could explain how to do this as well, because the stuff in the above code after "replace" confuses me. I have no idea how that's working. First of all, I don't want to replace text in a form, or on click. I'm writing up a design document in HTML, and I need an area to display code. The < and > tags won't show up, obviously, but to make it easier on the programmer, I don't want him to have to manually put in < and > for each time it shows up. I am aware that JavaScript has a replace function, but I am not familiar with JavaScript quite yet. Is there a way to have JavaScript find the < and > in a certain div, and replace it with < and > on load? I would appreciate your help so much, Its been frustrating me. in the div class "done" it reads 13/34 i want to compare these to numbers like this if (13 < 34){do something()} else {return false;} so i am trying to get each number by it self to compare with. var did=m[1].getElementsByClassName("done")[1].innerText.replace(/\/.*/,"").value; this line returns 13 correctly. var need=m[1].getElementsByClassName("done")[1].innerText.replace(? ,"").value; this ? the info that i need to get for the other number. i know how to do it if it were a letter but can find the correct way being that it is a / instead. Thx Code: dropDownPart.innerHTML = tmpInnerHTML; how does this tmpInnerHTML gets filled : Code: for (var i = 0; i < arr.length ; i++)
{
var arr1 = arr[i].split('|');
id_tezaver = arr1[0];
term = arr1[1]
// if arr1[1] contains ', then ewerything after that disapears inside term,
// like "bird's eyes" becomes "bird"
// how to handle that ?
// bad example how I get to verify that the stuff is complete inside array
// term = arr1[1].replace(/'/i, /oo/);
}
Hi all, I have this code: Code: <input type="hidden" value="update_cart" name="ca"> <input type="hidden" value="2" name="numcart"> <input type="submit" name="submit" value="Update Cart" class="inpSubmit"> I'd like to replace this: Code: <input type="submit" name="submit" value="Update Cart" class="inpSubmit"> with this: Code: <button>blabla<button> How can I do? I know something about unobtrusive javascript but I don't know how to do it. Thank you very much I know how the replace method works, but I can't for the life of me figure out exactly what this replace function is doing... Can someone shed somelight for me? the g I *think* is a flag for global replacement... Code: replace(/\s/g, " "); I know that *something* is being replaced by a non-blank space, but what? Building a javascript shopping cart for an assignment. First time using Javascript so ignore the ****ness of it please Anyway basically I need to replace the qty of an item in an array if the item has already been added to the array. if it hasn't then it adds the normal values to the array. So I assume atm that I have to run an if statement when the function Code: function readInput(prd, qty, prc){
is called that checks in the array before pushing the new values into the array if array contains product name then var id = productarrayID+1 then replace that with the new quantity read in by the form. Quantity in my array is after the product name so I assume productarrayID+1 would give me the qty id variable. So heres the steps, be they correct: 1) get product name from HTML. 2) check if array contains product name. 3) continue with adding to array if product name doesn't exist in array. 4) if array contains product name retrieve id of product name within array. 5) + 1 to the ID to the product name thus giving me the ID for the quantity. 6) run some array.replace with the new id and replace with the quantity. Just wondering if thats a year or no to how that would run. Il post my HTML code but please dont post solutions I would prefer to write the code myself but just checking if the step-by-step process would work thankyou. HTML: Code: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css\basic.css" />
<script language="JavaScript" src="js/basic.js"></script>
<title>Shopping Time</title>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div id="items">
<div id="column">
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper">
<p class="desc" value="Paper">
Product: Paper 1</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper2">
<p class="desc" value="Paper2">
Product: Paper 2</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper3">
<p class="desc" value="Paper">
Product: Paper 3</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
</div>
<div id="column">
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper4">
<p class="desc" value="Paper4">
Product: Paper 4</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £2.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper5">
<p class="desc" value="Paper5">
Product: Paper 5</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper6">
<p class="desc" value="Paper6">
Product: Paper 6</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
</div>
<div id="column">
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper7">
<p class="desc" value="Paper5">
Product: Paper 7</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper8">
<p class="desc" value="Paper8">
Product: Paper 8</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper9">
<p class="desc" value="Paper9">
Product: Paper 9</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
</div>
</div>
<div id="sidebar">
<table border="1px solid black" id="table" rules="ALL" frame="void" class="cart" width="100%">
<tbody>
<tr>
<th>
<p class="cart">Product:</p>
</th>
<th>
<p class="cart">QTY:</p>
</th>
<th>
<p class="cart">Price:</p>
</th>
<th>
<p class="cart">Total:</p>
</th>
</tr>
</tbody>
</table>
<button onclick="viewshoppingcart('table')" class="button">Update Shopping Cart!</button>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Script: Code:
var cart= new Array();
var down= 0;
function readInput(prd, qty, prc){
down = down + 1;
var total= prc * qty;
cart.push( prd )
cart.push( qty )
cart.push( prc )
cart.push( total );
}
var p = 0;
var q = 1;
var t = 2;
var s = 3;
function viewshoppingcart(id){
if(!cart[p])return;
for(var i = 0; i < down; i++ ) {
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr")
var data1 = document.createElement("td")
data1.appendChild(document.createTextNode( cart[p] ) )
var data2 = document.createElement("td")
data2.appendChild (document.createTextNode( cart[q] ))
var data3 = document.createElement("td")
data3.appendChild (document.createTextNode( cart[t] ))
var data4 = document.createElement("td")
data4.appendChild (document.createTextNode( cart[s] ))
row.appendChild(data1);
row.appendChild(data2);
row.appendChild(data3);
row.appendChild(data4);
tbody.appendChild(row);
p = p + 4;
q = q + 4;
t = t + 4;
s = s + 4;
}
down = 0;
}
Building a shopping cart, at the moment I have 1 variable array. My JS gets values from hidden inputs when add to shopping cart is clicked. The JS then pushes them all into the array in order. I've managed to get the js code to replace innerHTML and add the array to the HTML to show the products, quantity and totals in a table. However its only showing the last product, price, and total in the array in the table. I need to get it to do this: Product: Quantity: Total: Product1 1 1 Product2 2 2 Product3 3 3 So basically I think I need to have my 3 for statements then plus 2 to each i instead of i++ to print out the products but that still doesn't solve my problem with printing every product in a vertical list, same with quantity and same with total. Heres the code Code: var cart= new Array();
function readInput(){
var prd=document.test.prd.value;
var prc=document.test.prc.value;
var qty=document.test.amount.value;
var total= prc * qty;
cart.push( prd )
cart.push( qty )
cart.push( total );
var lenp=cart.length;
for(var i = 0; i<lenp-2; i++ ) {
document.getElementById("product").innerHTML = cart[i];
}
for(var i = 0; i<lenp-1; i++ ) {
document.getElementById("qty").innerHTML = cart[i];
}
for(var i = 0; i<lenp; i++ ) {
document.getElementById("total").innerHTML = cart[i];
}
}
Code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="css\basic.css" /> <script language="JavaScript" src="test.js"></script> <title>Shopping Time</title> <body> <form name="test"> <input type="hidden" name="prd" value="Paper"> <p class="desc" value="Paper"> Product: Paper 1</p> <p class="desc"> <input type="hidden" name="prc" value="1.99"> Price: £1.99</p> <p class="desc"> Select Quantity: <select name="amount" onchange="quantity()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select></p> <p class="submit"> <input type="button" onclick="readInput();" value="Add To Cart" /> </p> </form> <table border="1px solid black" rules="ALL" frame="void" class="cart" width="100%"> <tr> <th> <p class="cart">Product:</p> </th> <th> <p class="cart">QTY:</p> </th> <th> <p class="cart">Total:</p> </th> </tr> <tr> <td class="test"> <div id="product"> <p class="cart">Product:</p> </div> </td> <td> <div id="qty"> <p class="cart">QTY:</p> </div> </td> <td> <div id="total"> <p class="cart">Total:</p> </div> </td> </tr> </table> </body> </html> document.write(str.replace(/(\+|\(|\)|.|-|\/ /g,'')); feeble attempt to remove '.' '(' ')' ' ' '-' '/'and '+' |
|||||||