Learn VBA & Macros in 1 Week!

JavaScript - Dynamic Fields Within Dynamically Added Field

Full Excel VBA Course - Beginner to Expert

Dynamic Fields Within Dynamically Added Field	View Content

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

Full Excel VBA Course - Beginner to Expert

Add More Fields Dynamically - Its Clearing The Fields Everytime I Add A New Field

Similar Tutorials

View Content

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);"/>

Setfocus On Dynamically Added Text Box.

Similar Tutorials

View Content

Hello,

I am trying to get something to work and I am not having any luck.

I want to dynamically add a set of fields to a table when when the user onBlur the selection drop-down. I want the cursor to be in the text field of the newly added set.

I have been playing around with onfocus function on the hyperlink to see if when focus is gained, it would throw the user into the text field. I am getting the impress that the field has not been created yet, so the getElementbById function cannot find the object just recently created.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script language="JavaScript">
function addEvent() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -1)+ 2;
  numi.value = num;
  var divIdName = "my"+num+"Div";
  var newdiv = document.createElement('div');
  newdiv.setAttribute("id",divIdName);
  newdiv.innerHTML = '<div>'+ num +'</div><div class=name><input class=name id=item-' + num + ' type=text name=item-'+ num + '></div><div><select name=selRow-' + num + ' onBlur="addEvent();"><option value="0">Check</option><option value="1">Cash</option><option value="2">Money Order</option><option value="3">EFT</option></select></div>';
  ni.appendChild(newdiv);
}

function setTxtFocus()
{
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -2)+ 2;
  document.getElementById('item-' + num).focus;
}

</script><style type="text/css">
@import url(style.css);
</style>
</head>

<body onload="addEvent();">
    <div id=image></div>
    <form action=process.php method=post>
    <input type="hidden" value="0" id="theValue" />
    <div id="myDiv"></div>
	<p><a href="javascript:;" onclick="setTxtFocus();">Add Other Suggestion</a></p>
    <p><input type=submit id="submitbutton" value=Submit disabled> <INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"></p>
    </form>
</body>
</html>

Thanks
jlimited

Help With Dynamically Added Select Options

Similar Tutorials

View Content

Hi all,
I have table in Javascript and it has addrow, deleterow, submit, and functions.
when i click it automatically adds new row and it has select option to choose some of them
for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte.

So i need once i select the name from combobox, should not allow user to select same name in coming rows

Here is my code.

Thanks beforehands

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>dinamik sheet</title>
<script>
var i=iteration;
function addrow(){
    var tbl = document.getElementById('sheet');
    var iteration = tbl.rows.length;
document.getElementById('count_rows').value = iteration;
    var row=tbl.insertRow(iteration);

    var cellLeft = row.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(textNode);

    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'txtRow'+iteration;
    el.id = 'txtRow'+iteration;
    el.size = 15;
    el.value = '0';
    el.onblur = sum;
    cellRight.appendChild(el);

    var cellRight = row.insertCell(2);
    var elaz = document.createElement('input');
    elaz.type = 'text';
    elaz.name = 'txtRowaz'+iteration;
    elaz.id = 'txtRowaz'+iteration;
    elaz.size = 20;
    elaz.value = '0';
    elaz.onblur = sum;
    cellRight.appendChild(elaz);



    var cellRight1 = row.insertCell(3);
    var ela = document.createElement('input');
    ela.type = 'text';
    ela.name = 'txtRowe'+iteration;
    ela.id = 'txtRowe'+iteration;
    ela.size = 20;
    ela.value = '0';
    ela.onblur = sum;
    cellRight1.appendChild(ela);

    var cellRightsel = row.insertCell(4);
    var sel = document.createElement('select');
    sel.name = 'selRow' + iteration;
    sel.id = 'selRow' + iteration;
    sel.onchange = sum;
    sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS');
    sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte');
    sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI');
    sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS');
    sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI');
    sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE');
    cellRightsel.appendChild(sel);
    sum();
}
function removeRowFromTable()
{
  var tbl = document.getElementById('sheet');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

function sum(){
    var s1 = 0;
    var s2 = 0;
    var tbl=document.getElementById('sheet');
    var iteration=tbl.rows.length-1;
    for(var i=1; i<=iteration; i++){//loop through table rows
        var el1 = document.getElementById('txtRow'+i);//Row's Income field
        var el2 = document.getElementById('selRow'+i);//Row's percentage menu
        var ela = document.getElementById('txtRowe'+i);//Row's Tax cell
        var elaz=document.getElementById('txtRowaz'+i);

        if(!el1 || !el2 || !ela||!elaz) continue;
        var txt = el1.value;
        if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries

var tax = Number(txt) * Number(130);

if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){
    var  tax = Number(txt) * Number(150);


}
if(el2[el2.selectedIndex].value=="MotherBoard MSI"){
    var  tax = Number(txt) * Number(100);

}
if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){
    var  tax = Number(txt) * Number(85);

}
if(el2[el2.selectedIndex].value=="GraphigCard ATI"){
    var  tax = Number(txt) * Number(95);

}
if (el2[el2.selectedIndex].value=="GraphigCard ATI")
{

        var tax = Number(txt) * Number(88);
}

        ela.value = tax.toFixed(2);
        elaz.value=tax.toFixed(2)/Number(txt);
        if(isNaN(elaz.value)){
        elaz.value=0;
        }
        s1 += Number(txt);
        s2 += tax;

}
    var t1 = document.getElementById('total');
    var t2 = document.getElementById('taxtotal');
    if(t1){ t1.value = s1.toFixed(2); }
    if(t2){ t2.value = s2.toFixed(2); }
}

onload = function(){
    addrow();
}
</script>
</head>
<body>
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr>
<td align="center">
    <table id="sheet" border="1">
    <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr>

    </table>
</td>
</tr>
<tr>
<td align="center">
<input type="hidden" name="count_rows" id="count_rows" />
<input type="button" value="Add" onclick="addrow()" />
<input type="button" value="Remove" onclick="removeRowFromTable()" />
<input type="button" value="SUM" onClick="sum()"/>
<input type="submit" value="Submit" /><br />
</td>
</tr>
<tr>
<td align="left">
<input id="total" name="total" type="text"/>total amount of products<br />
<input id="taxtotal" name="taxtotal" type="text"/>total price of products
</td>
</tr>
</table>
</form>

</body>
</html>

Change Content Of Dynamically Added Row Column

Similar Tutorials

View Content

Hi ,

I am new to javascript and have coded an invoice page through help from some available content on web.

here is my requirement

My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that

when Quantity is entered the Price should change to Price=Quantity*Rate on tab out

So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows.

Code is as below
direct_invoice.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script type="text/javascript" src="js/direct_invoice_table.js">

</script>

<html>
     <head>
          <title>Direct Invoice</title>
     </head>
     <body leftmargin="0" topmargin="0">
	 
	 <p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" />
	  <b> Invoice</b></p>
	 
		<table id="Client_Details">
		  <tr>
			<th>Client Name:</th>
			<td><input type="text" name="client_name" size="20" maxsize="20" /></td>
		  </tr>
		  <tr>
			<th>Client Address:</th>
			<td><input type="text" name="address_line1" size="20" maxsize="40" /></td>
		  </tr>
		  <tr>
		  <td></td>
			<td><input type="text" name="address_line2" size="20" maxsize="40" /></td>			
		  </tr>
		  <tr>
			<th>Pin Code:</th>
			<td><input type="text" name="client_pin" size="7" maxsize="7" /></td>		
		  </tr>		  
		  <tr>
			<th>City/State/Country:</th>
			<td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td>
			<td><input type="text" id="client_state" size="10"  maxsize="20" /></td><td>/</td>
			<td><input type="text" id="client_country" size="10" maxsize="20" /></td>			
		  </tr>
		<tr>
			<th>Email Address:</th>
			<td><input type="text" name="client_city" size="10" maxsize="30" /></td>			
		  </tr>
		<tr>
			<th>TIN/PAN:</th>
			<td><input type="text" name="tin_or_pan" size="10" maxsize="20	" /></td>			
		  </tr>		  
		</table>
	 
	                <table align="center" width = "75%">
                    <tr>
                         <td align = "center">
                              <!--- very imporant to give the table an id --->
                              <!--- otherwise it won't know where to edit --->
                              <table border="1" id="mySampleTable">
                                     <tr>
									 	<th>Item No</th>
										<th>Item Name</th>
										<th>Description</th>
										<th>Unit Cost</th>
										<th>Quantity</th>
										<th>Price</th>
										<th> <font color="RED">Delete</font></th>
                                   </tr>
									<tr>
										<td>1</td>
					<td><input type="text" name="itemname[]"  size="40" "maxsize="100"/></td>
					<td><input type="text" name="description[]" size="20" " maxsize="100" /></td>
					<td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td>
					<td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td>
					<td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td>
								   </tr>
							  </table>
								<table id="totaltbl" align="right">
								<tr>
								  <td></td>
								 </tr>
								  <tr>
									<th>Vat %</th>
									<td><input type="text" name="total" size="3" maxsize="3" /></td>
								  </tr>
								  <tr>
									<th>Total</th>
									<td><input type="text" id = "total"  name="total" size="20" maxsize="100" /></td>
								  </tr>
								</table>

	
                         </td>
                    </tr>
               </table>
          <form action="save_entry.php" name="eval_edit" method="post" format="html">
					<p>	
						<input type="button" value="Add Row" onclick="addRow();" />	
						<input type="button" value="Calculate Total Amount" onclick="Totalcal();" />	
						<input type="button" value="Print" />
					
					</p>
          </form>
		  
		  	 <p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" />
	  </p>
	  <p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p>
	  	  <p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p>
     </body>
</html>

***************

The below is the javascript function that i wrote

Code:

function addRow()
     {
          // grab the element, i.e. the table your editing, in this we're calling it 
          // 'mySampleTable' and it is reffered to in the table further down on the page 
          // with a unique of id of you guessed it, 'mySampleTable'
          var tbl = document.getElementById('mySampleTable');
          // grab how many rows are in the table
          var lastRow = tbl.rows.length;

          // if there's no header row in the table (there should be, code at least one 
          //manually!), then iteration = lastRow + 1
          var iteration = lastRow;
		  
          // creates a new row
          var row = tbl.insertRow(lastRow);

          // left cell
          // insert a cell
          var cellLeft = row.insertCell(0);
          // here we're just using numbering the cell, like anything else you don't
          // have to use this, but i've kinda noticed users tend to like them
          var textNode = document.createTextNode(iteration);
          // takes what we did (create the plain text number) and appends it the cell
          // we created in the row we created. NEAT!
          cellLeft.appendChild(textNode);

          // right cell
          // another cell!
          var cellRight1 = row.insertCell(1);
          // creating an element this time, specifically an input
          var el = document.createElement('input');
          // a data type of text
          el.type = 'text';
          // the name of the element itemname, and because this is dynamic we also
          // append the row number to it, so for example if this is the eigth row
          // being created the text box will have the name of itemname8. super fantastic.
          // the exact same thing with a unique id
          el.id = 'itemname[]'+ iteration;
          // set it to size of 40. setting sizes is good.
          el.size = 40;
          // same thing as earlier, append our element to our freshly and clean cell
          cellRight1.appendChild(el);
		  
    	  var cellRight2 = row.insertCell(2);
          var e2 = document.createElement('input');
          e2.type = 'text';
          e2.id = 'description[]' + iteration;
          e2.size = 20;
	      e2.maxsize = 100;
          cellRight2.appendChild(e2);

    	  var cellRight3 = row.insertCell(3);
          var e3 = document.createElement('input');
          e3.type = 'text';
          e3.id = 'unitcost[]' + iteration;
          e3.size = 10;
 	      e3.maxsize = 100;
          cellRight3.appendChild(e3);
	
    	  var cellRight4 = row.insertCell(4);
          var e4 = document.createElement('input');
          e4.type = 'text';
          e4.id = 'quantity[]'+ iteration;
          e4.size = 4;
 	      e4.maxsize = 100;
	
          cellRight4.appendChild(e4);

    	  var cellRight5 = row.insertCell(5);
          var e5 = document.createElement('input');
          e5.type = 'text';
          e5.id = 'price[]'+ iteration;
          e5.size = 10;
		  e5.maxsize = 100;
		  
          cellRight5.appendChild(e5);
	  
		 // var cellRight7 = row.insertCell(7);
         // var e7 = document.createElement('input');
         // e7.type = 'CHECKBOX';
         // e7.id = 'cancel[]';
         // cellRight7.appendChild(e7);
		
		  var cellRight6  = row.insertCell(6);
		  cellRight6.innerHTML = "&nbsp;&nbsp;<input type='button' value='Delete' size='6' onclick='removeRow(this);'/>";
		
          e4.onclick = dynamic_onc();	
			
     }

	function removeRow(src)
	{
		/* src refers to the input button that was clicked.	
		   to get a reference to the containing <tr> element,
		   get the parent of the parent (in this case case <tr>)
		*/			
		var oRow = src.parentElement.parentElement;		
		
		//once the row reference is obtained, delete it passing in its rowIndex			
		document.all("mySampleTable").deleteRow(oRow.rowIndex);		
	}
	function countRow()
	 {
		var Rowcount = document.getElementById('mySampleTable').rows.length;
		document.eval_edit.count.value = Rowcount-1;
		
	 }
	 	function CalculatePrice()
	 {
		var Rowcount = document.getElementById('mySampleTable').rows.length;
		document.eval_edit.count.value = Rowcount-1;
		
	 }
	 
	     function onc() {
	
        var a= document.getElementById('unitcost[]');
        var b= document.getElementById('quantity[]');
		var c = Math.ceil(a.value*b.value);
			alert(b);
	document.getElementById('price[]').value =c;
	
 }
		
		function dynamic_onc()
		{
		alert('Jay'	);
		e5.value =7;		
		}
		
		function Totalcal() {
		var a= document.getElementById('unitcost[]');
        var b= document.getElementById('quantity[]');
		var c = Math.ceil(a.value*b.value);
		alert(b.value);
		document.getElementById('price[]').value =c;
		}

Dynamically Showing Field Based On Text Value From Another Field

Similar Tutorials

View Content

I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work.

Can I do this?

Help

Js Dynamic Table - Added Rows Recognition

Similar Tutorials

View Content

Hi,

I have a dynamic JS table and the user can add several rows then populate rows with data.
There are 4 columns in table. First row, first two columns have JQuery calendar. Third column has populated select list. Fourth column, first row has JS function to ensure that user enters integer/decimal with corresponding alert for incorrect entry.
Two things I want to do:
1. Populate added rows with JQuery calendars and integer/decimal alert.
2. Capture added rows and data from user entries so that information can be sent to database via ColdFusion programming.

The following is the js code I am using:

For the datepicker I linked to an in-house URL so this is the function -

Code:

$(function() {
		$("#startdate").datepicker();
		$("#enddate").datepicker();
		$("#RcompStart").datepicker();
		$("#RcompEnd").datepicker();
	});
</script>

The objects (inputs) for the above are

Code:

<td><input style="width: 70px" type="text" id="startdate"></td> 
<td><input style="width: 70px" type="text" id="enddate"></td>

For the numeric alert the function is

Code:

<script type="text/javascript">
function checkQuarters( fld )
{
    var val = parseFloat(fld.value);
    if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) )
    {
        alert("Value must be a numeric and a multiple of 0.25");
        return false;
    }
    return true;
}
</script>

The object (input) for the above is

Code:

<td><p>
<form style="width: 5px; height: 1px;">
<input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" /> </form> </td>

And to add and remove rows the function is

Code:

<script language="Javascript" type="text/javascript">
/*<![CDATA[*/
		   
  var new_rows=new Array();
  var row_count=0;

function addRow()
 {
    var tbl = document.getElementById('ReqDtTbl');
      new_rows[row_count]=new Array();
    var lastRow = tbl.rows.length;
    var iteration = lastRow;
  if (lastRow>7){
   return;}
    var row = tbl.insertRow(lastRow);
    var cellLeft = row.insertCell(0);
    var textNode = document.createElement('input');          
      textNode.size = 7;
      textNode.name = 'startdate' + iteration;		  
          cellLeft.appendChild(textNode); 
	new_rows[row_count]['cell']=textNode;
    var cellRight = row.insertCell(1);          
    var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'enddate' + iteration;          
          el.id = 'enddate' + iteration;          
          el.size = 7; 
       new_rows[row_count]['cell2']=el;
         cellRight.appendChild(el);          
          // the last cell!
    var cellRightSel = row.insertCell(2);          
    var sel = document.createElement('select');          
          sel.name = 'TypeHrs' + iteration;          
          sel.options[0] = new Option('-Select-', '""');
          sel.options[1] = new Option('Comp Time', 'Comp Time');
          sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
          sel.options[3] = new Option('Overtime', 'Overtime');
            sel.options[4] = new Option('Rel Comp', 'Rel Comp');          
          cellRightSel.appendChild(sel);
            new_rows[row_count]['cell3']=sel;
     var cellRight = row.insertCell(3);          
     var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'No. of Hours' + iteration;          
          el.id = 'No. of Hours' + iteration;          
          el.size = 7;         
          cellRight.appendChild(el);
          new_rows[row_count]['cell']=el;
          row_count++;
     }
     function removeRow()
     {
          // grab element again
          var tbl = document.getElementById('ReqDtTbl');
          // grab length
          var lastRow = tbl.rows.length;
          // delete last row if there is more than one row
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
     }
	 /*]]>*/
</script>

The buttons for this function are

Code:

<input type="button" value="Add a row" onclick="addRow('ReqDtTbl',5)";/>

   <input type="button" value="Remove a row" onclick="removeRow();" />

That's it.

Thanks - John

Way To Take Values Added To Div And Place In Form Field

Similar Tutorials

View Content

I'm trying to add the ui autocomplete function to some form fields using a facebook style, but I'm not sure how to get more than one value to actually pass to the form field. As my script is now it only takes the last selected value into the hidden form field. Here's my current script:
Code:

				<div id="editcbprofileinterests">
		<div id="formWrap">
<div id="interests" class="ui-helper-clearfix">
<input id="cb_intereststerm" type="text">
<input id="cb_interests" name="cb_interests" type="hidden">
					</div>
				
			
		</div></div>
		<script type="text/javascript" src="autocomplete/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				//attach autocomplete
				$("#cb_intereststerm").autocomplete({
					
					//define callback to format results
					source: function(req, add){
					
						//pass request to server
						$.getJSON("autocomplete/autocominterests.php?callback=?", req, function(data) {
							
							//create array for response objects
							var suggestions = [];
							
							//process response
							$.each(data, function(i, val){								
								suggestions.push(val.cb_intereststerm);
							});
							
							//pass array to callback
							add(suggestions);
						});
					},
					
					//define select handler
					select: function(event, ui) {
						
						//create formatted interest
						var interest = ui.item.value,
							span = $("<span>").text(interest),
							a = $("<a>").addClass("remove").attr({
								href: "javascript:",
								title: "Remove " + interest
							}).text("x").appendTo(span);
						
			//add interest to interests div		          
                        span.insertBefore("#cb_intereststerm");	
                                
                  //add interest to hidden form field
                  $('input[name=cb_interests]').val(interest);
					},
					
					//define select handler
					change: function() {
						
						//prevent 'to' field being updated and correct position
						$("#cb_intereststerm").val("").css("top", 2);
					}
				});
				
				//add click handler to activities div
				$("#interests").click(function(){
					
					//focus 'to' field
					$("#cb_intereststerm").focus();
				});
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("interest")).live("click", function(){
				
					//remove current activity
					$(this).parent().remove();
					
					//correct 'to' field position
					if($("#interests span").length === 0) {
						$("#cb_intereststerm").css("top", 0);
					}				
				});				
			});
		</script>

How To Add Form Fields Dynamically.

Similar Tutorials

View Content

Hi guys, I created a form that contains about 10 form fields and would like to add the option to dynamically add more sets of those 10 fields if a user clicks a word or a button but I need help. I'm a beginner when it comes to JavaScript and would appreciate any help. This is what I need to generate dynamically. Can someone give me an idea of how to get started please?

Code:

<div id="dynamicInput">
<ul>
<li>1</li>
<li><input name='textfield1' type='text' size='10' /></li>
<li><select name='commodity' width='100' style='width: 100px'>
<option>Option 1</option>
</select></li>
<li><input name='textfield2' type='text' size='5' /></li>
<li><input name='textfield3' type='text' size='10' /></li>
<li><input name='textfield4' type='text' size='10' /></li>
<li><input name='textfield5' type='text' size='10' /></li>
<li><input name='textfield6' type='text' size='5' /></li>
<li><input name='textfield7' type='text' size='5' /></li>
<li><input name='textfield8' type='text' size='5' /></li>
</ul>
</div>

Adding Table Fields Dynamically

Similar Tutorials

View Content

Hello, I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs.

So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current one.

Here is my code..

Code:

<img src="images/add.png" width="15" height="15" align="right" >
    <div class="open">
    
    <table width="200" border="0">
  <tr>
    <td class="propertyCol">Input:&nbsp;</th>
    <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
    <td class="propertyCol">Description:&nbsp;</th>
    <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
    <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
  </tr>
</table>
    <table width="200" border="0">
  <tr>
    <td class="propertyCol">Output:&nbsp;</th>
    <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
    <td class="propertyCol">Description:&nbsp;</th>
    <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
    <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
  </tr>
</table>
</div

How Do I Use Form Fields To Dynamically Append Values To The End Of A Url

Similar Tutorials

View Content

I'd like to create a basic form where 3 text input fields are named with the following names referrerId, referrerId2 & referrerId3.

My goal is once the text fields within the form are populated with the users data, then once the user clicks submit, a new browser window opens up (in parent window preferably), navigating to the following url exactly as shown. Highlighted in red is the dynamic information I'd like appended.

Vacation Packages &referrerId=FIRSTNAME&referrerId2=LASTNAME&referrerId3=AGENTNUMBER

Any help would be greatly appreciated. Thanks!

Dynamically Enable & Disabled Form Fields

Similar Tutorials

View Content

I have a form with 3 fields that will allow a user to search a database of clients by either name, email, or client id number. However, I would like the user to only be able to put information in one field. It can be done be either deleting the other two fields when the user inputs information into a different field, or by disabling the other two fields when the user enters information in one (and also frees up all fields if the user ends up deleting what they entered). I've searched and found several helps that were close to what I need but not exactly. I was wondering if anyone would be able to help.

Below is a start of what I had. Basically, it will disable the fields when I mouse out of them but won't re-enable them when I mouse back in. As you can see, I tried various combinations of events. (My code below also doesnt null out the other fields when the user opts to use a different field than the one they first began to enter info in). Any help is much appreciated and if this needs more explanation I will try to clarify better.

Thanks

Code:

<html>	
	<head>
		<script type="text/javascript">
			function makeDisable($ID){
				var x=document.getElementById($ID)
				x.disabled=true
			}
			function makeEnable(){
				var x=document.getElementById($ID)
				x.disabled=false
			}
		</script>
	</head>
	<body>
		<form name='selectclient' action='client_edit.php' method='get'>
		<table>
		<tr>
			<td align='right'>Client ID:</td>
			<td><input id='id' type='text' size='20' name='client_id' onmouseout="makeDisable('id')" onmouseover="makeEnable('id')" value=''  /></td>
		</tr>		
		<tr>
			<td align='right'>Client Email:</td>
			<td><input id='email' type='text' size='20' name='client_email' onblur="makeDisable('email')" onfocus="makeEnable('email')" value=''  /></td>
		</tr>		
		<tr>
			<td align='right'>Client Name:</td>
			<td>
			<select id='name' name='client_name' onblur="makeDisable('name')" onmouseover="makeEnable('id')">
				<option value=''>-- Select --</option>
				<option value='1' >Ted</option>
				<option value='2' >David</option>
				<option value='3' >Zack</option>
			</select>
			</td>
		</tr>
		<tr>
		<td align='left'><input value='Edit' type='submit' name='submit' /></td>
		</tr>
		</table>
		</form>

	</body>
</html>

Creating Fields Dynamically Upon Clicking And Data From Mysql Tables

Similar Tutorials

View Content

I have here a code that will automatically generate two text fields (Title & Price) when "Add another article" is pressed. I got this from the web, but I want instead of using a text field, I want it to create a drop down menu based on a mysql table, then update the price automatically (also based on the mysql table) on the other text field once a selection has been made on the drop down menu.

Code:

<link rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css"></style>
        <script type="text/javascript">
            var elCount = 2;
            function add() {
                var parent = document.getElementById('parent');
                var article = document.createElement('DIV');
                article.id = 'article_' + elCount;
                article.name = 'article_' + elCount;                                     // NEW LINE
                var article_title_label = document.createElement('LABEL');
                article_title_label.appendChild(document.createTextNode('Title ' + elCount + ': '));
                var article_title_text = document.createElement('INPUT');
                article_title_text.id = 'article_' + elCount + '_title';
                article_title_text.name = 'article_' + elCount + '_title';                // NEW LINE
                var article_textarea_label = document.createElement('LABEL');
                article_textarea_label.appendChild(document.createTextNode('Price ' + elCount + ': '));
                var article_textarea = document.createElement('INPUT');
                article_textarea.id = 'article_' + elCount + '_price';
                article_textarea.name = 'article_' + elCount + '_price';                // NEW LINE
                article.appendChild(article_title_label);
                article.appendChild(article_title_text);
                article.appendChild(article_textarea_label);
                article.appendChild(article_textarea);
                parent.appendChild(article);
                elCount++;
            }
        </script>
<body>
                  <div id="parent">
                        <div id="article_1">
                            <label for="article_1_title">Title 1: </label><input type="text" name="article_1_title" id="article_1_title" />
                            <label for="article_1_price">Price: </label><input type="text" name="article_1_price" id="article_1_price" />
                       </div>
                  </div>

any ideas? Thanks

Replace String In Input Field Dynamically

Similar Tutorials

View Content

Hi, I am trying to write some code that will test if a user enters a non-numeric character in an input text field, and if so, replaces it with a '0'

Code:

<script type="text/javascript">
function IsNumVal (){
	for (J=1; J<=3; J++){
		if (isNaN(Number(document.getElementById('Intext' + J).value))){
			document.getElementById('Intext' + J).value = 0;
		}
	}
}
</script>

<Body>
<table border="1" cellspacing="1" id = "Numbers">
  <tr id="RowNum1">
    <td ><input type="text" size = "5" name="Intext1" id="Intext1" value = "3" 
 onkeyup="IsNumVal()" /></td>
  </tr>
  <tr id="RowNum2">
    <td><input type="text" size = "5" name="Intext2" id="Intext2" value = "9" 
 onkeyup="IsNumVal()" /></td>
  </tr>
  <tr id="RowNum3">
    <td><input type="text" size = "5" name="Intext3" id="Intext3" value = "18"
  onkeyup="IsNumVal()" /></td>
  </tr>
</table>
</Body>

document.getElementById('Intext' + J).value = 0; doesn't work
document.Schedule.'Intext' + J.value = 0; doesn't work
document.Schedule.Intext2.value = 0; works, but I need to test each text field while looping, so I can't "hard code" the ID.

Suggestions?

Sum Of Fields In Dynamic Fieldset

Similar Tutorials

View Content

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>

Problem With Dynamic Fields

Similar Tutorials

View Content

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

Need Help In In Creating Dynamic Fields

Similar Tutorials

View Content

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.

Saving Dynamic Fields

Similar Tutorials

View Content

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>

Submit Onload With Dynamic Form Fields

Similar Tutorials

View Content

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>

How To Enable Dynamic Form Fields If Js Turned Off.

Similar Tutorials

View Content

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

Fill Two Fields From One Select Field?

Similar Tutorials

View Content

Hi All,

Firstly - apologies to anyone who has read this in the PHP forum - I was not sure if I needed to post it there or here! I have a PHP form which has an select field (i.e. drop-options) where the different options are populated from a MySQL database as follows:

Code:

<select size="1" id="category" name="category">
     <option value="">Select from drop-list:</option>
     <?php
	$sql = "SELECT * FROM `DB1`
          ORDER BY list_category ASC";
	$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
	while ($row = mysql_fetch_assoc($sql_result)) {
		if ($row["list_category"]<>'') {
			echo '<option value="';
			echo nl2br(stripslashes(utf8_decode($row["list_category"]))).'">';
			echo nl2br(stripslashes(utf8_decode($row["list_category"]))).'</option>';			
		};
	};
?>
</select>

Now, the issue I have is that I also have another input field (possibly hidden) in this form which is called 'category_id', and what I want it to do is to automatically populate when the user selects the relevant 'category' from the select field above.

EDIT: Sorry - should also have told you that the 'category_id' is associated with the 'category' field above in the same database, DB1.

Can anyone recommend any way of doing this?

Thanks,
Neil