Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Javascript to Add a Text Input field


  • Please log in to reply
27 replies to this topic

#1 ofseo

ofseo

    CC Lurker

  • Just Joined
  • Pip
  • 3 posts

Posted 26 March 2008 - 08: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
  • 0

#2 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 27 March 2008 - 09:20 AM


<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. :D

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.

if (fields != 10) {

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

#3 ofseo

ofseo

    CC Lurker

  • Just Joined
  • Pip
  • 3 posts

Posted 27 March 2008 - 05: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.

Edited by ofseo, 27 March 2008 - 06:14 PM.

  • 0

#4 ofseo

ofseo

    CC Lurker

  • Just Joined
  • Pip
  • 3 posts

Posted 27 March 2008 - 07: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?
  • 0

#5 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 28 March 2008 - 01: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>
<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>
<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.
  • 0

#6 Pcm

Pcm

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 11 April 2008 - 09:50 AM

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!!!
  • 0

#7 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 11 April 2008 - 10:25 AM

I believe that this should work for you.


<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. :D
  • 0

#8 Pcm

Pcm

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 11 April 2008 - 10:35 AM

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:


<%

	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>
				    |  
				   <a href="#" onclick="javascript:this.innerHTML = toggleDisplay('divRelationships');">Hide</a> | 
				   <a href="updatedisplayorder.asp?DISPLAY_ORDER_UPDATE_TYPE=DOCUMENT_RELATIONSHIP&<%=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>
         | 
			<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>

  • 0

#9 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 11 April 2008 - 11:07 AM

I think this should do what you wanted:


<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?
  • 1

#10 Pcm

Pcm

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 11 April 2008 - 11:13 AM

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!
  • 0

#11 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 11 April 2008 - 11:21 AM

JavaScript is a more client side langauge so it doesn't refresh the page it can change the page without reloading the page unlike PHP and ASP, which I know nothing about. :D

hope that code helps :)
  • 0

#12 Pcm

Pcm

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 11 April 2008 - 11:27 AM

It does a bit .....Thanks again for your help!!!
  • 0




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download