JavaScript - Some Help Required With Passing Array Elements
Hi Guys
I am new to javascript programming and I am trying to get elements from one array to another, here is an example of what I am trying to do; Code: oneArray[0] = anotherArray[10]; Essentially, moving the data in index 10 of anotherArray to the index 0 of oneArray. I have tried using a variable as a place holder such as; Code: placeHolder = anotherArray[10]; oneArray[0] = placeHolder; I know i'm doing something idiotic somewhere along the line, I just can't figure out what I need to do. Similar TutorialsCode: <script type="text/javascript"> function validate(form) { // Checking if at least one period button is selected. Or not. if (!document.form1.sex[0].checked && !document.form1.sex[1].checked){ alert("Please Select Sex"); return false;} var total="" for(var i=0; i < document.form1.scripts.length; i++){ if(document.form1.scripts[i].checked) total +=document.form1.scripts[i].value + "\n" } if(total=="") alert("select scripts") else alert (total) return false; } </script> <table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'><input type=hidden name=todo value=post> <tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex value='female'><font face='verdana' size='2'>Female</font></td></tr> <tr><td align=center bgcolor='#f1f1f1'><font face='verdana' size='2'><b>Scripts You know</b><input type=checkbox name=scripts value='JavaScript'>JavaScript <input type=checkbox name=scripts value='PHP'>PHP <input type=checkbox name=scripts value='HTML'>HTML </td></tr> <tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr> </table></form> In this code a checkbox is accessed as "document.form1.scripts[i].checked" If we see the tree view of this document, it is "table/form1/tr/td/scripts[i].checked" SO are we not required to add table elements in the path to the checkbox ? I guess its not required. But why ? Because cell, row and table are the parent elements in HTML tree, then why are they not required ? fixed it. my bad. Please delete this thread.
Hi again!! This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate. PHP Code: <form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left"> <tr align="center"> <td width="10" class="forhead" style="white-space:nowrap;"> </td> <td width="92" class="forhead" style="white-space:nowrap;">Qty</td> <td width="94" class="forhead" style="white-space:nowrap;">Rate</td> <td width="94" class="forhead" style="white-space:nowrap;">Amount</td> </tr> </table> <tr align="left"> <td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" > <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td> <table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text"> <tr> <td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td> <td width="92" class="forhead" style="white-space:nowrap;"> <input type="text" name="qty[]" style="width:80px;" onblur=""> </td> <td width="94" class="forhead" style="white-space:nowrap;"> <input type="text" name="rate[]" style="width:80px;" value=""></td> <td width="94" class="forhead" style="white-space:nowrap;"> <input type="text" onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td> </tr> </table> <table border="0"> <tr> <td>Total:</td> <td><input type="text" name="total[]" style="width:80px;" value=""></td> </tr> <tr> <td colspan="2"> <input name="Submit" type="submit" value="Save" style="text-decoration:none" /> <input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'"> </td> </tr> </form> <script type="text/javascript"> function getValues(objName,objName2,objName3) { var var3 = ""; var arr = new Array(); arr = document.getElementsByName(objName); arr2 = document.getElementsByName(objName2); arr3 = document.getElementsByName(objName3); for(var i = 0; i < arr.length; i++) { for(var i = 0; i < arr2.length; i++) { for(var i = 0; i < arr3.length; i++) { var obj1 = document.getElementsByName(objName2).item(i); var var2 = obj1.value; var obj = document.getElementsByName(objName).item(i); var var1 = obj.value; var obj3 = document.getElementsByName(objName3).item(i); var var3 = obj3.value; var var4 = var1 * var2; document.getElementsByName(objName3).item(i).value=var4; } } } } function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { if (rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } } catch(e) { alert(e); } } </script> I would like to know that how can I show the value of all the elements in array "amount" in total field?? I tried the following code based on a post I saw somewhere else about summing all the elements of an array together. When I tried it though I couldn't seem to get it working. Can someone please point out what I did wrong or tell me a different way to sum array elements together? Thanks. Code: <script type="text/javascript"> Array.prototype.sum = function() { for (var i = 0, L = this.length, sum = 0; i < L; sum += this[i++]); return sum; } var myArray=[1,2,3,4,5]; document.write(myArray.prototype.sum); </script> Hi Folks - I have a form that has an array of input values: <input type="text" name=txtValue[] /> <input type="text" name=txtValue[] /> I do this so I can loop through the values in php... now...that's the easy part... the hard part comes to this: next to each of those boxes is a search button that allows the user to open up a popup window that they can search for an item, and select the item. Once they select the item it should populate that particular input box with the selected item. I can easily do this with a uniquely named input box, but can't seem to figure out how to do it with an array of input boxes... any idea? Hey All, I have completed most of a homework assignment that I am working on. I am able to .push desired elements into an array: Code: //Insert variable into the Array function insertElem(){ //Insert and sort first array, but not second array if(nameInput.value != ""){ studName2.push(nameInput2.value); } else{ alert("Value to be inserted cannot be Null"); } //Refresh display area clearAndShow2(); } What I would like to do is be able to store and display the created array "permanently" until I decide to remove the elements. My current method to hold the elements, until the page is refreshed, is: Code: //Refresh second array function clearAndShow2(){ nameInput2.value = ""; messageBox2.innerHTML = ""; messageBox2.innerHTML += "Groups: " + "<br />" + studName2.join("<br />") + "<br />"; } I appreciate the assistance. Hey guys. I need a little help with checking elements in my array. I created an array of size 50 and initialized all elements to 1. What i want to do is if the user types in the number "1" into the prompt box, i want it to check the first 15 elements and increase only one of the elements by 1, and if the element has already been increased by 1 then i want it to check the next element and see if its been increased, if the element has been increased then it needs to move on to the next one and check that. If the element is 1, then it can be increased by "1", if the element is 2 then i need it to check the next element. If all elements within the first 15 have increased by 1, it should just alert the user that all slots have been assigned. Is there a way to do this? Thanks for your time
Hi, I'm pulling my hair out to create a simple function! I am creating an array based on form elements. I then am trying to create an IF (and nested IF) statement to check if the fields are empty and then with the nested IF statement use certain fields to create mathematical functions. So far I have this: function QuantityMWh(form) { var formchk = document.forms[0] for (i = 0; i < formchk.elements.length; i++) { if (formchk.elements[1].value == "" && formchk.elements[2].value == "") { alert("Please fill out all fields.") break } } } It's only checking the first field and not the second, and vice versa. i.e. if only one field has text then it passes. What am I doing wrong? Thanks. I would like to pass an array to a function but how does the program know which array I would like to choose from?? Lets say I have 3 arrays and I would like to pass array C, to my function. I checked the web but they only show if you have ONLY 1 array but NOT for multiple arrays. How would I even go about doing this?? Code: var arrA=new Array("fox.com","nbc.com","abc.com", "google.com"); var arrB=new Array("car","bike","boat", "plane"); var arrC=new Array("1","2","3", "4", "5", "6", "7", "8", "9"); function display(myArray){ myArray[1] = "changed"; } display(myArray); document.writeln(myArray[1]); thanks Hi All, Simple newbie question here - I want to initialize an array with "myString.length" elements, and I want every element to be prepopulated with "*" instead of blank. Is there any way of doing this? Code: var myString = '123456'; var trialVar = new Array[myString.length] document.write('TEST ' + '<BR><BR>' + trialVar); (I want every element of trialVar to be "*", I cant just manually add them as myString.length will vary) Any help would be mega appreciated - thank you I want to map a field, city, from a MySQL database into Google Maps. I found a nice script to do it, but haven't been able to get it to work. If I hard code an array into locations (var locations = ['Seattle', 'New York']), it works fine. Passing this SQL array into JS is giving me problems. I've tried a number of different things, but I'm stuck. Right now I'm trying getElementById, but no dice. Any help is appreciated! Thanks. Code: <?php $server_name="localhost"; $db_user="sql_user"; $db_pass="password"; $db="mydb"; $sql = "SELECT city FROM posts"; $result = mysql_query($query) or die ('Query Error: ' . mysql_error()); while ($results = mysql_fetch_array($result)) { $gender = $results[gender]; } ?> <div id="map_canvas" style="width: 600px; height: 400px"></div> <script type="text/javascript"> var locations = document.getElementById("$gender"); var mapOpt = { mapTypeId: google.maps.MapTypeId.TERRAIN, center: new google.maps.LatLng(38.00, -100.00), zoom: 3 }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOpt); var geocoder = new google.maps.Geocoder(); var index = 0; var geocoderFunction = function () { geocoder.geocode({ 'address': locations[index] }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { new google.maps.Marker({ map: map, position: results[0].geometry.location }); } // Call the geocoder with a 100ms delay index++; if (locations.length > index) { setTimeout(geocoderFunction, 100); } }); } // Launch the geocoding process geocoderFunction(); </script> I need to get this script to work, I only included what im having the problem with. I am Using jQuery Library. Here is how this should work: .btnRoof div is clicked the parent id is retrieved as var pid a function called roof is called which simply changes a css background to "color" the function perform is called to get the "color1[0]" from the array. My Problem: perform() returns the word color1, color10, color1[0], or c. instead of images/cp-roof-blue.png as listed in the array. Code: $(document).ready(function() { var color1=new Array(); color1[0]="images/cp-roof-blue.png"; color1[1]="images/cp-panel-blue.png"; color1[2]="images/cp-trim-blue.png"; function perform(name, x) { alert(name[x]); //alert([name][x]); //alert(name+'['+x+']'); //alert(color1[0]); // correct return name[x]; } function Roof(color) { $("#colorPicker .roof").css("background", "url("+color+")"); } $('.btnRoof').click(function() { var pid = $(this).parent().parent().attr("id"); Roof(perform(pid, 0)); }); }); I tried to clarify as much as possible, please let me know if I need explain further. Thanks. Hello there, I was having some trouble with 2D arrays (or array of arrays). Essentially, the array has 100 rows, with two columns. The first column of every row holds a name, and the second holds a sales amount. With the use of a do while loop, the user can continuously add up to 100 names and sales amounts. After all the information the user wishes to add is stored into the 2D array I'm attempting to pass that very same 2D array as a parameter to a function called printRow as can be seen in the code below: Note: the function call and the actual function are found in two separate javascripts. Code: var salesPerson=new Array(100) for (i=0; i <=100; i++) { salesPerson[i]=new Array(2); } var x = 0; do { salesPerson[x][0] = getName(); salesPerson[x][1] = getSales(); x++; }while(x != 100 && confirm("Enter more employee information?")); printRow(salesPerson[][]); Code: function getName() { var nameEntered = prompt("What is your first name?"); return nameEntered; } function getSales() { var error; var salesEntered; do { salesEntered = prompt("What were your sales?"); error = false; if (isNaN(salesEntered) || salesEntered == null || salesEntered == "") error = true; }while(error); return salesEntered; } function printRow(salesPerson[][]) { for (i =0; i<salesPerson.length; i++) { document.write(salesPerson[i][0] + " " + salesPerson[i][1]); } } At the moment I'm only looking to print the contents of the 2D array that I pass as a parameter to the document. As is, the javascipt doesn't seem to execute at all, it worked fine up until I added the printRow function call and function which leads me to believe I may not be passing it as a parameter correctly. Any tips on how to do this correctly would be greatly appreciated! I'm having trouble passing an array into an event handler. This does not work: Code: var lightbulb = [1,1,1,0,1,0] var banana = [0,0,1,1,0,1] function changetextimage(arr){ for(var i=0;i<5;i++){ var pixel = document.getElementById("text"+i); if (arr[i]) { pixel.style.color="#000000"; } else { pixel.style.color="#FFFFFF"; } } } $('#lightbulbpicture').mouseover(changetextimage(lightbulb)); $('#bananapicture').mouseover(changetextimage(banana)); This does work: Code: var lightbulb = [1,1,1,0,1,0] var banana = [0,0,1,1,0,1] function changetextimage1(){ for(var i=0;i<5;i++){ var pixel = document.getElementById("text"+i); if (lightbulb[i]) { pixel.style.color="#000000"; } else { pixel.style.color="#FFFFFF"; } } } function changetextimage2(){ for(var i=0;i<5;i++){ var pixel = document.getElementById("text"+i); if (banana[i]) { pixel.style.color="#000000"; } else { pixel.style.color="#FFFFFF"; } } } $('#lightbulbpicture').mouseover(changetextimage1); $('#bananapicture').mouseover(changetextimage2); I have a whole bunch of these arrays (which are much longer) that I want to pass into this function so I just want to pass each as an argument rather than write each function out. I bolded the areas I'm talking about so it's easier to see. I am very new to javascript. I have a problem getting to any element from this form generated by the jsp page using struts. Please show me how to get to item[0].totalAmount for example, so that I can create a function to calculate the calculateTotal(). So far, when I do the alert, it is only valid up to document.myForm.item; the document.myForm.item[0] is invalid according to the alert. Any help is very much appreciated. function calculateTotal(){ alert(document.myForm.item); } <form name="myForm" method="post" action="/myAction.do"> <table id="display" border="1"> <tr> <th scope="col" id="totalAmount">Total Amount</th> <th scope="col" id="adjustmentAmount>Adjustment Amount</th> <th scope="col" id="newAmount">NewAmount</th> </tr> <tr> <td><input type="text" name="item[0].totalAmount" id="totalAmount" value="100" readonly="readonly"></td> <td><input type="text" name="item[0].adjustmentAmount" id="adjustmentAmount" value="" onblur="javascript:calculateTotal();" readonly="readonly"></td> <td><input type="text" name="item[0].newAmount" id="newAmount" value="" readonly="readonly"></td> </tr> <tr> <td><input type="text" name="item[1].totalAmount" id="totalAmount" value="350" readonly="readonly"></td> <td><input type="text" name="item[1].adjustmentAmount" id="adjustmentAmount" value="" onblur="javascript:calculateTotal();" readonly="readonly"></td> <td><input type="text" name="item[1].newAmount" id="newAmount" value="" readonly="readonly"></td> </tr> </table> </form> I'm writing a simple Chess Record keeping app (still ), and i'm having a problem with the Screen.X and Screen.Y variables to compare with the coordinate variables stored in an Array. The project is a little large, so here's the live version (on my website). Though it will only work if you run it from your local disk. http://daomingjin.googlepages.com/ScoreMate.html the zip archive of this is he http://daomingjin.googlepages.com/ScoreMatev1.zip the main JavaScript function file is he http://daomingjin.googlepages.com/Core.js the particular function in question is this: Code: var PieceThere = isPieceHere(ClosestX, ClosestY); function isPieceHere(x, y) { // Test to see if there is an Element at point x,y for (var i = 0; i < 32; i++) { if (PieceLocationXcoord[i] == x) { if(PieceLocationYcoord[i] == y) { // There is a piece there var Result = "True"; } } } return Result; } i have placed alert() boxes in many places in the code above, and i can tell the following: the function is being activated the coordinates of x and y are able to be accessed inside the function the arrays called PieceLocationYcoord and PieceLocationXcoord both have the values in them that are returned by the ClosestX and ClosestY function however, every time , the function continues to return "Undefined". I have even tried manually setting var Result = "True" inside the last if-then block, and still returns undefined. i have also tried using the alert box inside this function (before the variable return Result; is called) and still get undefined as the message from the alert box. Guys, For some reason my script only works when I have at lease two checkboxes. To simulate the problem just run it once with two html input checkbox elements -> check one checkbox and press submit -> it works -> Now remove one input checkbox field and check the remaining checkbox & submit -> Bamm doesn't work... What am I doing wrong ? Code: <html> <head> <script> function Check(chk) { for (i=0; i < chk.length; i++) chk[i].checked=document.ListActionForm.Check_ctr.checked ; } function desubmit() { if(get_args()==false) {alert("nothing_selected");return false;} if(labelling(true)) return false; } function labelling(s) {return true;} function get_args() { s=chkboxa2str(document.ListActionForm['listaction[]']); if(s)alert(s); if(s.length<8)return false; else return s; } function chkboxa2str(chkbox_a) { var list = ""; for(var i = 0; i < chkbox_a.length; i++){ if(chkbox_a[i].checked) { list += chkbox_a[i].value + " "; } } return list; } </script> </head> <body> <form action="?h=1296078874" method="post" name="ListActionForm" onsubmit="return desubmit()"> <input type='checkbox' name='listaction[]' value='2010102909103530'> Testbox 1<br> <input type='checkbox' name='listaction[]' value='2010102909103532'> Testbox 2<br> <input type="Submit" name="Submit" value="Versturen" > </form> </body> </html> I wrote js functions to reset a php form (multiple questions). The below works: Code: function resetForm(){ resetGroup(document.forms[0].answer1); resetGroup(document.forms[0].answer2); } Answer1 and answer2 are the elements of $_POST array. (<input name="answer1"> in php). In this example, I tried with only two questions, but I have up to 35 questions in one form. Instead of writing the above resetGroup() 35 times, I want to for-loop it. I tried Code: function resetForm(){ for (var i=1; i<3; i++){ resetGroup(document.forms[0]."answer"+i); } That didn't work. Could someone help me to make the loop work? Or would someone have better or simpler idea? Thanks. |