Javascript to Add a Text Input field

ofseo · #1 (**permalink**) 03-26-2008, 11:46 PM

Hey guys,
I'm looking for a way to have a button in my form that will add another text input when clicked, similar to the attachments form in Yahoo Mail. This way the user can have exactly as many input fields as they need.

Any ideas?
Thanks,
Bryan

chili5 · #2 (**permalink**) 03-27-2008, 12:20 PM

HTML Code:

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='file' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput()" name="add" value="Add input field" />
</form>
<div id="text">

</div>
</body>
</html>

This will add an extra file upload field everytime you click the button and put it on the next line. Until it gets to 10 upload fields, where it won't add anymore and then it will disable the add more buttons.

Quote:

document.getElementById('text').innerHTML += "<input type='file' value='' /><br />";

You can change the stuff in the double quotes after to change how your input field appears.

Quote:

if (fields != 10) {

change the 10 in this line to the number of fields you want to allow.

ofseo · #3 (**permalink**) 03-27-2008, 08:18 PM

Beautiful! I didn't realize it was so simple, I've been trying all this stuff that was way more complicated than that. Thank you!

edit:
Ok, the script itself worked beautifully. But I ran into a problem. I'm using POST method to process the form, and it looks like any forms that were added using the "add input" button aren't going through with the rest of the form data. Any ideas why and how to fix it? Thanks.

ofseo · #4 (**permalink**) 03-27-2008, 10:52 PM

It's odd, when I use the button to add a couple input fields, and then check the source code of the page, those added input fields aren't in the source. Do you think this might have to do with why the information in those fields isn't getting passed through POST?

chili5 · #5 (**permalink**) 03-28-2008, 04:49 AM

The file fields weren't getting passed through POST because originally we were adding the code after we closed the form.

When you use javascript to add fields, it doesn't update the source code.

In the head tag, you have to add name='' to the input tag. What I did to get the server to take the data with POST, was i named each field the same thing and created an array and then used a for each to loop through the array and print all the values of the array but you can change the code in the for each to whatever you want to do with the info.

HTML Code:

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='file' value='' name='field[]' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form" action="form.php" method="post">
<input type="button" onclick="addInput()" name="add" value="Add input field" />

<div id="text">

</div>

<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

PHP code:

HTML Code:

<html>
<head>
<title></title>
</head>
<body>
<?php
foreach($_POST['field'] as $value) {
echo "$value <br />"; // change this to what you want to do with the data
}
?>
</body>
</html>

Note: when you add a new field, it erases the text from all the other fields.

Pcm · #6 (**permalink**) 04-11-2008, 12:50 PM

Hi Guys!

I would like to do the similar thing to my form but instead of adding another field I would like to be able to have an onclick event on the add another button to refresh my existing form fields so that I can input the same information again.

So this is what I have for the form fields:

Title:
Name:
Copy:

So when the add another button is clicked, bit will store the previous entry but then refresh the form page with blank fields to be able to add another entry for the title, name, and copy?

I haven't a clue how to go about doing this... any help wold be greatly appreciated.

Thanks!!!

chili5 · #7 (**permalink**) 04-11-2008, 01:25 PM

I believe that this should work for you.

HTML Code:

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 1) {
document.getElementById('text').innerHTML += "<input type='button' onclick='reset()' value='Reset fields' />";
fields += 1;
document.form.add.disabled=true;
} else {
}
}

function reset() {
document.form.title.value = "";
document.form.name.value = "";
document.copy.name.value = "";
}
</script>
</head>
<body>
<form name="form" action="form.php" method="post">
Title: <input type="text" name="title" />
<br />Name: <input type="text" name="name" />
<br />Copy: <input type="text" name="copy" />
<br /><input type="button" onclick="addInput()" name="add" value="Add erase button" />


<div id="text">

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

Hopefully that's what you wanted.

Pcm · #8 (**permalink**) 04-11-2008, 01:35 PM

Hi There:

Thanks for your response: It's almost what I need,

But if entries are made one time to the form and the "Add erase button" is clicked, then I would like the first entries the user inputs to be save in the form field, but then the exact same form is displayed again below that and the fields are blank, so that the user can fill it in again with new inputs.

Does this make sense?

Here is an exact example of the form i'm working with so you may get a better idea of what it needs to do..... again Thanks for your help:

Code:

<%

	i1 = 1
	isDone = vbFalse
	set rsChildren = Server.CreateObject("ADODB.Recordset")
	y = getDocumentChildren(rsChildren, documentId, RELATIONSHIPTYPEID_SPOTLIGHT)

	while not isDone
		if rsChildren.eof then
			isDone = vbTrue
			documentRelationshipId = -1
			tabTitle = ""
			childDocumentId = -1
			featureTitle = ""
			featureDek = ""
			suffix = CStr(i1)
		else		
			documentRelationshipId = rsChildren("DOCUMENT_RELATIONSHIP_ID")
			tabTitle = rsChildren("TAG_TEXT")
			childDocumentId = rsChildren("CHILD_DOCUMENT_ID")
			featureTitle = rsChildren("DOCUMENT_TITLE")
			featureDek = rsChildren("DEK")
			suffix = CStr(i1)
		end if
%>
			
			
         <input type="hidden" name="<%=QUERYSTRING_PARMNAME_CHILDDOCUMENTID%><%=suffix%>" id="<%=QUERYSTRING_PARMNAME_CHILDDOCUMENTID%><%=suffix%>" value="<%=childDocumentId%>"/>
        <input type="hidden" name="documentRelationshipId<%=suffix%>" id="documentRelationshipId<%=suffix%>" value="<%=documentRelationshipId%>"/>
		<input type="hidden" name="<%=QUERYSTRING_PARMNAME_RELATIONSHIPTYPEID%><%=suffix%>" id="<%=QUERYSTRING_PARMNAME_RELATIONSHIPTYPEID%><%=suffix%>" value="<%=RELATIONSHIPTYPEID_SPOTLIGHT%>"/>
			  <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="1" WIDTH="50%">
           <TR>
            <TD CLASS="label_top_beige" WIDTH="116">Tab Title:</TD>
            <TD><INPUT TYPE="Text" NAME="tabTitle<%=suffix%>" id="tabTitle<%=suffix%>" size="94" value="<%=tabTitle%>"></TD>
          </TR>
		  <TR>
            <TD CLASS="label_top_beige" WIDTH="116">Copy Title:</TD>
            <TD><INPUT TYPE="Text" NAME="copyTitle<%=suffix%>" id="copyTitle<%=suffix%>" size="94" value="<%=featureTitle%>">
            </TD>
          </TR>
          <tr>
            <td class="label_top_beige" width="116" "<%=leftCellWidth%>">Introduction Copy:</td>
            <td><textarea name="introductionCopy<%=suffix%>" id="introductionCopy<%=suffix%>" cols="90"><%=featureDek%></textarea></td>
          </tr>
        </TABLE>
		 <br />
        <table>
  
          <tr>
            <td><table>
                <tr>
                  <td width="131" class="sectionhead"><a name="bmkRelationships" class="sectionlink" id="bmkRelationships">Search for winner </a> </td>
              <%
		if childDocumentId > 0 then
			editRelationshipsURL = "related_content.asp?" & QUERYSTRING_PARMNAME_DOCUMENT_ID & "=" & childDocumentId
			editRelationshipsURL = editRelationshipsURL & "&backToId=" & documentId
%>
				  <td align="right" class="sectionhead" style="font-size:xx-small" width="300">  
				  <a href="<%=editRelationshipsURL%>" >Edit</a>
				   &nbsp;|&nbsp; 
				   <a href="#" onclick="javascript:this.innerHTML = toggleDisplay('divRelationships');">Hide</a> | 
				   <a href="updatedisplayorder.asp?DISPLAY_ORDER_UPDATE_TYPE=DOCUMENT_RELATIONSHIP&amp;<%=QUERYSTRING_PARMNAME_DOCUMENT_ID%>=<%=Request(QUERYSTRING_PARMNAME_DOCUMENT_ID)%>">Update Display Order Numbers</a> </td>
                </tr>
                <tr>
                  <td colspan="2"><img src="images/beigedot.gif" border="0" width="100%" height="1" /> </td>
                </tr>
              </table>
              <div id="divRelationships" name="divRelationships" style="display:block">
   <%
		DOCUMENTRELATIONSHIPSINLUDE_DOCUMENTID = childDocumentId
		DOCUMENTRELATIONSHIPSINLUDE_INCLUDECHILDREN = -1
		DOCUMENTRELATIONSHIPSINLUDE_INCLUDEPARENTS = 0
%>
              <!-- #include file="includes/document_relationships.inc" -->
              </div></td>
          </tr>
        </table>
		       <%
			end if
			if not isDone then
				rsChildren.movenext
				i1 = i1 + 1
				if rsChildren.eof then
					isDone = vbTrue
				end if
			end if
		wend
		rsChildren.close
		set rsChildren = nothing
%>		
		<br />
		<table align="right">
          <tr>
            <td> <a class="sectionlink" href="#" onclick="javascript:validateAndSubmit();">Save Winner</a>
        &nbsp;|&nbsp;
			<input name="count" type="hidden" id="count" value="(val)+1;"/> 
			<input name="Add another" type="submit" value="Add another" id="Add" onclick="submitForm('add')"/>
            </td>
          </tr>
        </table>

chili5 · #9 (**permalink**) 04-11-2008, 02:07 PM

I think this should do what you wanted:

HTML Code:

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<br>Title: <input type='text' name='title' /><br />Name: <input type='text' name='name' /><br />Copy: 

<input type='text' name='copy' /><br>";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 data entries allowed.";
document.form.add.disabled=true;
}
}

field = 0;
function addErase() {
if (field != 1) {
document.getElementById('erase').innerHTML += "<input type='button' onclick='reset()' value='Reset fields' />";
field += 1;
} else {
}
}
</script>
</head>
<body>
<form name="form" action="form.php" method="post">
Title: <input type="text" name="title" />
<br />Name: <input type="text" name="name" />
<br />Copy: <input type="text" name="copy" />
<p>
<div id="text">

</div>
</p>
<p>
<input type="button" onclick="addInput(),addErase()" name="add" value="Add input field" />
</p>


<br />
<input type="submit" value="Submit" />
<div id="erase">

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

the code you posted meant almost nothing to me lol, what language is it?

Pcm · #10 (**permalink**) 04-11-2008, 02:13 PM

oooh sorry about that, it's ASP and VBscript.

Thanks for you help!! As you can tell I'm so new to this, but the code you just send obviously once you click submit it will refresh back to the page where the form is and save the entry before submission but then allow for another submission?

Thanks!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Javascript text replacement	Rogare	JavaScript and CSS	0	02-20-2008 11:21 AM
getting an array of numbers from a text field	strowa65	Java Help	3	12-18-2007 06:19 PM
How to create a text file on my host and save the input of my form there ?	kresh7	Visual Basic Programming	2	11-27-2007 03:00 PM
How to style fonts of a text in a simple page?	c0de	Tutorials, Classes and Code	3	09-15-2007 10:08 PM
Posting a link to a text field	holla22	PHP Forum	3	07-19-2007 06:16 PM

John	........	87.50000
dargueta	........	75.00000
Xav	........	50.00000
MeTh0Dz	........	20.00000
gaylo565	........	18.00000
Johnnyboy	........	3.00000

CodeCall

Contest Stats

Sponsors

Ads

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)