Jump to content

Javascript to Add a Text Input field

- - - - -
Started by ofseo, Mar 26 2008 08:46 PM

  • Please log in to reply
21 replies to this topic

#1
ofseo
Posted 26 March 2008 - 08:46 PM

ofseo

    Newbie

  • Members
  • Pip
  • 3 posts
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

#2
chili5
Posted 27 March 2008 - 09:20 AM

chili5

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 7,247 posts
  • Programming Language:Java, C#, PHP
  • Learning:C, C++, C#, PHP, Transact-SQL, Assembly, Scheme 
<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

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.

#3
ofseo
Posted 27 March 2008 - 05:18 PM

ofseo

    Newbie

  • Members
  • Pip
  • 3 posts
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.

#4
ofseo
Posted 27 March 2008 - 07:52 PM

ofseo

    Newbie

  • Members
  • Pip
  • 3 posts
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?

#5
chili5
Posted 28 March 2008 - 01:49 AM

chili5

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 7,247 posts
  • Programming Language:Java, C#, PHP
  • Learning:C, C++, C#, PHP, Transact-SQL, Assembly, Scheme
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.

#6
Pcm
Posted 11 April 2008 - 09:50 AM

Pcm

    Newbie

  • Members
  • Pip
  • 5 posts
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!!!

#7
chili5
Posted 11 April 2008 - 10:25 AM

chili5

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 7,247 posts
  • Programming Language:Java, C#, PHP
  • Learning:C, C++, C#, PHP, Transact-SQL, Assembly, Scheme
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

#8
Pcm
Posted 11 April 2008 - 10:35 AM

Pcm

    Newbie

  • Members
  • Pip
  • 5 posts
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>

#9
chili5
Posted 11 April 2008 - 11:07 AM

chili5

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 7,247 posts
  • Programming Language:Java, C#, PHP
  • Learning:C, C++, C#, PHP, Transact-SQL, Assembly, Scheme
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?

#10
Pcm
Posted 11 April 2008 - 11:13 AM

Pcm

    Newbie

  • Members
  • Pip
  • 5 posts
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!

#11
chili5
Posted 11 April 2008 - 11:21 AM

chili5

    Writes binary right handed and hex left handed

  • Members
  • PipPipPipPipPipPipPipPipPip
  • 7,247 posts
  • Programming Language:Java, C#, PHP
  • Learning:C, C++, C#, PHP, Transact-SQL, Assembly, Scheme
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 :)

#12
Pcm
Posted 11 April 2008 - 11:27 AM

Pcm

    Newbie

  • Members
  • Pip
  • 5 posts
It does a bit .....Thanks again for your help!!!
Back to JavaScript and CSS


2 user(s) are reading this topic

0 members, 2 guests, 0 anonymous users



  1. CODECALL Programming Forum
  2. → Web Development Forum
  3. → JavaScript and CSS
IPB skins by Skinbox