JavaScript - Hinting Text In Field

I'm building a template editor and need some help changing some of the variables.

Part 1.

Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s

I need to be able to fill out two fields to change DEALERNAME and 00/00/00.
I found a way to do this but it required the output to be in a field. I need it the output to look no different than before.


Part 2.

I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3.

Head
Code:

<script language="javascript" type="text/javascript">
        function detail1a(){
        document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
        }
        function detail1b(){
        document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
        }
		function detail1c(){
        document.getElementById("detail1").innerHTML = "Lube Chassis";
        }
		function detail2a(){
        document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
        }
        function detail2b(){
        document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
        }
		function detail2c(){
        document.getElementById("detail2").innerHTML = "Lube Chassis";
        }
		function detail3a(){
        document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
        }
        function detail3b(){
        document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
        }
		function detail3c(){
        document.getElementById("detail3").innerHTML = "Lube Chassis";
        }
        </script>

Body
Code:

					
<span style="font-weight: bold;">Offer Details</span><br />
					<p style="margin: 8px 10px">
					Detail 1<br />
					<input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 2<br />
					<input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 3<br />
					<input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br />
					</p>

Output
Code:

										
<ul>
<li><span id="detail1">Detail 1</span></li>
<li><span id="detail2">Detail 2</span></li>
<li><span id="detail3">Detail 3</span></li>
</ul>

window.onload = initAll;

function initAll() {
document.getElementById("Message").onfocus = focusHandler;
document.getElementById("Message").onblur = blurHandler;

}

function focusHandler() {
document.getElementById("helpYou").innerHTML = "<span class=\"helpMessage\">Hey " + theName + "You should add Lasting Flash to your Facebook!</span>"
}

function blurHandler() {
var helpMessage = document.getElementById("helpYou").innerHTML = "";
}

function nameHandler(frm) {
var theName = frm.firstName.value;
}

Quote:
When I insert theName variable within the span the code completely does not work. I am accessing a text field when the user enters his name and then a small pop up later that includes the users name when another field is clicked on.

Ok, came up with a work around to my previous problem, however I now have a result that I cannot explain. Here is the code:

Code:

<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text"  onkeydown="if (event.keyCode == 13) {Calc.Input.value = eval(Calc.Input.value)}" NAME="Input" Size="26">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="  C  " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>

In order to get the 'Enter' button to function the same as pressing the '=' button, I added the keyCode event. Now my problem is that when you press the 'Enter' key, the result is displayed int the 'Input' text field briefly and then is cleared. How can I keep the result static in the text box?

Hi guys,I was thinking about the code to :
write something inside the text box and if the word entered is equal "hero" for example the box next to it will turn green means correct, otherwise it will turn red means wrong,and if nothing entered it stays white.
I really like to know how we code that in javascript using functions, without any CSS or anything else.
That means we have 2 objects a text box and a rectangle for feedback color.
Remark: there is no button at all, the validation will be each time you are typing.


A Bonus question : if someday we decide to change the color with pictures , is it possible to do that?
Thank you very much for your help, much appreciate it.

Dear All

I have done some coding in javascript . Where i am generating the textbox field and checkbox dynamicaly . That is as per condition if there is one record match as per condition then that many text field will be generated

So just to give a example , which is not dynamical

What i want to do is first the text field are disable and when the checkbox is checked then the text box should be enable

For 1 record the logic is working proper , but if there are more then 1 record then it does not work

Can you'll please help




<?php session_start();?>


<!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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="../locationpropertydesirecom/css/adcss1.css" type="text/css" media="screen" />


<script language="JavaScript">


function enable_text(status)
{

status=!status;

var e=document.getElementsByTagName("tr");

for(var i=0;i<e.length;i++)
{


e[i].disabled = status;


}

}

</script>

</head>

<body>

<table>

<tr>
<td><input type="text" id="aa" name="a" disabled="disabled"/></td>
<td><input type="text" id="aa" name="b" disabled="disabled" /></td>
<td><input type="checkbox" name="aa" value="check" onclick="enable_text(this.checked)" />
</tr>

<tr>
<td><input type="text" name="a" disabled="disabled"/></td>
<td><input type="text" name="b" disabled="disabled" /></td>
<td><input type="checkbox" name="aa" value="check" onclick="enable_text(this.checked)" />
</tr>



</table>


Thanks , regards

Jim

I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button.

What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made.

"Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..."

Can this be done on each line as a second onChange event?

Code:

<html>

<head>
<HEAD>

<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1

var arrItems3 = new Array();
var arrItemsGrp3 = new Array();

arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12

var arrItems4 = new Array();
var arrItemsGrp4 = new Array();

arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42

var arrItems5 = new Array();
var arrItemsGrp5 = new Array();

arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133

function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}

function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>

<BODY>

<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
&nbsp;</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif">&nbsp;Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 2: 
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 3: 
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 4: 
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2">&nbsp;&nbsp;&nbsp;&nbsp;Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2">&nbsp;&nbsp;&nbsp; Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
&nbsp;</td>
</tr>
</table>
</div>
</form>

</body>

</html>

Hi guys,

I have this drag and drop script:

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>
	<title>JavaScript Drag and Drop Tutorial</title>
	
</head>

<body>
<div style="position:absolute; left:0%; top:0%; ">
<style type="text/css">
.drag {
	position: absolute; 
}
	</style>
	
    <div style=" position:absolute; width:100%; height = 100%; left:0%; top: 0%" >
		
		<input id="1" class="drag" style="width:100px; height:100px; top: 0px" type="submit" value="Drag 'n' throw me">
		<pre id="debug"> </pre>
		
		
	</div>
		
	<script language="JavaScript" type="text/javascript">
<!--
function $(id){
	return document.getElementById(id);
}

var _startX = 0;			// mouse starting positions
var _startY = 0;
var _offsetX = 0;			// current element offset
var _offsetY = 0;
var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0;			// we temporarily increase the z-index during drag
var _debug = $('debug');	// makes life easier


InitDragDrop();

function InitDragDrop()
{
	document.onmousedown = OnMouseDown;
	document.onmouseup = OnMouseUp;
}

function OnMouseDown(e){	
	if (e == null) 
		e = window.event; 
		
	var target =  e.target != null ? e.target : e.srcElement;
		
	if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')	{
		_startX = e.clientX;
		_startY = e.clientY;
		
		_offsetX = ExtractNumber(target.style.left);
		_offsetY = ExtractNumber(target.style.top);	
		
		_oldZIndex = target.style.zIndex;
		target.style.zIndex = 10000;		
		_dragElement = target;	
		
		document.onmousemove = OnMouseMove;
		
		document.body.focus();
		
		document.onselectstart = function () { return false; };
		
		target.ondragstart = function() { return false; };
		
		return false;
	}
}

function ExtractNumber(value)
{
	var n = parseInt(value);
	
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
	if (e == null) 
		var e = window.event; 

	// this is the actual "drag code"
	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
	
}

function OnMouseUp(e)
{
	
	if (_dragElement != null)	{
		_dragElement.style.zIndex = _oldZIndex;

		// we're done with these events until the next OnMouseDown
		document.onmousemove = null;
		document.onselectstart = null;
		_dragElement.ondragstart = null;

		// this is how we know we're not dragging
		_dragElement = null;		
	}
}
	</script>
</div>		
	</body>

</html>

Is there a way to drag and drop text field?

I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field. Here is the code that for some reason isn't working for me.

Code:

<script type='text/javascript'>
       function resizeIt() 
        {
	document.getElementById('comment').style.height = 50px;
        };
</script>

<input type='text' id='comment' class='urlTextArea' name='url' value=''
 size='75' onfocus='resizeIt()'>

I have a table where when the cursor passes/hovers over a cell, the current cell, as well as the top cell in its column and the first cell in its row change backgroundColor. I have text fields outside the table which I want to populate with the contents of the cells affected by the mouseover event. So as the mouse moves over different cells, the contents of the text fields changes accordingly. I've got the backgroundColor to change, but when I try to assign the contents of the cells to the text fields, nothing happens. The change of backgroundColor even stops working.
This is the code I'm usign to populate the fields.
Code:

document.getElementById("tableID").textfieldID.value = Col1Cell[0].innerHTML;
document.getElementById("tableID").textfieldID.value = HeaderCell[n].innerHTML;
document.getElementById("tableID").textfieldID.value = this.innerHTML;

I'm traversing through the <th> and <td> tags to find the header cell HeaderCell[n] and first column cell Col1Cell[0] associated with the current cell. If I leave out these lines the backgroundColor changes, if I use them, nothing happens at all. Can't figure out why. Any suggestions?

[ICODE]
<html>
<head>
<title>ABS</title>
<?php
$j="dove";
?>

<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{

if (form.Name.value == "") {
alert( "Please enter your email address." );
form.Game.value="<?php echo $j;?>";
form.Name.focus();
return false ;
}

if (form.Game.value == "") {
alert( "Please enter your game address." );
form.Game.focus();
return false ;
}
if (document.form.Shame[0].value== "") {
alert( "Please enter your game address." );
form.Game.focus();
return false ;

}
return true ;

}


</script>
</head>
<body>

<form name="form" action="Store_it.php" method="post" onSubmit="return checkform(this);">


<input type="text" name="Name" />
<input type="text" name="Game" />
<input type="text" name="Shame[]" />
<input type="text" name="Shame[]" />
<input type="text" name="Shame[]" />
<input name="submit" type="submit">

</form>
</body>
</html>
[icode]

I need to use the array's shame and just check if the third one is not empty.

I have searched DOM and other stuff but i cannot get to the 2 element of the array shame. How do i check the value of the array.

Hey there everybody!

I'm learning javascript, and I am having trouble figuring out how to do this. Maybe you guys can help me out.

What I need is for my main page to have a text field. Above the text field there should be a set of images for bold, italics, underline, etc; when you click on them it inserts the html code <b></b> at the cursor point.

Next I want there to be a link, that when clicked will open a popup box with smileys. When you click on one of the smiley images it should insert the smiley code (example :smile: ) into the parent window text field. And would it be possible to make that work with pages of emotes? Or perhaps a second popup window?

I hope I explained that without it sounding confusing. I would really appreciate any help.

Here is my basic code, it does not include a popup code however.
Code:

<html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
    if (el.setSelectionRange){
        el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
    }
    else if (document.selection && document.selection.createRange) {
        el.focus();
        var range = document.selection.createRange();
        range.text = ins + range.text;
    }
}
</script>
<body>
<form>


<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<img src="http://i570.photobucket.com/albums/ss141/vwcorrado/Docs_smiley.jpg" onclick="insert(window.lstText,'hello')">

<input type="button" value="hi" onclick="insert(window.lstText,'hi')">
<br />
</form>
</body>
</html>

I have an existing form with radio buttons and a text input field:

<input type="radio" name="recurringEnd" value="yes"> End after <input type="text" name="numberOccurrences" size="1"> occurrences

<input type="radio" name="recurringEnd" value="date"> End on <input type="text" name="endDate" size="8">

My client now wants it setup so that if the text field is filled in, the radiobox is automatically selected.

Any help on this would be greatly appreciated as I am not a JS programmer.

Not 100% sure why or how to make this work.

I have 5 options in a select drop-down. Only two of them are to disable a text field. I have written it successfully to disable on one option. How would I add the second option? I have tried many different ways, and i know its something small that i am missing.

Below is the code that does not work but shows the 2 options that disable my text field.

Code:

<script type="text/javascript">
    function type_disable() {
		var qr_type = document.getElementById('qr_type');
    var qr_owner = document.getElementById('qr_owner');
    if(qr_type.value == 'bio' || 'rebrand')
        qr_owner.disabled = true
    else
        qr_owner.disabled = false
}
	
</script>

Code:

<tr>
	
	<td align="right"><span class="re">*</span>Type: </td>
	<td align="left"> &nbsp;<select id="qr_type"  name="qr_type" onChange="type_disable()">
	
	<option value="0">Select Type</option>
		 <option value="property">Property Code</option> 
		 <option value="ipw">IPW Code</option> 
		 <option value="bio">Biography Code</option> 
		 <option value="rebrand">Rebrand Code</option> 
		 <option value="property_rebrand">Property-rebrand Code</option> 
		 </select>
	 
	 </td>
	<td ></td>
	</tr>

	
	<tr>
	
	<td align="right"><span class="re">*</span>Owner: </td>
	<td align="left"> &nbsp;<input type="textbox" name="qr_owner" id="qr_owner" size="30" value=""/></td>
	<td ></td>
	</tr>

Thanks for any help!

Hey guys, I have a script which adds more text fields to a div in a form, but when it adds a new field the text in the others is cleared. :S

http://martynleeball.goodluckwith.us/

PHP 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=utf-8" />
<title>Draw Somthing - Word Guess</title>
<script type="text/javascript">
function add_field(obj, count) {
    //Count how many fields there is so the correct number can be added to the ID
    var form_name = document.getElementById(obj);
    var inputs = form_name.getElementsByTagName('input');
    var g = 1;
    //alert("Container: " + obj + ". Inputs: " + inputs.length);
    
    for ( var i = 0; i < inputs.length; i++) {
        var node = inputs[i];
        if (node.getAttribute('type') == 'text') {
            g++;
        }
    }
    
    //Field to add to the form
    if (!count) { 
        if (g < 9) {
            var text_field_html = "<input type=\"text\" id=\"input" + g + "\" name=\"input" + g + "\" /><input type=\"button\" value=\"X\" onClick=\"remove_field(\'text_field_container\', this)\" id=\"close" + g + "\"/>";
            form_name.innerHTML += text_field_html + "<br id=\"br_" + g + "\" />"; 
        }
    }
}
function remove_field(parent_id, r_obj) {
    var parent = document.getElementById(parent_id);
    var child = document.getElementById(r_obj.id);
    var num = r_obj.id.charAt(r_obj.id.length-1);
    var child2 = document.getElementById('input' + num);
    var child3 = document.getElementById("br_" + num);
    
    parent.removeChild(child); parent.removeChild(child2); parent.removeChild(child3);
}
</script>
</head>
<body>
<br />
<form id="add_words" action="test.php" method="post">
    <div id="text_field_container">
        <input type="text" id="input1" name="input1" /><input type="button" value="X" id="close1" onClick="remove_field('text_field_container', this)"/>
        <br id="br_1" />
    </div>
<input type="button" value="Add more..." onclick="add_field('text_field_container')" />
<input type="submit" value="Submit" onclick="" />
</form>
</body>
</html>