Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts

    using divs to populate data from a text input

    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?

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    <div id="textBoxValues"></div>
    <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.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    <script type="text/javascript">
    function appendItem()
    {
    document.getElementById("populatedDiv").innerHtml += "<li>" + document.getElementById("populateFrom").value + "</li>";
    document.getElementById("populateFrom").value = "";
    }
    </script>
    <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...

    <script type="text/javascript">
    function appendItem()
    {
    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 = "";
    }
    </script>
    <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.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •