JavaScript - Handle Dynamic Input Fields In Post Method Using Php

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++;
            }
        }
    }
?>

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 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>

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.

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:

	 
		
			 
<?php print "$newVars"; ?>

 
		
	


</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

So I made myself this code so I could have a file upload input field, and the option to add more fields. but it got really big, and I have a fixed number of fields, can't quickly change the number I want.

here's my javascript:
Code:

function new_field(id) {
var f = document.getElementById(id);
if(f.style.display == 'none')
f.style.display = 'block';
}

function hide_mais(id) {
var g = document.getElementById(id);
g.style.display = 'none';
}

and the html:
Code:

<form>
<div id="file_a" style="display:block"><input type="file" /><a href="#" id="link_a" onclick="new_field('file_b');hide_mais('link_a')">mais</a></div>
<div id="file_b" style="display:none"><input type="file" /><a href="#" id="link_b" onclick="new_field('file_c');hide_mais('link_b')">mais</a></div>
<div id="file_c" style="display:none"><input type="file" /><a href="#" id="link_c" onclick="new_field('file_d');hide_mais('link_c')">mais</a></div>
<div id="file_d" style="display:none"><input type="file" /><a href="#" id="link_d" onclick="new_field('file_e');hide_mais('link_d')">mais</a></div>
<div id="file_e" style="display:none"><input type="file" /><a href="#" id="link_e" onclick="new_field('file_f');hide_mais('link_e')">mais</a></div>
<div id="file_f" style="display:none"><input type="file" /><a href="#" id="link_f" onclick="new_field('file_g');hide_mais('link_f')">mais</a></div>
<div id="file_g" style="display:none"><input type="file" /><a href="#" id="link_g" onclick="new_field('file_h');hide_mais('link_g')">mais</a></div>
<div id="file_h" style="display:none"><input type="file" /><a href="#" id="link_h" onclick="new_field('file_i');hide_mais('link_h')">mais</a></div>
<div id="file_i" style="display:none"><input type="file" /><a href="#" id="link_i" onclick="new_field('file_j');hide_mais('link_i')">mais</a></div>
<div id="file_j" style="display:none"><input type="file" /><a href="#" id="link_j" onclick="new_field('file_k');hide_mais('link_j')">mais</a></div>
<div id="file_k" style="display:none"><input type="file" /><a href="#" id="link_k" onclick="new_field('file_l');hide_mais('link_k')">mais</a></div>
<div id="file_l" style="display:none"><input type="file" /><a href="#" id="link_l" onclick="new_field('file_m');hide_mais('link_l')">mais</a></div>
<div id="file_m" style="display:none"><input type="file" /><a href="#" id="link_m" onclick="new_field('file_n');hide_mais('link_m')">mais</a></div>
<div id="file_n" style="display:none"><input type="file" /><a href="#" id="link_n" onclick="new_field('file_o');hide_mais('link_n')">mais</a></div>
<div id="file_o" style="display:none"><input type="file" /><a href="#" id="link_o" onclick="new_field('file_p');hide_mais('link_o')">mais</a></div>
<div id="file_p" style="display:none"><input type="file" /><a href="#" id="link_p" onclick="new_field('file_q');hide_mais('link_p')">mais</a></div>
<div id="file_q" style="display:none"><input type="file" /><a href="#" id="link_q" onclick="new_field('file_r');hide_mais('link_q')">mais</a></div>
<div id="file_r" style="display:none"><input type="file" /><a href="#" id="link_r" onclick="new_field('file_s');hide_mais('link_r')">mais</a></div>
<div id="file_s" style="display:none"><input type="file" /><a href="#" id="link_s" onclick="new_field('file_t');hide_mais('link_s')">mais</a></div>
<div id="file_t" style="display:none"><input type="file" /><a href="#" id="link_t" onclick="new_field('file_u');hide_mais('link_t')">mais</a></div>
<div id="file_u" style="display:none"><input type="file" /><a href="#" id="link_u" onclick="new_field('file_v');hide_mais('link_u')">mais</a></div>
<div id="file_v" style="display:none"><input type="file" /><a href="#" id="link_v" onclick="new_field('file_w');hide_mais('link_v')">mais</a></div>
<div id="file_w" style="display:none"><input type="file" /><a href="#" id="link_w" onclick="new_field('file_x');hide_mais('link_w')">mais</a></div>
<div id="file_x" style="display:none"><input type="file" /><a href="#" id="link_x" onclick="new_field('file_y');hide_mais('link_x')">mais</a></div>
<div id="file_y" style="display:none"><input type="file" /><a href="#" id="link_y" onclick="new_field('file_z');hide_mais('link_y')">mais</a></div>
<div id="file_z" style="display:none"></div>
</form>

any suggestions of a more efficient way to do that?
also a button to reset form into initial state, with one field only, without having to refresh the page would be cool.

thanks in advance

Hello,

I would like to create a form that calculates the area of a floor or wall. The user will input the length/height and width dimensions into two input fields and then click calculate.

I simply need a script that multiplies the two fields together and puts the answer in a third read-only field.

Any help much appriciated

Kind regards, Mike

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.

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,
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>

Hello Everyone,

I am inexperienced in JavaScript. I have an html page with several numeric input fields which are an array. At the bottom of the screen is a running total of the numbers entered.

The html is like:
<INPUT TYPE=TEXT NAME='array[0]' onchange='addup()'>
<INPUT TYPE=TEXT NAME='array[1]' onchange='addup()'>
etc.....
<INPUT TYPE=TEXT NAME='array[9]' onchange='addup()'>
<INPUT TYPE=TEXT NAME='arraytotal'>

The javascript is:
function addup() {
var total = 0;
for (var i=0; i<=10; i++) {
total += Number(document.forms["formname"]["array["+i+"]"].value);
}
document.forms["formname"]["arraytotal"].value = total;
}

This works ok, but I don't want the field arraytotal to be an input field. How can I do this please?

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