Dynamically add/display form text input field upon use of the previous one..

[Guest kilbad]

I wanted to know if someone could help me code the following::

 

Let's say I have a form with a text input field for "Medications."  I want it so that when someone loads the page there is a single input field for a single medication.  However, once someone begins to enter a medication in that field, I want an additional field to appear below it in case the person has another medication to enter, and so forth and so on.

 

Regardless, thank you all so much for your time and consideration!

 

Sincerely,

Brendan

 

 

[bennyboywonder]

Presumably something like this, though I havn't tested it, so correct me if I am wrong.

 

This in your HTML

<div>
      <input type='text' name='field1' onChange='changeField(event, 1)' />
</div>

 

and this inside your script tag

function changeField(evt, field) {
field++;
if (document.all) {
	evt.srcElement.parentNode.innerHTML += "<input type='text' name='field"+field+"' onChange='changeField(event, "+field+")' />";
} else {
	evt.target.parentNode.innerHTML += "<input type='text' name='field"+field+"' onChange='changeField(event, "+field+")' />";
}
}

[bennyboywonder]

no that's not right. Just realised that would add a field EACH TIME YOU TYPE a single char in the same text box. that's not good, hang on, lemme think

[bennyboywonder]

This should work, once again, not tested, so might not, but have a go... 

 

This in your HTML

<div>
      <input type='text' name='field1' onChange='changeField(event, 1)' />
</div>

 

and this inside your script tag

var onField = 0;
function changeField(evt, field) {
     if(onField < field) {
          field++;
          onField++;
          if (document.all) {
               evt.srcElement.parentNode.innerHTML += "<input type='text' name='field"+field+"' onChange='changeField(event, "+field+")' />";
          } else {
               evt.target.parentNode.innerHTML += "<input type='text' name='field"+field+"' onChange='changeField(event, "+field+")' />";
          }
     }
}

[bennyboywonder]

hmmm. well just tested this, and it sort of works~ish, but doesn't really solve your problem. Well I am knackered and going to bed now, but suggest maybe something similar to this, using the onKeyPress event or something

[fenway]

Why not an onblur?

[nloding]

Yeah, I'd use the same code only using onBlur instead of onChange.  However, the user would have to click away from the box for another to appear.

 

Why not just a button/text that says "More medications?" or "Add another medication" and it pops up another field (like Gmail with attachments)??  That'd be easier.  And more expected.  Personally, if I started typing, and another box appeared out of nowhere, I'd have no idea what was going on.  But if I manually chose to enter a new item, that'd be cool.  That can also be unlimited using the script posted above.

[Guest kilbad]

@bennyboywonder - Thank you so much for your responses!  I really appreciate your help.

 

After reading these posts, I now agree that an "Add another medication" button would probably be better.  Would someone mind helping me get started with the code for that?  After which I can tweak it on my own.

 

Regardless, thank you all for the help so far.  I cannot thank you enough!

 

Brendan

[nloding]

Honestly, not sure if this would work.  Unsure if the prevField variable will retain what I want it to ... in theory, you're assigning a number to the fields (ie, field1, field2 ...), and when addText is called, it increments the field number and prints the new <input> tag.

 

Someone else will have to refine this function ... it's a start ...

 

//HTML
<span onClick="addText(event);">Add more medications</span>

// Javascript
var prevField = 1;
function addText(evt) {
          prevField++;
          if (document.all) {
               evt.srcElement.parentNode.innerHTML += "<input type='text' name='field"+prevField+"' />";
          } else {
               evt.target.parentNode.innerHTML += "<input type='text' name='field"+field+"' />";
          }
     }
}

[Guest kilbad]

That code is not working for me.. any ideas?

[radalin]

How about something lke this:

 

//HTML
<span id="boxes"><input type="text" name="box_1" onFocus="addBox(1)" /></span>

//JS
var boxnum = 1 ;
addBox(num) {
if ( num == boxnum ){
	boxnum++;
	document.getElementById('boxes').innerHTML += '<br /><input type="text" onFocus="addBox(' + boxnum +');" name="box_' + boxnum + '" /> '
}
}

 

No need to button or something. When textbox get the focus another box will reapper each time the last box will be focused another box will be added. Hope that helps

[Guest kilbad]

I have:: and it doesn't seem to be working..

<head>
<script>
// Javascript
var boxnum = 1 ;
addBox(num) {
if ( num == boxnum ){
	boxnum++;
	document.getElementById('boxes').innerHTML += '<br /><input type="text" onFocus="addBox(' + boxnum +');" name="box_' + boxnum + '" /> '
}
}
</script>
</head>

<body>
<span id="boxes"><input type="text" name="box_1" onFocus="addBox(1)" /></span>
</body>

[radalin]

I forgot to add function before addbox.

 

Here is the tested and working code:

<html>
<head>
<script language="javascript">
var boxnum = 1 ;
function addBox(num) {
if (num==boxnum && boxnum < 20 ) {
	boxnum++;
	document.getElementById('boxes').innerHTML += "<br><input type=\"text\" name=\"box_" + boxnum + "\" onFocus=\"addBox(" + boxnum + ")\">";
}
}
</script>
</head>
<body>

<span id="boxes">
<input type="text" name="box_1" onfocus="addBox(1);">
</span>
</body>
</html>

 

Just a hint about these kind of boxes. Put an end to them. You may not want a bad intended user to add houndred perhaps thousands of boxes! I added a control. It will not create more then 19 boxes. You can change the count or even disable that control

[Guest kilbad]

Radalin, that is just what I am looking for!  thank you so much..

 

..a problem I am having though is that when I try to use the newly appeared box, it clears the text I typed in the previous ones.

[radalin]

The problem is while adding the text with innerHTML js does not take the modified files by user. It takes the file created on the loading of the page. Try adding a value="aaa" to the first box. While adding new boxes value returns to "aaa". But It works perfectly on IE but not at FF or Opera. I'm not sure how to solve this and it's 4 AM herei I got to sleep. I will look up later.

[radalin]

I have checked that for a while, this code works flawlessly in my FF. I don't know what is different by the way

 

function addRoomBox(count) {
if ( document.getElementById('room_count') >= 20 ) {
	return false ;
}
if ( document.getElementById('room_count').value == count ) {
	document.getElementById('room_count').value++ ;
	box = document.getElementById('newboxspan') ;
	box.innerHTML += '<br /><br /><input name="room_desc_' + count + '" type="text" id="room_desc_' + count + '" size="15" onFocus="addRoomBox(' + (count+1) + ');" /> / ';
}
}

 

and the html part is like:

 

<input type="hidden" name="room_count" id="room_count" value="1" />
<input name="room_desc_0" type="text" id="room_desc_0" size="15" onFocus="addRoomBox(1);" /> /
<span id="newboxspan"></span>

 

Hope this helps....