JavaScript - Adding Form's Value To Url

Hello guys (and girls)
I am messing with this whole day, 'cos I wanted to try and figure this out by myself instead of going on forums.
I failed, as you may see. So, to cut it short:

I needed to calculate my prices on-the-fly and display it in textbox with javascript.
Well I did succeed with values of radio button an checbox, but as i know very little javascript, I don't know how to expand the code i got from he

http://javascript.internet.com/forms...e-refresh.html

So what I would LOVE to know, is how can I make this happen:

I have a textbox:

Code:

<input type="text" name="podstranice" size="19" class="podstr" onkeyup="this.form.total.value=calculateTotal(this);">

and when a user inputs a number in it, javascript multiplies it with some other number, say 10 (its a price*quantity thing) and adds it to the total price along with data from checkboxes and radio buttons.

And so, this is my javascript. It is basically identical to one on the link, but you can view it better this way I think.

Code:

// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem) {
  with (inputItem.form) {
    // Process each of the different input types in the form.
    
	if (inputItem.type == "radio") 
	{   // Process radio buttons.
      // Subtract the previously selected radio button value from the total.
      calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
      // Save the current radio selection value.
      previouslySelectedRadioButton.value = eval(inputItem.value);
      // Add the current radio button selection value to the total.
      calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
    } 
	
	else
	{   // Process check boxes.
      if (inputItem.checked == false) 
	  		{   // Item was uncheck. Subtract item value from total.
          calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
     		 } 
	  
	  else {   // Item was checked. Add the item value to the total.
          calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
    		}
    }

	elseif 

    // Total value should never be less than 0.
    if (calculatedTotal.value < 0) {
      InitForm();
    }

    // Return total value.
	return(formatCurrency(calculatedTotal.value));
  }
}

// Format a value as currency.
function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))
     num = "0";
  sign = (num == (num = Math.abs(num)));
  num = Math.floor(num*100+0.50000000001);
  cents = num%100;
  num = Math.floor(num/100).toString();
  if(cents<10)
      cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
      num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
  return (((sign)?'':'-') + num + '.' + cents + ' kn');
}

// This function initialzes all the form elements to default values.
function InitForm() {
  // Reset values on form.
  document.selectionForm.total.value='$0';
  document.selectionForm.calculatedTotal.value=0;
  document.selectionForm.previouslySelectedRadioButton.value=0;

  // Set all checkboxes and radio buttons on form to unchecked.
  for (i=0; i < document.selectionForm.elements.length; i++) {
    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
      document.selectionForm.elements[i].checked = false;
    }
  }
}

I don't want to overspam my post with more code, so I hope this is all you need, at least for now.

THANK YOU very much in advance.

Good morning! Hopefully somebody can help me with this javascript question. (No knowledge of Google Anayltics needed for this.) I'm adding Google Analytics 'Event Tracking' javascript to a typical 'Add to Cart' button. The customer enters desired quantity in the text box and clicks the 'Add to Cart' button to order. I would like to use the Event Tracking javascript to record the button click - plus the Value entered in the text box - as one event. Here's the code for the form (the text box and 'Add to Cart' button code lines are bold):

Code:

<form method="post" action="http://www.yoursite.com/mm5/merchant.mvc?">
<input type="hidden" name="Screen" value="BASK" />
<input type="hidden" name="Product_Code" value="yourproductcode" />
<input type="hidden" name="Action" value="ADPR" />
<label for="quantity">Quantity:</label>
<input type="text" name="quantity" value="0" />
<input type="submit" value="Add To Cart" />
</form>

I came up with this javascript for the Event Tracking (to be inserted somewhere above):

Code:

onClick="_gaq.push(['_trackEvent', 'OrderForms', 'AddToCart', 'yourproductcode', document.getElementByName('quantity').value]);"

I'm wondering where I would enter this javacript code inside the form code to pick up both the button click - plus the quantity? You'll notice that I'm using 'getElementByName' to extract 'quantity' from the text box and record its 'value'. If I enter this javascript on the 'Add to Cart' line - right after "Add to Cart", would 'quantity' still get picked up upon button-click - since it's all on the same form? Or would it be a problem because 'quantity' is contained in a different <input> container?

Thanks! Any help is greatly appreciated.
IB

Hi, firstly I apologise if the title of this thread isn't quite accurate. I'm sure you've all heard it before but I am a complete newbie to Javascript so again: apologies if this is boring and tiresome to even read, let alone help with!

I have been asked to make some changes to a form that uses Javascript for the form validation. There is a 'function' that contains the variables of the various form fields and then further code to raise 'alerts' if one of the fields on the form hasn't been filled in. My problem is that for some reason I am unable to add an extra variable to this code after the field of 'County' (this will hopefully make sense when you see the code / link...) and I am stumped as to why. I am able to add variables for all of the other required fields except for 'Postcode' after 'County'. This is the case for both forms. The link is he http://samdelara.co.uk/previews/banq...ation-form.htm and the code I am trying edit is below:

function checkAvailibility()
{
// re-calculate...
calculate ();
if ( isName() && isAddress1() && isTown() && isCounty() && isPostcode() && isYourEmail() && isFuncDate() && somethingToQuoteFor() && isYourEmailValid() ) {
document.ordersummary.emailQuote.value = "No";
setValue();
return true;
}
else
{
return false;
}
}


function isName() { if (document.ordersummary.Name.value=="") { alert ("\n Please Enter Your Name")
document.ordersummary.Name.focus(); return false; } return true; }
function isAddress1() { if (document.ordersummary.Address1.value=="") { alert ("\n Please Enter Your Address")
document.ordersummary.Address1.focus(); return false; } return true; }
function isTown() { if (document.ordersummary.Town.value=="") { alert ("\n Please Enter Your Town")
document.ordersummary.Town.focus(); return false; } return true; }
function isCounty() { if (document.ordersummary.County.value=="") { alert ("\n Please Enter Your County")
document.ordersummary.County.focus(); return false; } return true; }
function isPostcode() { if (document.ordersummary.Postcode.value=="") { alert ("\n Please Enter Your Postcode")
document.ordersummary.Postcode.focus(); return false; } return true; }
function isYourEmail() { if (document.ordersummary.YourEmail.value=="") { alert ("\n Please Enter Your Email")
document.ordersummary.YourEmail.focus(); return false; } return true; }
function isFuncDate() { if (document.ordersummary.FuncDate.value=="") { alert ("\n Please Enter Your Function Date")
document.ordersummary.FuncDate.focus(); return false; } return true; }
function isemailonly() { if (document.ordersummary.emailonly.value=="") { alert ("\n Please Enter Your Email Address")
document.ordersummary.emailonly.focus(); return false; } return true; }

Any help with this would be very much appreciated and once again, I apologise for my distinct lack of knowledge in this area!

Sam

Hey CF, I'm currently working on a website called 'eXtreme Gaming' I've almost completed it, apart from two things.

- Adding two values on my checkout page for the Grandtotal (I've tried everything, but I'm too much of a noob and have probably missed something small).

- Validation of forms (I don't know where to start here, I've looked on w3schools for tuts etc but I'm having difficulty incorporating it on my site)

I'm going to put the code for my checkOut page only, if you are able to help me many thanks in advance.

[quote] Code:

<HTML>

<HEAD>

<script language="JavaScript" src="laptopsCookie.js">
</script>

<script language="JavaScript" src="desktopsCookie.js">
</script>

<script language="JavaScript"><!--
function calculateTotalPurchaseLaptop(formRef)
{
	var laptopTotal=0;
	for (var i=0; i<LaptopListPurchase.length/2;i++)
	{
	 var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
	 formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
	// document.orderForm2.grandTotal.value = document.orderForm.laptopTotal.value + document.orderForm2.desktopTotal.value
	 
	 laptopTotal += subTotal;
	}
	
	formRef.laptopTotal.value = laptopTotal.toFixed(2); 
}
//--></script>

<script language="JavaScript"><!--
function calculateTotalPurchaseDesktop(formRef)
{
	var desktopTotal=0;
	for (var i=0; i<DesktopListPurchase.length/2;i++)
	{
	 var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
	 formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
	
	 
	 desktopTotal += subTotal;
	}
	
	formRef.desktopTotal.value = desktopTotal.toFixed(2); 
}
//--></script>

<script language="Javascript"><!--

function checkform()
{
	if (document.payment.Name.value == "")
	{
		alert('Please enter a name');
		return false;
	}
	//else if(isNaN(document.payment.CreditCard.value) || document.payment.CreditCard.length !== 10)
	//{
	//	alert('Invalid Credit Card Number');
	//	return false;
	//}
	else if (document.payment.Adress.value == "")
	{
		alert('Please enter your adress.');
		return false;
	}
	else if (document.payment.State.selectedIndex == 0)
	{
		alert('Please select a state');
		return false;
	}

	return true;
}


</script>
</HEAD>

<BODY>

<TITLE>Check Out</TITLE>

<script>
var html = "";

	html += '<TABLE align="center"><tr><td><img src = "images/checkOutTitle.png" align="center" style="border:none" /></td></tr></TABLE>';
	html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
	html += '<form id = "orderForm" name = "orderForm" method = POST action="javascript:void(0)">';
	html += '<tr>';
	html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
	html += '</tr>';

    for (var i=0; i<LaptopListPurchase.length;i=i+2)
	{	
				
      html += '<tr><td>' + LaptopListPurchase[i] + '</td>';
	  html += '<td><select NAME="quantity' + i/2 + '"  onChange="calculateTotalPurchaseLaptop(this.form)">';
	  html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
	  html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
	  html += '</select></td>';
	  html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + LaptopListPurchase[i+1] + '" readonly></td>';
	  html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
	  html += '</tr>';
	}
	html += '<tr>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td>$<input type=TEXT name="laptopTotal" value="" readonly size=7></td></tr>';
	html += '</form>';
	html += '</table>';
	
	document.write(html);

	// Update the quantities
	//
	var quantityLaptop;
	for (var i=0; i<LaptopList.length/2;i++)
	{
		// Get the quantity of each type of Laptop
		//
		quantityLaptop = getCookie("Laptop" + i);
		document.orderForm.elements("quantity"+i).value = quantityLaptop;
	}
	
	// Update the totals
	//
	calculateTotalPurchaseLaptop(document.orderForm)
	

var html = "";

	html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
	html += '<form id = "orderForm2" name = "orderForm2" method = POST action="javascript:void(0)">';
	html += '<tr>';
	html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
	html += '</tr>';

    for (var i=0; i<DesktopListPurchase.length;i=i+2)
	{	
				
      html += '<tr><td>' + DesktopListPurchase[i] + '</td>';
	  html += '<td><select NAME="quantity' + i/2 + '"  onChange="calculateTotalPurchaseDesktop(this.form)">';
	  html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
	  html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
	  html += '</select></td>';
	  html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + DesktopListPurchase[i+1] + '" readonly></td>';
	  html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
	  html += '</tr>';
	}
	html += '<tr>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td>$<input type=TEXT name="desktopTotal" value="0.00" readonly size=7></td></tr>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td align = "center"><b>Grand Total</b></td>';
	html += '<td>$<input type=TEXT name="grandTotal" value="0.00" readonly size=7></td></tr>';
	html += '</form>';
	html += '</table>';
	
	document.write(html);

	// Update the quantities
	//
	var quantityDesktop;
	for (var i=0; i<DesktopList.length/2;i++)
	{
		// Get the quantity of each type of Desktop
		//
		quantityDesktop = getCookie("Desktop" + i);
		document.orderForm2.elements("quantity"+i).value = quantityDesktop;
	}
	
	// Update the totals
	//
	calculateTotalPurchaseDesktop(document.orderForm2)
</script>


<table  align = 'center'>
<tr>
<td><h1>Pay for your Purchase Below</h1></td>
</tr>
</table>

<table border="1" align = 'center' >
<form name="payment" method="post">

<tr>
	<td>
		Name on Credit Card: <input type="text" name="Name" /><br />
		Credit Card number: <input type="text" name="CreditCard" /><br />
		Street Adress: <input type="text" name="Adress" /><br />
		Town: <input type="text" name="Town" /><br />
		State/Territory: <select NAME="State"><OPTION VALUE="Null">--</OPTION><OPTION VALUE="Australian Capital Territory">ACT</OPTION><OPTION VALUE="South Australia">SA</OPTION><OPTION VALUE="Northen Territory">NT</OPTION><OPTION VALUE="Queensland">QLD</OPTION><OPTION VALUE="Victoria">Vic</OPTION><OPTION VALUE="Western Australia">WA</OPTION><OPTION VALUE="Tasmania">Tas</OPTION></select>
	</td>
	<td>
		<INPUT TYPE="RADIO"  NAME="Master Card" VALUE="Master Card">Master Card<BR>
		<INPUT TYPE="RADIO"  NAME="Visa" VALUE="Visa">Visa<BR>
		<INPUT TYPE="RADIO"  NAME="AMEX" VALUE="American Express">American Express<BR>
	</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="return checkform()"></td>
</tr>

</table>

</BODY>

</HTML>[

/quote]

Site in question:

www.yourvancouvermortgagebroker.ca/apply

On the 3rd step of this form, I want to add a "SKIP" button that will send the user to the 5th step. No clue how to do this, as someone else helped me code.

Thank You!

Relevant code

javascript file:

Code:

//step 3
 $('#submit_third').click(function(){
        //remove classes
        $('#third_step input').removeClass('error').removeClass('valid');
        //ckeck if inputs aren't empty
        var fields = $('#third_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='cemail' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });        
        
        if(!error) {

                //update progress bar
                $('#progress_text').html('60% Complete');
                $('#progress').css('width','204px');
                
                //slide steps
                $('#third_step').slideUp();
                $('#fourth_step').slideDown();     
        } else return false;
    });


//step 4
    $('#submit_fourth').click(function(){
        //remove classes
        $('#fourth_step input').removeClass('error').removeClass('valid');
       
        var fields = $('#fourth_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')]) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('80% Complete');
                $('#progress').css('width','272px');
				 //slide steps
        $('#fourth_step').slideUp();
        $('#fifth_step').slideDown();    
	}
    });                

// step 5				
    $('#submit_fifth').click(function(){	
	//remove classes
        $('#fifth_step input').removeClass('error').removeClass('valid');

I need to figure out the on page button code, what I need to add to the javascript file AND what I need to add in the CSS. (css is here)

Thank you SO much to whoever can help.

I'm using a PHP script which has a pop-up box that, when the thumbnail is selected, the video player dynamically appears in the pop-up box. It is outdated, and not working correctly(see attached image), so I'm trying to replace it with venobox: VenoBox - responsive jQuery modal window plugin

So far, I've uploaded the venobox folder, and added this:

Code:

	
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add venobox -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>
</head>

Now it says to:

"Insert one or more links with its custom class":

Code:

<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
<a class="venobox_custom" data-type="iframe" href="http://www.veno.it">open iFrame</a>
For Google Maps use the iFrame href attribute of map's embed code and set data-type="iframe"

"For videos use the simple url of the video, such as: http://www.vimeo.com/your_video_id, or http://www.youtu.be/your_video_id"

The GreyBox that I'm currently using, I believe the code is this:

Code:

	
<tr>
<td width="10px"><a href="/videos/[blk1.vid_id;block=div]/" rel="gb_page_center[470,370]" style="float:right"><br />
<img src="/uploads/thumbs/[blk1.video_id;block=div].jpg" alt="video pic" width="120" height="90" border="0" /></a></td>
<td width="400px"><!--[var.lang_title]--><a href="/videos/[blk1.vid_id;block=div]/" rel="gb_page_center[520,600] ">
<div class="container88888"><!--[blk1.Title;htmlconv=no;block=div;ope=max:70;comm]--></a><br />
<!--[var.lang_description]:-->[blk1.vid_desc;htmlconv=no;block=div;ope=max:268;comm]</div></td>
</tr>

So, I don't know what, in VenoBox, is meant by "Insert one or more links with its custom class" and please help me, what I should do with these further set up instructions?:

Initialize plugin
Code:

$(document).ready(function(){

    /* default settings */
    $('.venobox').venobox(); 


    /* custom settings */
    $('.venobox_custom').venobox({
        framewidth: '400px',        // default: ''
        frameheight: '300px',       // default: ''
        border: '10px',             // default: '0'
        bgcolor: '#5dff5e',         // default: '#fff'
        titleattr: 'data-title',    // default: 'title'
        numeratio: true,            // default: false
        infinigall: true            // default: false
    });

    /* auto-open #firstlink on page load */
    $("#firstlink").venobox().trigger('click');
});

Additionally, since I'm trying to get a video to dynamically play in the box, it states:

"Data Attributes
If the content is not an image you have to specify its type via data attribute data-type"
[CODE]
<a class="venobox" data-type="iframe" href="http://www.veno.it">Open Iframe</a>
<a class="venobox" data-type="inline" title="My Description" href="#inline">Open inline content</a>
<a class="venobox" data-type="ajax" href="ajax-call.php">Retrieve data via Ajax</a>
<a class="venobox" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">Open YouYbe video</a>
<a class="venobox" data-type="vimeo" href="http://vimeo.com/75976293">Open Vimeo video</a>
[/CODE}

Any help/clarification will be appreciated.
Attached Thumbnails  

Ok lol don't mock me, I'm only new to javascript. I'm trying to get the text that contains "The Moderating Team" "Today's Active Topics" etc. an id to the div they are contained in. Here's my code so far:
Code:

<script type="text/javascript">
var c = getElementByClass("div");
if ( c.innerHTML.contains(" The Moderating Team ") ) {
}
</script>

Any help?

Oh and my site: http://stereo.b1.jcink.com

Hi, i'm a newbie in javascript. To make all clear of what I wanna do is, take a look at this URL:

http://danecdotes.hostei.com/addproposal.html

What i wanna do is when you click add more input link, you can have more rows to input more things. Note that in those <td> there's an input field in each <td> and I want those input to have their own names with increment ID (e.g like name1, name2, name3.). How can I make that possible?

Thanks

Hi,

I was trying to add some simple javascript (toggle visibility function of a div) to the FB 'like' button and 'Google +1' button. This to simply create some more visitor interactivity by showing a thank you message for doing so.

I've tried by just adding 'onclick=' to the element that actually shows the button, with a <a href="#" onlcick="..."> --element--</a> manner, and with a <span> and a <div> element around it.

Neither of them work. The toggle script is 100% correct (using it actively with <a href="javascript:void(0);" onclick="javascript:toggleVisibility('feedbackform')">feedback</a> ) Of course I made sure the div id had correct name and it is unique for the toggle function.

Anybody got any ideas on how to go with this?

JS:
Code:

function toggleVisibility(controlId) {
	if (document.getElementById) { // DOM3 = IE5, NS6
		var control = document.getElementById(controlId);
		if(control.style.display == "")
			control.style.display = "none";
		else
			control.style.display = "";        
	}
	else {
		if (document.layers) { // Netscape 4
			if(document.controlId.display == "")
				document.controlId.display = "none";
			else
				document.controlId.display = "";        
		}
		else { // IE 4
			if(document.all.controlId.style.display == "")
				document.all.controlId.style.display = "none";
			else
				document.all.controlId.style.display = "";        
		}
	}
}

I want to be able to add fields to a form with JavaScript, already had a thread about this in the PHP section and someone gave me some code. But that didn't seem to work

So here is some other code:

JavaScript:
Code:

var my_div = null;
var newDiv = null;

function addElement()
{
  // create a new div element
  // and give it some content
  newDiv = document.createElement("div");
  newDiv.innerHTML = "<label for=\"column\">Column Name: </label><input style=\"margin-bottom:1em;\" type=\"text\" 						name=\"column[]\" id=\"column\">";

  // add the newly created element and it's content into the DOM
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

HTML:
Code:

<div class="login">
	<form name="tbCreate" method="post">
		<label for="tableName">Table Name: </label>
		<input type="text" name="tableName"><br />
	</form>
    <input type="button" name="addElement" onClick="addElement()" value="Add Column">
 </div>
<div id='org_div1'></div>

Problem is, it only works if the org_div1 div not between any other tags apart from <body></body>. How can I make it so that the div can be put between the form tags?

I am trying to take the add the numbers input into form boxes 1 and 2 and then output them onto the screen following the form boxes. I have tried many different functions and none of them will work. Can anyone point me in the right direction? Here's my code so far:

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>Math and Compare</title>
<link rel="stylesheet" type="text/css" href="assignment1.css" />	


<div align="center">
<script type="text/javascript">
var title = "<strong>Assignment 1 </br> Aughtman, Zackary</strong>"
document.write(title.fontsize(5));
</script>
<script type="text/javascript">
function result_One(firstNum, secondNum, result1)
		{
			firstNum = document.getElementById("box1").value;
			secondNum = document.getElementById("box2").value;
			result_One = this.firstNum + this.secondNum;
			return calc.result_One;
		}
</script>

</head>

<body>
</br>
</br>
<div id="div1" align="center">
<strong>Addition</strong>
</div>

	<table align = "center">
		<tr>
			<td>
				<form id="box1">
				<input type="text" value="" id="box1" class="box1" /> +
				<input type="text" value="" id="box2" class="box2" /> = 000000000
				</br>
				<div align="center">
				<input type="button" value="Add" id="add"  onclick="result_One;" />
			</td>
		</tr>
	</table>
</body>
</html>

Im trying to dynamically add more fields into my form.

HTML:
Code:

<table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5">
            <tr>
                <td><input size="3" type="text" name="number" /></td>
                <td><input type="text" name="title" /></td>
                <td><input type="button" value="Add another text input" onClick="addInput('add_episodes', 'number');addInput('add_episodes', 'title');"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
                    <input name="entry_id" type="hidden" value="<?php echo $id; ?>">
                    <input class="input submit" type="submit" name="submit" value="Add <?php echo $type; ?>">
                </td>
            </tr>
        </table>

Javascript
Code:

function addInput(divName, type)
{
    var counter = 1;
    var limit = 50;
    if (counter == limit)  {
        alert("You have reached the limit of adding " + counter + " inputs");
    }
    else {
        var tr.document.createElement('<tr>');
        if(type == 'number')
        {
        var newdiv = document.createElement(element);
        newdiv.innerHTML = '<input size="3" type="text" name="number" />';
        document.getElementById(add_input).appendChild(newdiv);
        }
        if(type == 'title')
        {
        var newdiv = document.createElement(element);
        newdiv.innerHTML = '<input type="text" name="title[]" />';
        document.getElementById(divName).appendChild(newdiv);
        }
        counter++;
        document.getElementById(add_input).appendChild(tr);
    }
}

This is one of my first times working with javascript, usually i work with PHP.

Im trying to add more input elements of
Code:

<tr>
<td><input size="3" type="text" name="number" /></td>
<td><input type="text" name="title" /></td>
</tr>

And don't reply that i should make the names into arrays for me to submit more stuff, I'll change that later. But for simplicity and a straightforward problem. I can't get it add more form elements in the correct place or nothing happens at all.