JavaScript - Create Js Array From Dynamic Html Form Fields

i want to build a form have a "payment" select option
ex. when user choose option "credit card" is will show some textbox(firstname and lastname,ccnumber,ccv,expday...)
when user choose option "paypal" is will show some textbox(firsname,email paypal).

Please help me solve this

i 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 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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>

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>

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.

Hi,

i've got a calculator/quotation script i've made. Once the calculation is complete, i want the user to click a button which will copy some of the field data to new fields for printing. This is fine and i can do easily, however i then want the user to be able to reset the form and do another calculation, click the same button and it copy the new data to new fields too.

So in effect you end up with all of your calculations listed somewhere for printing.

how would i attempt this?

any help appreciated

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

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>

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>

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

hi,

I have a code to create a dynamic textboxes in html. But i wanna give ID to each controls to retreieve data from textboxes. How do make this???
here is my code,

<script language="javascript">
function addRow(tableID) {

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell3 = row.insertCell(0);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
</script>

<body>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</body>

help me any one.. Thanks in advance.

Hi everyone,
i am stuck at a problem.
i am trying to craete a redimmensionable array using javascript, is there a way to do this, i know that this can be done in vbscript using redim and preserve commands.

If not then is it possible to variables between javascript and vbscript, or call vbscript function using javascript.

a sample code will be much aprreciated

thanks for your time!

J

I have a javascript that loads images on the page based on the date you select from a drop down menu. So the images are displayed dynamically, however they are numbered 1 through 20.

Is there a way I can add a title tag to the images that will display on mouseover?

Here's the page I am working on. I want to add title tags to the six images on the right side of the page. They change based on the date selected.

webpage

Thanks.

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