JavaScript - Saving Dynamic Fields
hi guys
kindly assist in this i have the code below used to generate additional dynamic fields how can i save data entered in mysql??? <HTML> <HEAD> <TITLE>New Task</TITLE> <link rel="stylesheet" href="style1.css" type="text/css"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT language="javascript"> 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 = rowCount + 1; 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> </HEAD> <BODY> <br> <br> <h2>INPUT NEW TASK</h2> <table border="1" width="100%"> <tr> <td> <fieldset> <legend></legend> <table border="0" width="100%"> <tr> <td>User:</td> <td><input type="text" size="20" name=""disabled></td> <td>Start Date:</td> <td><input type="text" size="20"></td> </tr> <tr> <td>Client name:</td> <td><select name=""></select></td> <td>Process</td> <td><select name=""></select></td> <td>Day?</td> <td><input type="text" size="5"></td> </tr> </table> </fieldset> <fieldset> <legend>Tasks</legend> <table border="0" width="100%"> <th width="5">select</th><th width="5">No</th><th width="150">Task</th><th width="400">Description</th><th width="100">Start Time</th> <th width="100">End Time</th><th width="100">Worked hrs</th><th width="90">Action</th> <tr> </table> <TABLE id="dataTable" width="100%" border="1"> <TD><INPUT type="checkbox" name="chk"/></TD> <td width="5"><input type="text" size="5"name=""disabled></td> <td width="150"><select name=""></select></td> <td><textarea rows="2" cols="30"></textarea></td> <td><input type="text" size="10"name=""></td> <td><input type="text" size="10"name=""enabled></td> <td><input type="text" size="10"name=""disabled></td> <td><input type="button"type="button" value="+" onclick="addRow('dataTable')"></td> <td><input type="button"type="button" value="-" onclick="deleteRow('dataTable')"></td> </tr> </table> </fieldset> <table border="0" width="100%"> <tr> <td width="122"><input type="button" value="SAVE"></td> <td></td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </BODY> </HTML> Similar Tutorialsi have a script which i found on the internet. i modify that script according to my needs. what is in that script is there are three form fields with two buttons. one button is "Give me more fields" clicking on this button will give you more fields. and second button is submit so the data goes to server side and will be added to db. the problem is when i click give me more fields it gives me three more fields which is right but when i fill all these fields and click submit button it adds to the db but the data in the first three fields adds in the one row and the other three fields data adds in separate row which is not fine for me. so how can i do this so all the data will be added to only one row. here is js code Code: var counter = 0; //Start a counter. Yes, at 0 function add_phone() { counter++; // I find it easier to start the incrementing of the counter here. var newFields = document.getElementById('addQualification').cloneNode(true); newFields.id = ''; newFields.style.display = 'block'; var newField = newFields.childNodes; for (var i=0;i<newField.length;i++) { var theName = newField[i].name if (theName) newField[i].name = theName + counter; // This will change the 'name' field by adding an auto incrementing number at the end. This is important. } var insertHere = document.getElementById('addQualification'); // Inside the getElementById brackets is the name of the div class you will use. insertHere.parentNode.insertBefore(newFields,insertHere); } here is my form Code: <form name="addAQualification" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data"> <fieldset> <div id="phone"> Degree: <input type="text" name="degree_0" value="" /><br> CGPA/Grade: <input type="text" name="cgpa_0" value="" /><br> Institute: <input type="text" name="institute_0" value="" /><br> </div> <div id="addQualification" style="display: none;"> Degree: <input type="text" name="degree_" value="" /><br> CGPA/Grade: <input type="text" name="cgpa_" value="" /><br> Institute: <input type="text" name="institute_" value="" /><br> </div> <input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br> <input type="submit" name="submit" value="submit" /> </fieldset> </form> here is my php Code: <?php if(isset($_POST['submit'])) //This checks to make sure submit was clicked { echo "You clicked submit!<br>"; echo "Here is your data<br>"; echo "<br>"; if ($_POST['cgpa_0']) //This checks that the proper field has data { $continue = FALSE; $i = 0; while ($continue == FALSE) { if (isset($_POST['degree_'.$i])) //This looks for an entry after 0 and increments { echo $_POST['degree_'.$i] . " = " . $_POST['cgpa_'.$i] . "<br>"; //Echoing the data $degree1 = $_POST['degree_'.$i]; $cgpa1 = $_POST['cgpa_'.$i]; $institute1 = $_POST['institute_'.$i]; $db = mysql_connect("localhost"); mysql_select_db("test", $db); $query = "INSERT INTO cv ( degree1, cgpa1, institute1 ) VALUES ( '$degree1', '$cgpa1', '$institute1' )"; $result = mysql_query($query); //The four lines above is the example on how the data would be put into a MySQL database. It's not used here } else { $continue = TRUE; } $i++; } } } ?> hi i am newbie to js please help me like a newbie thanks. i want to make a form. the form will have three text fields and with two buttons. what i want with this form is when the user enters the first three fields and if he wants to add more then he will click on add more button and on the same page three more fields will appear below the first three fields. the user will then enter these three fields then if he wants to add more then he will click on add more button. so three more fields will appear below the first six fields. user will enter these fields. he will be allowed to enter upto eight or less than eight times. once he finishes with this then he will click the second button to insert this data into db. I am using a script that duplicates a fieldset and an onBlur event that updates a sub total when you enter a value into 3 fields in the set but I am having one glitch that I can not figure out and would appreciate any insight you can provide. Here is the trouble: The duplication of the fieldset works great. I have another script which is creating a sum ("sum") of the fields named "unitPrice" in the original fieldset. When I duplicate the fieldset that has the new "unitPrice" fields they do not get calculated into that sum. I am sure the "unitPrice" fields are being renamed in the new fieldset but what name would I use and how do I write it into the calculation so that the sub total ("sum") is updated with all of the "unitPrice" fields? Thanks for your help. Code: <!DOC HTML> <html> <head> <title> Untitled </title> <script type="text/javascript"> function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); } } // Suffix + Counter var suffix = ':'; var counter = 1; // Clone nearest parent fieldset function cloneMe(a) { // Increment counter counter++; // Find nearest parent fieldset var original = a.parentNode; while (original.nodeName.toLowerCase() != 'fieldset') { original = original.parentNode; } var duplicate = original.cloneNode(true); // Label - For and ID var newLabel = duplicate.getElementsByTagName('label'); for (var i = 0; i < newLabel.length; i++) { var labelFor = newLabel[i].htmlFor if (labelFor) { oldFor = labelFor.indexOf(suffix) == -1 ? labelFor : labelFor.substring(0, labelFor.indexOf(suffix)); newLabel[i].htmlFor = oldFor + suffix + counter; } var labelId = newLabel[i].id if (labelId) { oldId = labelId.indexOf(suffix) == -1 ? labelId : labelId.substring(0, labelId.indexOf(suffix)); newLabel[i].id = oldId + suffix + counter; } } // Input - Name + ID var newInput = duplicate.getElementsByTagName('input'); for (var i = 0; i < newInput.length; i++) { var inputName = newInput[i].name if (inputName) { oldName = inputName.indexOf(suffix) == -1 ? inputName : inputName.substring(0, inputName.indexOf(suffix)); newInput[i].name = oldName + suffix + counter; } var inputId = newInput[i].id if (inputId) { oldId = inputId.indexOf(suffix) == -1 ? inputId : inputId.substring(0, inputId.indexOf(suffix)); newInput[i].id = oldId + suffix + counter; } } // Select - Name + ID var newSelect = duplicate.getElementsByTagName('select'); for (var i = 0; i < newSelect.length; i++) { var selectName = newSelect[i].name if (selectName) { oldName = selectName.indexOf(suffix) == -1 ? selectName : selectName.substring(0, selectName.indexOf(suffix)); newSelect[i].name = oldName + suffix + counter; } var selectId = newSelect[i].id if (selectId) { oldId = selectId.indexOf(suffix) == -1 ? selectId : selectId.substring(0, selectId.indexOf(suffix)); newSelect[i].id = oldId + suffix + counter; } } // Textarea - Name + ID var newTextarea = duplicate.getElementsByTagName('textarea'); for (var i = 0; i < newTextarea.length; i++) { var textareaName = newTextarea[i].name if (textareaName) { oldName = textareaName.indexOf(suffix) == -1 ? textareaName : textareaName.substring(0, textareaName.indexOf(suffix)); newTextarea[i].name = oldName + suffix + counter; } var textareaId = newTextarea[i].id if (textareaId) { oldId = textareaId.indexOf(suffix) == -1 ? textareaId : textareaId.substring(0, textareaId.indexOf(suffix)); newTextarea[i].id = oldId + suffix + counter; } } duplicate.className = 'duplicate'; insertAfter(duplicate, original); } // Delete nearest parent fieldset function deleteMe(a) { var duplicate = a.parentNode; while (duplicate.nodeName.toLowerCase() != 'fieldset') { duplicate = duplicate.parentNode; } duplicate.parentNode.removeChild(duplicate); } </script> <script> function myFunction(){ var the_fields = document.getElementsByName("unitPrice"); var the_sum = 0; for (var i=0; i<the_fields.length; i++){ if (the_fields[i].value != "" && !isNaN(the_fields[i].value)) { the_sum += Number(the_fields[i].value); } } document.repairform.sum.value = (the_sum.toFixed(2)); } </script> <SCRIPT LANGUAGE="JavaScript"> function CalculateTotal() { firstnumber = document.repairform.sum.value/100; secondnumber = document.repairform.tax.value; total = (firstnumber * secondnumber -0) + (document.repairform.sum.value -0); document.repairform.grandTotal.value = total.toFixed(2) ; } </SCRIPT> <script> function checkDecimal(obj, objStr){ var objNumber; if(isNaN(objStr) && objStr!=''){ alert('Value entered is not numeric'); objNumber = '0.00'; } else if(objStr==''){ objNumber = '0.00'; } else if(objStr.indexOf('.')!=-1){ if(((objStr.length) - (objStr.indexOf('.')))>3){ objStr = objStr.substr(0,((objStr.indexOf('.'))+3)); } if(objStr.indexOf('.')==0){ objStr = '0' + objStr; } var sLen = objStr.length; var TChar = objStr.substr(sLen-3,3); if(TChar.indexOf('.')==0){ objNumber = objStr; } else if(TChar.indexOf('.')==1){ objNumber = objStr + '0'; } else if(TChar.indexOf('.')==2){ objNumber = objStr + '00'; } } else{ objNumber = objStr + '.00'; } obj.value = objNumber; } </script> </head> <body> <form id="item_details" name="repairform" method="post" action="#" onSubmit="return false;"> <h2>Contact Information</h2> <fieldset> <table cellspacing="10"> <tr> <td> <label for="name"> Name: </label> </td> <td> <input type="text" id="name" name="name" /> </td> <td> <label for="form-phone"> Phone: </label> </td> <td> <input id="form-phone" type="tel" required> </td> </tr> <tr> <td> <label for="form-date"> Date: </label> </td> <td> <input id="form-date" type="date"required> </td> <td> <label for="form-datewanted"> Date Wanted </label> </td> <td> <input id="form-datewanted" type="date" required> </td> </tr> <tr> <td> <label for="form-address"> Address </label> </td> <td> <input id="form-address" type="text"> </td> </tr> </table> </fieldset> <h2>Vehicle Information</h2> <fieldset> <table cellspacing="10"> <tr> <td> <label for="form-ymc"> Year-Model-Color</label> </td> <td> <input id="form-ymc" type="text" required> </td> <td> <label for="form-make">MAKE</label> </td> <td> <input id="form-make" type="text"> </td> </tr> <tr> <td><label for="form-bodytype">BODY TYPE</label> </td> <td> <input id="form-bodytype" type="text"> </td> <td> <label for="form-unitno">UNIT NO.</label> </td> <td> <input id="form-unitno" type="text"> </td> </tr> <tr> <td> <label for="form-serialno">SERIAL NO.</label> </td> <td> <input id="form-serialno" type="text"> </td> <td> <label for="form-motorno">MOTOR NO.</label> </td> <td> <input id="form-motorno" type="text"> </td> </tr> <tr> <td> <label for="form-mileage">MILEAGE</label> </td> <td> <input id="form-mileage" type="text"> </td> <td> </td> <td> </td> </tr> </table> </fieldset> <h2>Repair Estimate</h2> <fieldset> <span class="tab"> <a href="#" onClick="cloneMe(this); return false;" class="cloneMe" title="Add">+</a> <a href="#" onClick="deleteMe(this); return false;" class="deleteMe" title="Delete">x</a> </span> <table cellspacing="10"> <tr> <td> <label for="repair_replace">Repair/Replace</label> </td> <td class="mainText"> <input class="radio" name="repair_replace" type="radio" value="Repair" />Repair<br> <input class="radio" name="repair_replace" type="radio" value="Replace" />Replace </td> <td> <label for="form-description">Description: </label> </td> <td > <textarea id="form-description" name="form-description" cols="5" rows="5" ></textarea> </td> </tr> <tr> <td> <label>PARTS AND MATERIALS </label> </td> <td><input name="unitPrice" value="" id="parts" onBlur="myFunction(); checkDecimal(this,this.value)" onFocus="this.focus();" class="dollar" /> </td> <td> <label>LABOR </label> </td> <td ><input name="unitPrice" value="" id="labor" type="text" onblur="myFunction(); checkDecimal(this,this.value)" class="dollar"/> </td> </tr> <tr> <td> <label>REFINISHING </label> </td> <td><input name="unitPrice" id="refinishing" type="text" onBlur="myFunction(); checkDecimal(this,this.value)" class="dollar"/> </td> <td> </td> <td > </td> </tr> </table> </fieldset> <h2>Price Estimate</h2> <fieldset> <table cellspacing="10"> <tr> <td><label>SUB TOTAL </label> </td> <td><input type="text" name="sum" class="dollar" readonly/> </td> <td> <label>Tax %</label> </td> <td> <input class="tax" type="text" name="tax" onBlur="CalculateTotal()" /> </td> </tr> <tr> <td> <label>GRAND TOTAL </label> </td> <td> <input type="text" name="grandTotal" class="dollar" readonly/> </td> <td> </td> <td > <p> <input type="submit" value="Send Estimate" onClick="myFunction()"> </p> </td> </tr> </table> </fieldset> <p> <input type="submit" value="Submit" class="button" /><input type="reset" value="Reset" class="button" /> </p> </form> </body> </html> I have a form that only shows the submit (update) buttons if the value select field beside it is changed. But what is someone has JS disabled, how can I enable them? Code: <select title="3553" name="3553" onchange="JavaScript:document.cart.add3553.disabled=false;"> I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name. I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code Code: <html> <head> <title>form</title> <content="text/html"; /> <script type="text/javascript"> <!-- window.onload = function () { if (self.init) init(); } var counter = 0; var counter1 = 0; function init() { document.getElementById('moreFields').onclick = moreFields; document.getElementById('moreFields1').onclick = moreFields1; moreFields(); moreFields1(); } function moreFields() { counter++; var newFields = document.getElementById('readcomp').cloneNode(true); newFields.id = ''; newFields.style.display = 'block'; var newField = newFields.childNodes; for (var i=0;i<newField.length;i++) { var theName = newField[i].name if (theName) newField[i].name = theName + counter; } var insertHere = document.getElementById('writecomp'); insertHere.parentNode.insertBefore(newFields,insertHere); } function moreFields1() { counter1++; var newFields = document.getElementById('readsubgr').cloneNode(true); newFields.id = ''; newFields.style.display = 'block'; var newField = newFields.childNodes; for (var i=0;i<newField.length;i++) { var theName = newField[i].name if (theName) newField[i].name = theName + counter1; } var insertHere = document.getElementById('writesubgr'); insertHere.parentNode.insertBefore(newFields,insertHere); } // --> </script> </head> <body> <div id="readcomp" style="display: none"> Comp name<input type=text name="comp" value="" size="2"/> Concentration<input type=text name="comp_qty" value="" size="2"/> <input type="button" value="Remove comp" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/> <span id="writesubgr"></span> <input type="button" id="moreFields1" value="add subgroup" /><br/><br/> </div> <div id="readsubgr" style="display: none"> Subgroup Name<input type=text name="subgroup" value="" size="2"/> Quantity <input type=text name="subgroup_qty" value="" size="2"/> <input type="button" value="Remove subgroup" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /> </div> <form action="cgi_bin\show_input.pl" method="post"> <span id="writecomp"></span> <input type="button" id="moreFields" value="add comp" /><br/><br/> <input value="Run Program" type="submit"> <input value="Reset all fields" type="reset"> </form> </body></html> any help would be appreciated. thanks Am integrating a Barclays epdq shopping cart into an existing website, part of the regulations with this system is that you can only submit from one 'allowed url'. To enable access from multiple url's I need to create a 'jump page'. This needs to be a simple page that takes any variables posted to it and re-posts them (onload) onto the epdq shopping cart. The problem is I am unable to populate the form dynamically and submit onload. I have tested and it all works fine if hardcoded. Is it possible to submit a dynamically generated form using javascript? PHP Code: foreach ($_POST as $name => $value){ $newVars .= '<INPUT value="' . $value . '" name="' . $name .'" type="hidden" />'; } Code: <html> <head></head> <body onLoad="document.epdqformer.submit();"> <FORM name="epdqformer" id="epdqformer" action="https://secure2.epdq.co.uk/cgi-bin/CcxBarclaysEpdq.e" method="POST"> PHP Code: Hi, jI have a javascript script that adds/deletes input in a form. I'd like to calculate the volume for each ligne : l*h*d Then a total of all the volume fileds The data will be inserted in a php table. Thanks for your help (I hope you can understand my english) I have trouble with php but even more with javascript versions. PHP Code: -- Structure of mysql table named 'tbox' -- CREATE TABLE IF NOT EXISTS 'tbox' ( 'tboxid' int(11) NOT NULL AUTO_INCREMENT, 'tboxidtproid' int(11) NOT NULL, 'tboxdate' date NOT NULL, 'tboxL' int(11) NOT NULL, 'tboxD' int(11) NOT NULL, 'tboxH' int(11) NOT NULL, 'tboxnet' float NOT NULL, 'tboxgros' float NOT NULL, PRIMARY KEY ('tboxid') ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=55 ; The html page wiith js : PHP Code: <html> <head> <script type="text/JavaScript"> // add a box <!-- function create_champ(i){ var l = document.getElementById('l_1').value; var d = document.getElementById('d_1').value; var h = document.getElementById('h_1').value; var v = document.getElementById('v_1').value = (l * d * h) ; var i2 = i + 1; document.getElementById('champs_'+i).innerHTML = '<span id="ligne_'+i+'">L <input type="text" size="9" maxlength="9" name="l[]" id="l_'+i+'" \/> D <input type="text" size="9" maxlength="9" name="d[]" id="d_'+i+'" \/> H <input type="text" size="9" maxlength="9" name="h[]" id="h_'+i+'" \/> Volume : <input type="text" size="9" maxlength="50" name="v[]" id="v_'+i+'" value = "" " disabled="true" \/> <input type="button" value="x" id="boutton_'+i+'"onclick="delete_champ('+i+')" \/><br \/><\/span>'; document.getElementById('champs_'+i).innerHTML += '<span id="champs_'+i2+'"><input type="button" value="Add a box" onclick="create_champ('+i2+')" \/><\/span>'; } function delete_champ(i){ document.getElementById("ligne_"+i).innerHTML=""; } </script> </head> <body> <form id="1" name="addalbum" method="post" action=""> <td width="250" valign="top"><fieldset> <legend>Boxes Dimensions(mm)</legend> <table width="95%" border="0" cellspacing="0" cellpadding="3"> <tr> <span id="ligne_1"> L <input type="text" name="l[]" id="l_1" size="9" maxlength="9" value="" /> D <input type="text" name="d[]" id="d_1" size="9" maxlength="9" value="" /> H <input type="text" name="h[]" id="h_1" size="9" maxlength="9" value="" /> Volume : <input type="text" name="v[]" id="v_1" size="9" maxlength="9" value="" disabled="true" /> <input type="button" value="x" id="boutton_1" onclick="delete_champ(1)" /> <br /> </span> <span id="champs_2"> <input type="button" value="Add a box" onclick="create_champ(2)" \/></span> </table> </fieldset></td> <label> <input type="submit" name="button" id="button" value="Envoyer"> </label> </form> <?php /* insert fields in table tbox */ ?> </body> </html> Hi to all, I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear. How do I get all this data to PHP? Code: <script type="text/javascript"> var counter = 3; function addNew() { // Get the main Div in which all the other divs will be added var mainContainer = document.getElementById('mainContainer'); // Create a new div for holding text and button input elements var newDiv = document.createElement('div'); // Create a new text input var newText = document.createElement('input'); newText.type = "text"; newText.value = "DD/MM/AAAA"; newText.name = counter++; var newText1 = document.createElement('input'); newText1.type = "text"; newText1.value = "DD/MM/AAAA"; newText1.name = counter++; var newText2 = document.createElement('input'); newText2.type = "text"; newText2.value = "0"; newText2.name = counter++; // Create a new button input var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = "Delete"; // Append new text input to the newDiv newDiv.appendChild(newText); newDiv.appendChild(newText1); newDiv.appendChild(newText2); // Append new button input to the newDiv newDiv.appendChild(newDelButton); // Append newDiv input to the mainContainer div mainContainer.appendChild(newDiv); counter++; // Add a handler to button for deleting the newDiv from the mainContainer newDelButton.onclick = function() { mainContainer.removeChild(newDiv); } } </script> <table style="margin-left:200px" border="0"> <tr><!-- Row 1 --> <td width="140"><b>Start Date</b></td><!-- Col 1 --> <td width="142"><b>End Date</b></td><!-- Col 2 --> <td width="140"><b>Price per week</b></td><!-- Col 3 --> </tr> </table> <div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div> So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript"> function getXMLHTTP() { //fuction to return the xml http object var xmlhttp=false; try{ xmlhttp=new XMLHttpRequest(); } catch(e) { try{ xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e1){ xmlhttp=false; } } } return xmlhttp; } function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) { var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('schooldiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } } function getSub(id,cid) { var strURL="findSub.php?source="+id+"&cid="+cid; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('subdiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } } </script> The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution? Code: <script language="Javascript" type="text/javascript"> <!-- //Add more fields dynamically. function addField(area,field,limit) { if(!document.getElementById) return; //Prevent older browsers from getting any further. var field_area = document.getElementById(area); var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area. //Find the count of the last element of the list. It will be in the format '<field><number>'. If the // field given in the argument is 'friend_' the last id will be 'friend_4'. var last_item = all_inputs.length - 1; var last = all_inputs[last_item].id; var count = Number(last.split("_")[1]) + 1; //If the maximum number of elements have been reached, exit the function. // If the given limit is lower than 0, infinite number of fields can be created. if(count > limit && limit > 0) return; //Older Method field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>"; } //--> </script> <ol id="steps_area"><li> <textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /> </li> </ol> <input type="button" value="Add" onclick="addField('steps_area','',15);"/> The page loads and existing data is put in their correct fields. When I click 'add more' to add more fields to the form it does so and I am able to add new data. If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared. how can I get it so the data stays, like in phpmyadmin when adding new fields. JS Code: function addmore(addwhat) { // count existing boxes to find out next number to use. // ? if (addwhat == 'addresses') { fieldid = 'addressesdiv'; } if (addwhat == 'namesnumbers') { fieldid = 'namesdiv'; } var dv = document.getElementById(fieldid).innerHTML; var lines = dv.match(/<br>/ig).length; if (addwhat == 'addresses') { document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>'; } if (addwhat == 'namesnumbers') { document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>'; document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>'; } } PHP Code: <? if ($_POST['Submit'] == 'Submit') { echo("sent<br>"); for ($c = 1; $c <= (count($_POST)-1)/2; $c++) { echo("name" . $c . " = " . $_POST['name'.$c] ." mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>"); } } $customer_id = "11"; // get existing data. // if not yet sent get data from databases $ok = "no"; if ($_POST['Submit'] != "Submit") { echo("<br>not sent<br>"); $res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'"); $maincount = mysql_num_rows($res); echo("<br>number of clients = ".$maincount."<br>"); for ($c = 1; $c <= $maincount; $c++) { $_POST['name'.$c] = mysql_result($res, $c-1, "client_name"); $_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile"); echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>"); } } else { // display last posted info echo("<br>sent<br>"); $ok = "yes"; // check if info was entrted correctly or not. for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) { if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") { echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>"); $ok = "no"; $maincount ++; } if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") { echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>"); $ok = "no"; $maincount ++; } } } if ($ok == "no") { ?> <form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&phpsession=" . $phpsession); ?>"> <div style="width: 850px;"> <div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br> <? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) { if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") { ?> <textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br> <? } } ?> </div> <div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br> <? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) { if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") { ?> <textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br> <? } } ?> </div> </div> <br style="clear: both;"> <a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a> <input type="hidden" name="customer_id" value="<?=$customer_id;?>"> <input type="submit" name="Submit" value="Submit"> </form> <? } ?> Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have a problem with this code. i want to save the result drawing to the database using php as binary format. but i dont know how, can you help me with this. below is my code Code: <div style="width:225px; padding-top:60px; height:452px; margin:0px auto; text-align:center; background:url(template/premium/img/guild.gif) no-repeat top center;"> <form action="" method="post" onsubmit="request('crgild','sh_','POST','index.php'); return false;" id="crgild"> Select Character: <select name="character"> <option value="[ASSASSIN]">[ASSASSIN]</option></select><br><br>NAME: <input class="txt-input" type="text" maxlength="10" name="guildname"><br> <div style="margin:10px;"><div class="guild-top-left2" style="background-color:#000000;"></div> <div class="guild-top-right2" style="background-color:#000000;"></div><div class="guild-top-center2" style="background-color:#000000;"></div> <div class="guild-center-left" style="background-color:#000000;"><div class="guild-center-right"> <table style="width: 150px; height:150px" align=center cellpadding=0 cellspacing=1><tr> <td onclick="addcolor(1);" id="gimage1" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[1]" id="poscolor[1]" value="0"></td> <td onclick="addcolor(2);" id="gimage2" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[2]" id="poscolor[2]" value="0"></td> <td onclick="addcolor(3);" id="gimage3" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[3]" id="poscolor[3]" value="0"></td> <td onclick="addcolor(4);" id="gimage4" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[4]" id="poscolor[4]" value="0"></td> <td onclick="addcolor(5);" id="gimage5" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[5]" id="poscolor[5]" value="0"></td> <td onclick="addcolor(6);" id="gimage6" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[6]" id="poscolor[6]" value="0"></td> <td onclick="addcolor(7);" id="gimage7" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[7]" id="poscolor[7]" value="0"></td> <td onclick="addcolor(8);" id="gimage8" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[8]" id="poscolor[8]" value="0"></td></tr> <tr><td onclick="addcolor(9);" id="gimage9" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[9]" id="poscolor[9]" value="0"></td> <td onclick="addcolor(10);" id="gimage10" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[10]" id="poscolor[10]" value="0"></td> <td onclick="addcolor(11);" id="gimage11" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[11]" id="poscolor[11]" value="0"></td> <td onclick="addcolor(12);" id="gimage12" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[12]" id="poscolor[12]" value="0"></td> <td onclick="addcolor(13);" id="gimage13" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[13]" id="poscolor[13]" value="0"></td> <td onclick="addcolor(14);" id="gimage14" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[14]" id="poscolor[14]" value="0"></td> <td onclick="addcolor(15);" id="gimage15" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[15]" id="poscolor[15]" value="0"></td> <td onclick="addcolor(16);" id="gimage16" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[16]" id="poscolor[16]" value="0"></td></tr> <tr><td onclick="addcolor(17);" id="gimage17" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[17]" id="poscolor[17]" value="0"></td> <td onclick="addcolor(18);" id="gimage18" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[18]" id="poscolor[18]" value="0"></td> <td onclick="addcolor(19);" id="gimage19" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[19]" id="poscolor[19]" value="0"></td> <td onclick="addcolor(20);" id="gimage20" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[20]" id="poscolor[20]" value="0"></td> <td onclick="addcolor(21);" id="gimage21" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[21]" id="poscolor[21]" value="0"></td> <td onclick="addcolor(22);" id="gimage22" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[22]" id="poscolor[22]" value="0"></td> <td onclick="addcolor(23);" id="gimage23" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[23]" id="poscolor[23]" value="0"></td> <td onclick="addcolor(24);" id="gimage24" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[24]" id="poscolor[24]" value="0"></td></tr> <tr><td onclick="addcolor(25);" id="gimage25" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[25]" id="poscolor[25]" value="0"></td> <td onclick="addcolor(26);" id="gimage26" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[26]" id="poscolor[26]" value="0"></td> <td onclick="addcolor(27);" id="gimage27" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[27]" id="poscolor[27]" value="0"></td> <td onclick="addcolor(28);" id="gimage28" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[28]" id="poscolor[28]" value="0"></td> <td onclick="addcolor(29);" id="gimage29" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[29]" id="poscolor[29]" value="0"></td> <td onclick="addcolor(30);" id="gimage30" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[30]" id="poscolor[30]" value="0"></td> <td onclick="addcolor(31);" id="gimage31" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[31]" id="poscolor[31]" value="0"></td> <td onclick="addcolor(32);" id="gimage32" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[32]" id="poscolor[32]" value="0"></td></tr> <tr><td onclick="addcolor(33);" id="gimage33" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[33]" id="poscolor[33]" value="0"></td> <td onclick="addcolor(34);" id="gimage34" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[34]" id="poscolor[34]" value="0"></td> <td onclick="addcolor(35);" id="gimage35" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[35]" id="poscolor[35]" value="0"></td> <td onclick="addcolor(36);" id="gimage36" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[36]" id="poscolor[36]" value="0"></td> <td onclick="addcolor(37);" id="gimage37" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[37]" id="poscolor[37]" value="0"></td> <td onclick="addcolor(38);" id="gimage38" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[38]" id="poscolor[38]" value="0"></td> <td onclick="addcolor(39);" id="gimage39" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[39]" id="poscolor[39]" value="0"></td> <td onclick="addcolor(40);" id="gimage40" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[40]" id="poscolor[40]" value="0"></td></tr> <tr><td onclick="addcolor(41);" id="gimage41" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[41]" id="poscolor[41]" value="0"></td> <td onclick="addcolor(42);" id="gimage42" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[42]" id="poscolor[42]" value="0"></td> <td onclick="addcolor(43);" id="gimage43" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[43]" id="poscolor[43]" value="0"></td> <td onclick="addcolor(44);" id="gimage44" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[44]" id="poscolor[44]" value="0"></td> <td onclick="addcolor(45);" id="gimage45" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[45]" id="poscolor[45]" value="0"></td> <td onclick="addcolor(46);" id="gimage46" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[46]" id="poscolor[46]" value="0"></td> <td onclick="addcolor(47);" id="gimage47" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[47]" id="poscolor[47]" value="0"></td> <td onclick="addcolor(48);" id="gimage48" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[48]" id="poscolor[48]" value="0"></td></tr> <tr><td onclick="addcolor(49);" id="gimage49" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[49]" id="poscolor[49]" value="0"></td> <td onclick="addcolor(50);" id="gimage50" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[50]" id="poscolor[50]" value="0"></td> <td onclick="addcolor(51);" id="gimage51" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[51]" id="poscolor[51]" value="0"></td> <td onclick="addcolor(52);" id="gimage52" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[52]" id="poscolor[52]" value="0"></td> <td onclick="addcolor(53);" id="gimage53" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[53]" id="poscolor[53]" value="0"></td> <td onclick="addcolor(54);" id="gimage54" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[54]" id="poscolor[54]" value="0"></td> <td onclick="addcolor(55);" id="gimage55" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[55]" id="poscolor[55]" value="0"></td> <td onclick="addcolor(56);" id="gimage56" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[56]" id="poscolor[56]" value="0"></td></tr> <tr><td onclick="addcolor(57);" id="gimage57" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[57]" id="poscolor[57]" value="0"></td> <td onclick="addcolor(58);" id="gimage58" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[58]" id="poscolor[58]" value="0"></td> <td onclick="addcolor(59);" id="gimage59" style="border:1px solid #555555; cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"> <input type="hidden" name="poscolor[59]" id="poscolor[59]" value="0"></td> </tr> <tr></table></div></div> <div class="guild-bottom-left" style="background-color:#000000;"></div><div class="guild-bottom-right" style="background-color:#000000;"></div> <div class="guild-bottom-center" style="background-color:#000000;"></div></div> <div id="currentcolor2" style="width:15px; float:left; margin-left:30px; height:15px; border:1px solid #555555; background:url(template/premium/img/guild-back.gif);"></div> <div style="float:feft; text-align:left; margin-left:50px; margin-right:20px;">After selecting a color with the mouse, please draw.</div><br> <table align=center cellpadding=0 cellspacing=0 border=1><tr> <td onclick="changecolor(this.style.background,0)" style="cursor:pointer; background:url(template/premium/img/guild-back.gif);" width="15" height="15"></td> <td onclick="changecolor(this.style.background,1)" style="cursor:pointer; background:#000000;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,2)" style="cursor:pointer; background:#8c8a8d;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,3)" style="cursor:pointer; background:#ffffff;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,4)" style="cursor:pointer; background:#fe0000;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,5)" style="cursor:pointer; background:#ff8a00;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,6)" style="cursor:pointer; background:#ffff00;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,7)" style="cursor:pointer; background:#8cff01;" width="15" height="15"></td></tr> <tr><td onclick="changecolor(this.style.background,8)" style="cursor:pointer; background:#00ff00;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,9)" style="cursor:pointer; background:#01ff8d;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,'A')" style="cursor:pointer; background:#00ffff;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,'B')" style="cursor:pointer; background:#008aff;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,'C')" style="cursor:pointer; background:#0000fe;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,'D')" style="cursor:pointer; background:#8c00ff;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,'E')" style="cursor:pointer; background:#ff00fe;" width="15" height="15"></td> <td onclick="changecolor(this.style.background,'F')" style="cursor:pointer; background:#ff008c;" width="15" height="15"></td> </tr></table> <input type="hidden" id="currentcolor" value=""><br><br> <input class="guild-submit" name="createguild" type="submit" value="Create"></form></div> <script type="text/javascript"> function changecolor(color,encode) { document.getElementById('currentcolor').value=encode; document.getElementById('currentcolor2').style.background=color; } function addcolor(id) { document.getElementById('poscolor['+id+']').value=document.getElementById('currentcolor').value; document.getElementById('gimage'+id).style.background=document.getElementById('currentcolor2').style.background; } </script> <input type="hidden" id="new_credits" value="0"> I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) { var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ; result = result.toFixed(2) ; result = addCommas(result) ; document.getElementById("total"+selected).innerHTML = result ; } The bit that adds a new row of fields is: Code: function addPart(divName){ var newdiv = document.createElement('div') ; newdiv.setAttribute('id', 'partrow' + counter) ; newdiv.setAttribute('style', 'clear:both;') ; newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ; document.getElementById(divName).appendChild(newdiv) ; counter++ ; } The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong hello people! i would like to ask if someone can help me code a couple of scripts for saving various data into cookies, and then post them to e-mail through a cgi script. to be more clear, i want to save some questionare's answers given through a series of html pages, to cookies. when (and if) the last question is answered, send all the answers to an e-mail address. thanks! Is there any possible way for JS to save changes that a user has made? my situation is that I'm a photographer who offers photobooks. My customers often have hundreds or thousands of photos and want captions on lots of them. I want to post a photo gallery with a user input form. I've created a simple form, but I want the user to be able to save comments straight to the gallery so I can look at them... it's only a very simple form and isn't quite finished yet, oh by the way, I'm not sure how to use the check box... but, i'll work on that. Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- #divWrapper { text-align: center; width: 430px; margin-right: auto; margin-left: auto; } --> </style> </head> <body> <script type="text/javascript"> function picForm() { if(document.frmInput.addPic.value="yes") { document.frmOutput.outChoice.value="will" } else { document.frmOutput.outChoice.value="will NOT" } document.frmOutput.outCap.value=document.frmInput.addCap.value; document.frmOutput.outComm.value=document.frmInput.addComm.value; } </script> <div id="divWrapper"> <p>Uncheck the box if you do NOT want this photo to appear in your photobook. Please write your caption in the box provided. Any further comments you wish to make can be entered in the second box.</p> <div id="divInput"> <form name="frmInput"> <table id="tblForm" cellpadding="3px"> <tr> <td><input name="addPic" type="checkbox" value="yes"> Add to Photobook</td> <td> </td> </tr> <tr> <td>Caption<br> <textarea name="addCap" cols="24" rows="3" value="...Add Caption Here..."></textarea></td> <td>Comments<br> <textarea name="addComm" cols="24" rows="3" value="...Add Comments Here..."></textarea></td> </tr> <tr> <td></td> <td><div align="right"> <input name="btnSubmit" type="button" value="Submit" onClick="picForm()" /> </div></td> </tr> </table> </form> </div> <div id="divOutput"> <form name="frmOutput"> <p>This photo <input name="outChoice" type="text" value="" size="7" style="border:0px" /> appear in your photo book.</p> <p>You would like the caption to read: <input name="outCap" type="text" value="" size="50" style="border:0px" /> </p> <p>Your comments to us a <input name="outComm" type="text" value="" size="50" style="border:0px" /> </p> </form> </div> </div> </body> </html> Please help! I'm trying to get my form to save a user's data via cookies. I found a script at http://www.fijiwebdesign.com/blog/re...ubmission.html, and it only seems to work if you refresh the page, but not if you close out the browser and restart. Code: <form action="process-contact.php" id="contact" method="post"> Name: <input type="text" name="name"/> <br />Email: <input type="text" name="email"/> <br />Message: <textarea name="message"></textarea> <br /><input type="submit" value="Submit"/> </form> <script type="text/javascript"> window.onload = function() { rememberFormInputs('contact', 'input-'); } /** * Set a cookie * @param string cookie name * @param string cookie value * @param string cookie expiration counter in days * @param string cookie path * @param string cookie domain * @param bool secure? */ function setCookie(name, value, expires, path, domain, secure) { var today = new Date(); today.setTime(today.getTime()); if (expires) { expires = expires * 1000 * 60 * 60 * 24; } var expires_date = new Date(today.getTime() + (expires)); document.cookie = name+"="+escape(value) + ((expires) ? ";expires="+expires_date.toGMTString() : "") + ((path) ? ";path=" + path : "") + ((domain) ? ";domain=" + domain : "") + ((secure) ? ";secure" : ""); } /** * Get a cookie value * @param string cookie name */ function getCookie(name) { var start = document.cookie.indexOf(name + "="); var len = start + name.length + 1; if ((!start) && (name != document.cookie.substring(0, name.length))) { return null; } if (start == -1) return null; var end = document.cookie.indexOf(";", len); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(len, end)); } /** * Remebers form inputs after you fill them in * @param string form id to remember fields * @param string a prefix to prepend to all cookie names. (prevent naming conflicts) */ function rememberFormInputs(form_id, prefix) { var form = document.getElementById(form_id); var els = document.getElementsByTagName('input'); for (var i = 0; i < els.length; i++) { var el = els.item(i); if (el.type == 'text') { el.onblur = function() { var name = this.name; var value = this.value; setCookie(prefix + name, value); }; var old_value = getCookie(prefix + el.name); if (old_value && old_value != '') { el.value = old_value; } } } } </script> The demo on the site I got this code from is a broken link. I would really appreciate any and all help to get this resolved. I know cookies are suppose to save even after closing out the browser. i want to have the capability similar as that of vbulletin so that if user is writing reply using 'quick reply' & want to move to full editor page the contents be preserved. @phpbb3 (I am successful needs optimisation) 1] the textarea id is similar both in quick & full reply editors 2] When replying a special string is there in url my code: Code: var field = document.getElementById("text_editor_textarea"); if (sessionStorage.getItem("autosave") && document.URL.indexOf("mode=reply") > 0) { field.value = sessionStorage.getItem("autosave"); } if (field) { setInterval(function() { sessionStorage.setItem("autosave", field.value); }, 1e3); } Now everone knows this time interval function is heavy for browsers...so I want to start ts only when field.value.length > 0 but I am unable to do so. Any suggestions. Simply this willnt work Code: if (field && field.value.length > 0) { |