View Full Version : using divs to populate data from a text input
01-20-2008, 07:52 PM
I'd like to have a text input and populate what is entered into a div (perhaps?) on the same page...just be nice if the page didn't have to "submit" or refresh. Possible?
01-20-2008, 08:37 PM
<input type="text" onkeypress="if(event.keyCode==13)document.getElementById('textBoxValues').innerHtml += this.value; this.value = '';" />
This code creates a text box and a div, every time you press enter in the text box, the text of the box will be appended to the div. If you want a new line for each of them, add +"<br />" after this.value or if you want a list do "<li />"+ before this.value. No postbacks required. You could also use the runat="server" option on the div so that in the event of a postback you could extract the value but that would be more easily accomplished with a textArea instead of a div. Should probably also add some css to the div so that your populated values don't move your text box or clip off the values. something like style="width:500px; height:500px; overflow:auto; border-style:inset; border-width:1px;" would make it look nice.
01-20-2008, 09:17 PM
I am totally lost with this code. Is there a way to have a button that you can click?
So...there would be one text field with a button entitled create. When something is entered and you press create, a text box would appear below with that something that was entered.
Does this make sense? Sorry
01-21-2008, 05:59 AM
document.getElementById("populatedDiv").innerHtml += "<li>" + document.getElementById("populateFrom").value + "</li>";
document.getElementById("populateFrom").value = "";
<div id="populatedDiv" style="position:absolute; top:0px; left:0px; width:500px; height:500px;"></div>
<input type="text" style="position:absolute; top:510px; left:0px; width:400px;" id="populateFrom" />
<input type="button" onclick="appendItem();" style="position:absolute; top:510px; left:410px; width:90px;" value="Create" />
The script is simply a shortcut to appending your text to the div. The div listed is the container for your entered values, the text box is really a necessity to get the users input otherwise you have to do some tricky work with the onkeypress event to capture a string of characters, if you're asking about getting the values editable again then you're talking about much more complex code. Instead of the enter key event, I've added the button entitled "Create" as you specified. If you want the div below the text box (or a different size, or to scroll, or to have a different background, or whatever), just mess with the style fields. Also, after adding that list item (li) with the value from the text box, the text box is cleared, if you don't want that, just take out the second line of the function. Something that might be a little better suited to what I think you're trying to do...
var sel = document.getElementById("theList");
var newOpt = document.createElement("option");
newOpt.value = document.getElementById("theValue").value;
sel.options[sel.options.length] = newOpt;
document.getElementById("theValue").value = "";
<input type="text" id="theValue" style="position:absolute; top:5px; left:0px; width:200px;" />
<input type="button" onclick="appendItem();" value="Create" />
<select id="theList" style="position:absolute; top:40px; left:0px; width:300px;"></select>
This code creates a text box and a button marked create, when the button is clicked, it adds what was typed to a drop down list below the text box. You can use the drop down list's onchange or onpropertychange events to get the values programatically, as not having any other purpose aside from to display the different things the user typed is kind of pointless.
Powered by vBulletin® Version 4.2.2 Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.