JavaScript - Copy Input Fields And Create New

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

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

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.

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

I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear.

How do I get all this data to PHP?

Code:

<script type="text/javascript">
			var counter = 3;
			function addNew() {
				// Get the main Div in which all the other divs will be added
				var mainContainer = document.getElementById('mainContainer');
				// Create a new div for holding text and button input elements
				var newDiv = document.createElement('div');
				// Create a new text input
				var newText = document.createElement('input');
				newText.type = "text"; 
				newText.value = "DD/MM/AAAA"; 
				newText.name = counter++;
				
				var newText1 = document.createElement('input');
				newText1.type = "text"; 
				newText1.value = "DD/MM/AAAA";
				newText1.name = counter++;
				
				var newText2 = document.createElement('input');
				newText2.type = "text";
				newText2.value = "0"; 
				newText2.name = counter++;

				// Create a new button input
				var newDelButton = document.createElement('input');
				newDelButton.type = "button";
				newDelButton.value = "Delete";

				// Append new text input to the newDiv
				newDiv.appendChild(newText);
				newDiv.appendChild(newText1);
				newDiv.appendChild(newText2);

				
				// Append new button input to the newDiv
				newDiv.appendChild(newDelButton);
				// Append newDiv input to the mainContainer div
				mainContainer.appendChild(newDiv);
				counter++;
				
				// Add a handler to button for deleting the newDiv from the mainContainer
				newDelButton.onclick = function() {
						mainContainer.removeChild(newDiv);
				}
			}
		</script>
<table style="margin-left:200px" border="0">
  <tr><!-- Row 1 -->
     <td width="140"><b>Start Date</b></td><!-- Col 1 -->
     <td width="142"><b>End Date</b></td><!-- Col 2 -->
     <td width="140"><b>Price per week</b></td><!-- Col 3 -->
  </tr>
  </table>
  
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>

I have a registration form that I am working on in which I need to assign a price to each option in a selection box then write that price in the document.
Then I have a radio button that will add (different amounts based on selection) to that price before it is written. Then I have another radio button that just needs to write a price based on its selection. Both of these values will be written and then totaled. (See below for a less confusing explanation)

On HTML form:
>drop down list (name courseName, value of selections 1,2,3,4)
> radio button (name returnStudent, value of selections 1,2)
> radio button (name bookNeeded, value of selections 1,2)


Table (name totalprice) at the bottom of the form:
price1: price of courseName plus returnStudent (td with name tuitionprice)
price2: price of bookNeeded (td with name bookprice)
Total of the above (td with name totalprice)

This is what I am trying to make work...
Code:

var selectedCourse = document.onsiteRegistration.courseName.value;
var selectedStudent = document.onsiteRegistration.returnStudent.value;
function setTuition()
{
	if (selectedCourse == "1" && selectedStudent =="1")
	{
		document.write("12345");
	}

	if (selectedCourse == "1" && selectedStudent =="2")
	{
		document.write("54321");
	}
}

Then in my HTML I have simply put this to call the function and write it where I need it to be placed. <script>setTuition()</script>

I am trying to find some examples of something like this but all I am coming up with is shopping carts and that is not what I need here. I am fairly confident that I can program the second part (totaling) if I can only get the selections to populate the different prices for me. If someone could point me in the right direction I would be very grateful!

Hi

Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above.

I think the best solution would be using Javascript can anyone suggest a solution or example code?

Many thanks

Sarah

The simplified code below works, and should give you an idea of what Im trying to achieve. The final version will have dozens of input fields so you can see why the below method stinks

Code:

<html><head><title>Values</title>

<script type="text/javascript">
<!--
function getid() {
var myNum = document.frm1.field1.value;

if(myNum == "A"){
	document.frm1.field2.value = "1"
} else if(myNum == "B"){
	document.frm1.field2.value = "2"
} else {
	document.frm1.field2.value = ""
}

var myNum2 = document.frm1.field3.value;

if(myNum2 == "A"){
	document.frm1.field4.value = "1"
} else if(myNum2 == "B"){
	document.frm1.field4.value = "2"
} else {
	document.frm1.field4.value = ""
}

}
//-->
	
</script>

</head><body>  

<form name="frm1" id="frm1">

	<input type="text" size="40" name="field1" id="field1" onChange="JavaScript:getid();" /><input type="text" size="4" id="field2" name="field2" /> <br>

	<input type="text" size="40" name="field3" id="field3" onChange="JavaScript:getid();" /><input type="text" size="4" id="field4" name="field4" /> <br>
</form>

</body>  
</html>

Each text input will have A or B written in by the user, which should automatically place that letters associated ID in its partner field. If any other letter is entered the ID will automatically be left blank.

With the above code I'd need to repeat it over and over for each of the dozens of input fields. The final version wont be using simply A/B either but around 50 possible inputs each with their own ID which would make around 1000 possible variations. What am I missing here that will simplify the process? Thanks

I tried to create a new text input once the last text box gets focus. But I cant even type in them because every time it gets focus a new text input is created! I really dunno what to do.

Code:

<html>
<head>
<script type="text/javascript">
function getTB(field)
{ 
var i = document.getElementById("f1").length + 1;

var cmd = "<input type=text name = "+ i + " onfocus=getTB() value = " + i + ">";

document.getElementById('f1').innerHTML = document.getElementById('f1').innerHTML + cmd;
document.getElementById(i-2).focus();
}
</script>
</head>
<body>
<form id ="f1">
<input type ="text" value ="hello" name="1" onFocus ="getTB(this)">
</form>
</body>
</html>

how to modify so not every time a new text input created when tried to type in?

I want to use javasript to create a new html page named from a text field in a form. Then I want to use javasript to copy all of the form fields to the new html page that was created using javascripting. I am creating a user are using a Javascript password login. With most of them the page is the user name or password. So this is why I am looking to do this. I use web 1000 a free host and they will only let me use javascripting. Any info or help would be great thank you

I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution?


Code:

<script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
	//Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
	//		field given in the argument is 'friend_' the last id will be 'friend_4'.
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	
	//If the maximum number of elements have been reached, exit the function.
	//		If the given limit is lower than 0, infinite number of fields can be created.
	if(count > limit && limit > 0) return;
 	
	 //Older Method
		
		field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
	
}
//-->
</script>


<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>

<input type="button" value="Add" onclick="addField('steps_area','',15);"/>

The page loads and existing data is put in their correct fields.

When I click 'add more' to add more fields to the form it does so and I am able to add new data.

If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared.

how can I get it so the data stays, like in phpmyadmin when adding new fields.


JS
Code:

function addmore(addwhat) {
	// count existing boxes to find out next number to use.
	// ?
	if (addwhat == 'addresses') {
	fieldid = 'addressesdiv';
	}
	if (addwhat == 'namesnumbers') {
	fieldid = 'namesdiv';
	}
	var dv = document.getElementById(fieldid).innerHTML;
	var lines = dv.match(/<br>/ig).length;
	
		if (addwhat == 'addresses') {
					document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>';
					}
		if (addwhat == 'namesnumbers') {
					document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>';
					document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>';
					}
	}

PHP
Code:

<?
if ($_POST['Submit'] == 'Submit') {
echo("sent<br>");
for ($c = 1; $c <= (count($_POST)-1)/2; $c++) {
echo("name" . $c . " = " . $_POST['name'.$c] ."&nbsp;&nbsp;&nbsp;mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>");
}
}

$customer_id = "11";

// get existing data.

// if not yet sent get data from databases
$ok = "no";
		if ($_POST['Submit'] != "Submit") {
		echo("<br>not sent<br>");
		$res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'");
		$maincount = mysql_num_rows($res);
		echo("<br>number of clients = ".$maincount."<br>");
			for ($c = 1; $c <= $maincount; $c++) {
			$_POST['name'.$c] = mysql_result($res, $c-1, "client_name");
			$_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile");
			echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>");
			}
		} else {
						// display last posted info
						echo("<br>sent<br>");

						$ok = "yes";
						// check if info was entrted correctly or not.
						
						for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) {
							if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") {
							echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>");
							$ok = "no";
							$maincount ++;
							}
							if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") {
							echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>");
							$ok = "no";
							$maincount ++;
							}
						}

				}

if ($ok == "no") {
					?>
					<form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&amp;phpsession=" . $phpsession); ?>">
					<div style="width: 850px;">
						<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
						<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
					</div>
					<br style="clear: both;">
					  <a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a> 
					  <input type="hidden" name="customer_id" value="<?=$customer_id;?>">
					  <input type="submit" name="Submit" value="Submit">
					</form>
					<?
					}
?>

I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url.
I am also assuming this can be accomplished with javascript.

Any help is greatly appreciated.

I have a problem with adding new inputs to a form (if and when required),

Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank.

JS:
Code:

fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}

form:
Code:

<form action="index.php" method="post">
<div id="input">
  <input type="text" name="input[]" size="30" maxlength="15" />
</div>

<!-- button -->
<div id="more">
  <input type="button" onclick="addInput()" name="add" value="More" />
</div>
<!-- // button -->

 <input type="submit" name="submit" value="Submit" />

 </form>

as usual any help is appretiated ..

since there are troubles with innerHTML in IE .....

instead of :

Code:

target.innerHTML = src.innerHTML;

-->

Code:

  this.copy_innerHTML = function(src,target)
  {
    //remove all target inner elements
    while(target.hasChildNodes()){target.removeChild(target.childNodes[0])}

    for (var j = 0; j<src.childNodes.length-1; j++)
    {
       target.appendChild(src.childNodes[j].cloneNode(true));
    }

  }

a) Tested in FF and GC

b) in IE this works, but stuff does not appear where it should.

EDIT: if text nodes removed , then even in ff does not work, does not find textarea inside target node.
That is, the error pops up, previously only notable at IE. HTML & CSS validation is OK.

Any advice ?