JavaScript - Button Switch Text And Call Different Functions On Onclick

Hi,

I am trying to get my onclick event to handle both of the function below. I want the event to return false (stop executing) if any of the two functions return false. Here is my code:
Code:

function isNumeric(elem, helperMsg){
            var numericExpression = /[0-9]+/;
            if(!elem.value.match(numericExpression)){
                SaveRecord();
                return true;
            }else{
                alert("You cannot enter numbers in the Comments field.");
                return false;
            }                                   
        }
        
        function lengthRestriction(elem, min, max){
           var x = elem.value;
           if(x.length >= min && x.length <= max){
                SaveRecord();
              
           }else{
                alert("Please enter between " +min+ " and " +max+ " characters in the Issue Number field");
               
           }
        }

Please help me. Thank you.

I am try to make a form that appears to be multi page. I am trying to use a button to hide one div and display another at the same time my script is

head
Code:

<script language=javascript type='text/javascript'> 
function hidediv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){//if they are 'see' divs 
if (document.getElementById) // DOM3 = IE5, NS6 
divs[i].style.visibility="hidden";// show/hide 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'hidden'; 
else // IE 4 
document.all.hideShow.divs[i].visibility = 'hidden'; 
} 
} 
}

function showdiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){ 
if (document.getElementById) 
divs[i].style.visibility="visible"; 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'visible'; 
else // IE 4 
document.all.hideShow.divs[i].visibility = 'visible'; 
} 
} 
} 
</script>

body
Code:

<form name="PublicOrderPage" action="save_client_information.php"  onsubmit="return validateForm()" method="post">


<div id="div1" style="width:600px; height: auto;background: yellow;">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Client Information</h3></legend>
</tr>
   <tr>
    <td style="padding-left:25px;"><b>Name:</b></td>
    <td><input type="text" name="client_name" id="client_name" value="<?php echo $_POST['client_name']; ?>" /></td>
	<td style="padding-left:25px;"><b>Home Phone:</b></td>
    <td><input type="text" name="client_home_phone" id="client_home_phone" value="<?php echo $_POST['client_home_phone']; ?>" /></td>
  </tr>
  </table>
  <br/>
 <table width="270" border="0"> 
	<tr>
		<td style="padding-left: 180px;"><b>Email:</b></td>
		<td><input type="text" name="client_email" id="client_email" value="<?php echo $_POST['client_email']; ?>" /></td>
	</tr>
</table>
<br/>
<table>
	<tr>
		<td style="padding-left:280px;"><input name="save_client_info" type="button" value="Next" onclick="hidediv('1');shwodiv('2');" >  </td>
	</tr>
</table>
</div>




<div id="div2" style="width:600px; height: auto;background: yellow; ">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Site Information</h3></legend>
</tr>
   <tr>
    <td style="padding-left:25px;"><b>Site Street:</b></td>
    <td><input type="text" name="site_street" id="site_street" value="<?php echo $_POST['site_street']; ?>" /></td>
	<td style="padding-left:25px;"><b>Site City:</b></td>
    <td><input type="text" name="site_city" id="site_city" value="<?php echo $_POST['site_city']; ?>" /></td>
  </tr>
  </table>
  <br/>
  
  <legend><h3>Inspection Type</h3></legend>
 <table width="270" border="0"> 
	 <table width="602" border="0">
    <tr>
      <td width="252"><input type="checkbox" name="cb_full_home" id="cb_full_home" <?php if ($_POST['cb_full_home']) echo 'checked="checked"'; ?> />
        Full Home</td>
      <td width="150"><input type="checkbox" name="cb_4_point" id="cb_4_point" <?php if ($_POST['cb_4_point']) echo 'checked="checked"'; ?> />
        4 Point</td>
    </tr>
    <tr>
      <td ><input type="checkbox" name="cb_condominium" id="cb_condominium" <?php if ($_POST['cb_condominium']) echo 'checked="checked"'; ?> />
        Condominium</td>
      <td ><input type="checkbox" name="cb_wind_mit" id="cb_wind_mit" <?php if ($_POST['cb_wind_mit']) echo 'checked="checked"'; ?> />
        Wind Mit</td>
    </tr>
    <tr>
      <td ><input type="checkbox" name="cb_roof_cert" id="cb_roof_cert" <?php if ($_POST['cb_roof_cert']) echo 'checked="checked"'; ?> />
        Roof Cert</td>
      <td ><input type="checkbox" name="cb_drywall" id="cb_drywall" <?php if ($_POST['cb_drywall']) echo 'checked="checked"'; ?> />
        Drywall</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cb_reinspect" id="cb_reinspect" <?php if ($_POST['cb_reinspect']) echo 'checked="checked"'; ?> />
        Re-Inspect</td>
      <td><input type="checkbox" name="cb_followup" id="cb_followup" <?php if ($_POST['cb_followup']) echo 'checked="checked"'; ?> />
        Follow-Up</td>

</table>
<img src="CaptchaSecurityImages.php" />
Security Code: 
<input id="security_code" name="security_code" type="text" />
<br />
<input name="save_client_info" type="submit" value="Save" />
</div>
</form>

When the next button is used I would Like to Hide Div1 And Display Div2 so that it looks as if it is a new page.

Any help would be greatly appreciated.

Ok, so basically what I've got is a button which when clicked, "opens" a section of the page. I also need the button to "jump" to this section of the page, because it's below the current content and won't be visible.

What I've got so far is ...

Javascript
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";

}
else {
ele.style.display = "block";
text.innerHTML = "hide";
location="#ordernow"

}
}
function moveWindow(){window.location.hash="ordernow"}
</script>



HTML
... (The rest of the form is up here)
<input name="Button" type="button" class="button" value="Order Now" onclick="toggle();moveWindow()" id="displayText"/>

...
(This is the start of the section that becomes visible, along with the anchor point which is highlighted in red.)
<div id="toggleText" style="display: none">
<a name="ordernow"></a>
<fieldset>
<legend>Order Confirmation</legend>
<div class="standardinput">
<label>Company:</label>
<input name="Company" type="text" class="textinput" id="Company" />
</div>




If I put two separate buttons, both functions will work. Basically I need them to be on the same function, not sure how to do that?

Thanks so much in advance =)

My javascript quits working when I am rendering the html? (It works perfectly fine if the page is opened from http address directly). I did some research and concluded that "JavaScript is executed on page load", so when I render my html, my JavaScript functions are not automatically called.

My question is how should I call the javascript functions manually?

verify.html:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<HEAD>
<Title>form</Title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="xupload.css">
</HEAD>
<BODY>

<form id="myform" enctype="multipart/form-data" action="/cgi-bin/upload.cgi" method="post" onSubmit="return StartUpload(this);">

<DIV id="div1">
<b><font id='x_max_files'>?</font> files <font id='x_max_size'>?</font> Mb total maximum</b>
<div id="upload_input"><input id="my_file_element" type="file" name="file_1" size=58></div>
<div id="files_list"></div>

<p align=center><input type="submit" value="Upload Files" class="myForm" id="submit_btn"></p>
</DIV>
</form>

<iframe src="javascript:false;" name="xupload" style="position:absolute;left:-9999px;"></iframe>
<script type="text/javascript">
//Specify your form ID
var x_form_id = 'myform';
var x_mode = 1;
var x_tmpl_name = '';
</script>
<script src="xupload.js" type="text/javascript"></script>

</BODY>
</HTML>

config file:
Code:

htmlverify = "../verify.html"

Perl:
Code:

if(my $verifypage = $g->{CV}{htmlverify}) {

# passing variables
 xxxxx
 .... 

# render the page:
  send_header();
  $p->pf($verifypage);
}

Hello,

Ok so the following code works.

Code:

function myFunction(myName)
{
alert("You are "+myName);
}

callFunction = "myFunction";
parameter = "Joe";

window[callFunction](parameter);

However this code doesn't work:

Code:

function myFunction(myName, myAge)
{
alert("You are "+myName+" and "+myAge+" years old.");
}

callFunction = "myFunction";
parameter = "Bill,15";
parameter = parameter.split(",");

window[callFunction](parameter);

The above code alerts: "You are Bill,15 and undefined years old."

Thanks for the help!

Hello,

very simple code block is below. Javascript functions that call web service methods are working when I called them between form tags. But they are not working at the beginning of the page.
I specified lines that are not working below.

Please help.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">

function GetMyName() {
WebService1.GetName(onNameSuccess, onNameFailure);
}
function onNameSuccess(result) {
return result;
}
function onNameFailure(result) {
alert("There is an error");
}

function GetMySurname() {
WebService1.GetSurname(onSurnameSuccess, onSurnameFailure);
}
function onSurnameSuccess(result) {
return result;
}
function onSurnameFailure(result) {
alert("There is an error");
}

//JAVASCRIPT FUNCTIONS ARE NOT WORKING HERE
//THESE TWO LINES ARE NOT WORKING

var name = GetMyName();
var surname = GetMySurname();

</script>

</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebService1.asmx" />
</Services>
</asp:ScriptManager>

//JAVASCRIPT FUNCTIONS ARE WORKING HERE

</form>
</body>
</html>

how to make a switch that goes on a button(sorry that i cant describe it better)

Hi Guys,

I am trying to make a change to my website so when someone clicks on the chinese flag image, for example, a function which put the clock forward a few hours.

This is what the code I have got at the moment:

<td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=en'; ?>"><img src="images/uk.gif" title="english" border=0></a></td>
<td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=zh'; ?>"><img src="images/ch.gif" title="chinese" onclick="chinatime()" border=0></a></td>
<td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=ja'; ?>"><img src="images/jap.gif" title="japanese" border=0></a></td>
<td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang=kk'; ?>"><img src="images/kaz.gif" title="kazakh" border=0></a></td>
<td><a href="<? echo $_SERVER[PHP_SELF].'?page='.$page.'&lang='.$most_preferred; ?>">Browser Set</a></td>
</tr>
<tr>
<td colspan="5">
<p class="meta"><span class="date"><script type="text/javascript">
var currentTime = new Date()
var minutes = currentTime.getMinutes()
var hours = currentTime.getHours()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()



function chinatime() {

hours = hours + 5 }

if (minutes < 10)
minutes = "0" + minutes



document.write(day + "/" + month + "/" + year + " " + hours +":"+minutes)
</script>


Many Thanks

Every time I try to use the notEmpty function with an onClick event, the validation stops working.

I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well.

Please help! I'm completely lost.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
      Date: 11/12/2014
      Filename: validator.html
      Supporting files: None
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validator</title>
<script type='text/javascript'>

function formValidator(){
	// Make quick references to our fields
	var firstname = document.getElementById('firstname');
	var lastname = document.getElementById('lastname');
	var gpa = document.getElementById('gpa');
	var phone = document.getElementById('phone');
	
	// Check each input in the order that it appears in the form!
	if(isAlphabet(firstname, "Please enter only letters for your first name")){
		if(isAlphabet(lastname, "Please enter only letters for your last name")){
			if(gpaValidator(gpa, "Please enter a valid G.P.A.")){
				if(phoneValidator(phone, "Please put a valid phone number")){
					return true;
				}
			}	
		}	
	}
	return false;
}

// Functions that check values in input fields!

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function gpaValidator(elem, helperMsg){
	var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function phoneValidator(elem, helperMsg){
	var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;

	}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
<fieldset>
<legend>Personal information:</legend><br />
First Name: <input type='text' id='firstname' /><br />
Last Name: <input type='text' id='lastname' /><br />
G.P.A.: <input type='text' id='gpa' /><br />
Phone Number: <input type='text' id='phone' /><br />
<input type='submit' value='Submit' />
</form>
</body>
</html>

Hello,
Is it possible to set an html element's (created through HTML DOM's createElement() method) 'onclick' attribute's value to a Javascript function which requires a parameter, passing a variable to it at the same time?

I have the following Javascript code:

Code:

var parentDiv = document.getElementById("subscribers");
var stubSpan = document.createElement("span");
stubSpan.id = "opentok_subscriber_" + stream.streamId;
stubSpan.onclick = showStreamInFullScreenMode(stream);
parentDiv.appendChild(stubSpan);

'stream' in the bolded line is a parameter variable of the function that the above code is in, and I'm trying to pass it to another function using an onclick event. Can this be done, or am I crazy to be even trying to do this?

Thanks in advance.

Hi,

I'm Trying Make A Simple Program To Flip A Coin (Using Math.random). Every-time I Open My Browser Running The Code, The Button, Appears,
But When Clicked, Nothing Happens... :confused: Can't Figure Out Why, If Someone Could Help Me Fix This, And Tell Me What I've Done Wrong, That Would Be Great, Thanks...

Code:
Code:

<DOCTYPE html>
<html>
<head>
</head>
<body>
<button type="button" onclick="myFunction()">Start</button><br>
<script>
function myFunction(){
for( i = 0; i < 20; i++){
if(Math.random() > 0.5){
document.write(\n + 'Heads')}
else{
document.write(\n + 'Tails')}}}
</script>
</body>
</html>

I'm tryingto make a button where, when you click the button, a variable will increase and refresh (reload the number displayed, but one number higher.
Here is what I have:

Code:

<html>
<head>
</head>
<body>
<script type="text/javascript">
x=1
document.write(x)
</script>
<input type="button" value="Up" onclick="document.write (++ x) ">
<input type="button" value="Down" onclick="document.write (-- x)">
<input type="button" value="Reload" onclick="history.go(0)">


</body>
</html>

The problem with this is: When you hit the "up" button, everything on the page dissapears and it just outputs "2". All the buttons and stuff dissapear?
There must be a better way to do it. And would I need to use a database.

Any help?

Hi

I've set up an html page that contains 3 buttons, which have a sprite rollover effect when hovered over. This is handled by css.

When one of the buttons is clicked - a value is passed to an input field. This is handled by Javascript.

Both of these functions work.

What I would like to do is add a second function when a button is clicked - so that the hover sprite remains selected.

Could anyone tell me how to do this please?

Here is the button code I have:

<button type="button" class="fantasy_button_blue_sprite" id="mcgyver" value="mcgyver" onclick="setHiddenControlValue('option1');">next</button>

Here is the input field that gets populated:

<input type="<?php echo $type;?>" id="fantasy_friend" name="fantasy_friend" value="<?php echo $fantasy_friend; ?>">

This is the javascript I'm using:

<!--
// set the hidden form field when a button is clicked
function setHiddenControlValue(selectedValue) {

document.getElementById("fantasy_friend").value = selectedValue;
parent.document.options_form.their_firstname.value=selectedValue;

}

And this is the sprite css:

.fantasy_button_green_sprite {
background: transparent url("/images/align_page/fantasy_button1.jpg") 0 1px no-repeat;
height:61px;
width:164px;
border:none;
text-indent:-99999px;
cursor: pointer;
margin-top:20px;
}

.fantasy_button_green_sprite:hover {
background: transparent url("/images/align_page/fantasy_button1.jpg") 0 -61px no-repeat;
}

Thanks!

Tom
-->

Hey,

I have a page at http://www.webdev70.cocc-webdev.org/contact.html where I have styling on the radio and check boxes.

I'm working on another project for class now where I want onclick or onchange functions in the radio buttons. When the radio buttons have the class="styled" on them, the function will not execute. When that's removed, they do.

Here is the javascript for the styling:

Code:

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";


document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled") {
				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) {
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}
window.onload = Custom.init;

The code is way over my head so I'm not sure where the problem is, or if it could be fixed.

This is what one of my radio buttons looks like:
<input type="radio" name="puppy" value="1" class="styled" onchange="puppycheck()">Black and White Puppy


If the style tag is removed it works perfectly. There is CSS too, but I don't think the problem is in there.

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.