JavaScript - Adding Up Input Fields As They Are Entered

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

Hi,

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

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

how would i attempt this?

any help appreciated

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

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

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

Hey guys,

I just joined the forums (literally) and just started coding (mainly with CSS and HTML) about 3-4 weeks ago. I'd really like to get into JavaScript to make cool things happen on my website. With that being said, I've come up with a pretty cool idea but am not sure how to go about my problem.

Enough with the chit chat. What I'm trying to do is add text to a user's input. For instance, if they write "Hello", the function should automatically add "World" to the output. I'd ideally like for the output to be searched on Google (think search engine) with the results displayed on a new page.

Thanks in advance for any help!

Hi,
I have a working contact form with 3 of the fields requiring validation and they work well.
I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them.
My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag.
Can anyone give me any help and advice as to how to accomplish this?
Many thanks
Code below....

Code:

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script

>


Code:

<form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
      <table width="100%" border="0" cellspacing="5" cellpadding="0">
        <tr>
          <td width="54%" class="subHeader">Full Name* </td>
          <td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Company Name </td>
          <td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Address</td>
          <td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
        </tr>
        <tr>
          <td class="subHeader">Postcode</td>
          <td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
        </tr>
        <tr>
          <td class="subHeader">Telephone Number* </td>
          <td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
        </tr>
        <tr>
          <td class="subHeader">Mobile Number </td>
          <td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
        </tr>
        <tr>
          <td height="25" class="subHeader">Email Address* </td>
          <td class="subHeader"><input name="Email" type="text" id="Email" /></td>
        </tr>
        <tr>
          <td height="30" class="subHeader">Status*</td>
          <td class="subHeader"><select name="StatusClass" id="StatusClass">
            <option selected="selected">Please Choose</option>
            <option>Architect</option>
            <option>Interior Designer</option>
            <option>Private Client</option>
            <option>Student</option>
            <option>Trade Enquiry</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="23" class="subHeader">Project*</td>
          <td class="subHeader"><select name="Project" size="1" id="Project">
            <option selected="selected">Please Choose</option>
            <option>Planning Stages</option>
            <option>New Build</option>
            <option>Refurbishment</option>
            <option>Barn Conversion</option>
            <option>No project - information only</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="37" class="subHeader">How did you hear about us?*</td>
          <td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
            <option selected="selected">Please Choose</option>
            <option>Web Search</option>
            <option>Grand Designs</option>
            <option>Living Etc</option>
            <option>Home Building &amp; Renovation</option>
            <option>Architect</option>
            <option>Friend/Family</option>
            <option>Magazine/Editorial</option>
            <option>Newspaper Article</option>
            <option>Trade Show/Exhibition</option>
            <option>Other</option>
          </select></td>
        </tr>
        <tr>
          <td height="24" class="subHeader">Brochure Request </td>
          <td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
        </tr>
        <tr>
          <td class="subHeader">Message</td>
          <td class="subHeader"><span class="style4">
            <textarea name="Message" id="Message"></textarea>
          </span></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
        </tr>
        <tr>
          <td colspan="2" class="subHeader"><em>* Required fields</em></td>
        </tr>
      </table>
	  </form>

From a database, I have a form that shows a list of items.
These items have an order number that I can change on this form
.
I like to make a very simple button, that just adds +1 to the current values in the fields.
The form fields are all named the same, "OrderNo" and let's call the form "MyForm", and the fields contain a number.
In total there's about 20 input fields (all "OrderNo"), but it can sometimes be more or less.

So in simple:
A 1-click button, that adds "1" to ALL the field values.

It sounds simple (and I think it has to be??), but cannot seem to figure it out.
Anyone a suggestion on this?
Thanks in advance!

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

Hey friends, I'm writing a program but I'm having issues. I need to write a program that asks for 3 different numbers (prompt boxes) and determine which number entered was the highest and the 2nd highest. I know what to do for the input and output but I don't know what to do during the processing.

Hi Friends,
i have a smal task i.e
i have textbox1 ,botton,textbox2 when i enter 21 value then i click button its get in sama row values in textbox2.
i have xml file like this
<DATAPACKET >
<ROWDATA>
<R_ID>101</R_ID>
<R_NAME>R-12</R_NAME>
<R_TEMP>4.266</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>20</R_ID>
<R_NAME>R-22</R_NAME>
<R_TEMP>4.266</R_TEMP>
<R_COLOR>Green</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>21</R_ID>
<R_NAME>R-32</R_NAME>
<R_TEMP>4.266</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>104</R_ID>
<R_NAME>R-134A</R_NAME>
<R_TEMP>4.246</R_TEMP>
<R_COLOR>Light Blue</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>21</R_ID>
<R_NAME>R-290</R_NAME>
<R_TEMP>4.246</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>31</R_ID>
<R_NAME>R-401A</R_NAME>
<R_TEMP>4.246</R_TEMP>
<R_COLOR>Pink</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>32</R_ID>
<R_NAME>R-401B</R_NAME>
<R_TEMP>4.264</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>108</R_ID>
<R_NAME>R-402A</R_NAME>
<R_TEMP>4.426</R_TEMP>
<R_COLOR>Light Greem</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>129</R_ID>
<R_NAME>R-402B</R_NAME>
<R_TEMP>4.266</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>110</R_ID>
<R_NAME>R-404A</R_NAME>
<R_TEMP>4.246</R_TEMP>
<R_COLOR>Orange</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>121</R_ID>
<R_NAME>R-407A</R_NAME>
<R_TEMP>4.267</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>122</R_ID>
<R_NAME>R-408A</R_NAME>
<R_TEMP>4.267</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>113</R_ID>
<R_NAME>R-409A</R_NAME>
<R_TEMP>4.267</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>134</R_ID>
<R_NAME>R-407C</R_NAME>
<R_TEMP>4.264</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>115</R_ID>
<R_NAME>R-410A</R_NAME>
<R_TEMP>4.426</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
</DATAPACKET >
then i try this hear i get all values
function gettxt() {
results = new Array;
var searchterm = document.getElementById("searchme").value;
if (searchterm == null || searchterm == "") {
alert("Enter textbox value");
return false;
}
var istrlen1 = searchterm.length;
var tempname1;
if (istrlen1 == 1) {
tempname1 = searchterm;
}
if (istrlen1 == 2) {
tempname1 = searchterm;
}
if (istrlen1 == 3) {
tempname1 = searchterm;
}
if (istrlen1 == 4) {
tempname1 = searchterm;
}
for (i = 0; i < x.length; i++) {
var name = x[i].getElementsByTagName("R_ID")[0].firstChild.nodeValue;
var name1 = x[i].getElementsByTagName("R_NAME")[0].firstChild.nodeValue;
var exp = new RegExp(tempname1, "i");
if (name.match(exp) != null) {
y = y + 1;
results.push(name1);
}
}
textbox2.value = results;
}
i try the above code hear small problom when i enter 21 and click button its display 21,121,123... related values i dont want like that
for example textbox1=21 buttonclick textbox2=R-32,r-407A,r-408A like that i dont want like that
i want textbox1=21 buttonclick textbox2=R-32 only in same row value
please any one knows well in js please resolve my problom

Hi,

I am trying to write a small javascript program where I can call the following two functions and store information which a user enters. The problem is if I call the function a second time to add more information the array gets overwritten.

info ()
insert (name, surname, favouriteColour)

function info ()
{
name = prompt ("Please enter your name.");
surname = prompt ("Please enter your surname.");
favouriteColour = prompt ("Please enter your favourite colour.");
}

function insert (name, surname, favouriteColour)
{
var info = new Array ();
info.name = name;
info.surname = surname;
info.favouriteColour = favouriteColour;
return info
};
Help is really appreciated..

Hello!

First off, please excuse my ignorance. I am a bit new to the coding world.

I want users to be able to enter data into a textbox on my site, and the data then be placed at the end of a specific url, followed by '.html'.

For example, say my website is mysite.com. If someone enters in the word "John" in the textbox and clicks the 'Submit' button, the URL should now be: mysite.com/John.html

Thanks in advance!