Results 1 to 4 of 4

Thread: How to dynamically change text with an input's value (no refreshing or form submit)

  1. #1
    Join Date
    Feb 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to dynamically change text with an input's value (no refreshing or form submit)

    I have an input, and when a user types something in it, I'd like for a piece of text that already exists on the page to be updated with that input value. I'd like to have it change without page refreshing or form submission. For example, the text on the page is "I'm going to the store." When the user types "library", "store" is automatically changed to "library." I can't have the sentence in an HTML element; it is its own text node. I came across a JS Fiddle that almost does what I need, but it uses a span to insert the text - http://jsfiddle.net/cTq7K/ As mentioned, I'm not able to have the text in an HTML element, but I'm not sure how to get the string itself and manipulate it.
    JavaScript and JQuery solutions would be great. Thanks.

    HTML Code:
    I'm going to the store.
    <input type="text">

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Try this:
    Code:
    <!doctype html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    
    <title>&nbsp;</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    
    <body>
    <input id="input_32_1" onmouseover="this.value='';document.getElementById('test').innerHTML=''">I'm going to the
    <span id="test"></span>
    
    <script>
    $("#input_32_1").keyup(function() {
    document.getElementById('test').innerHTML=''; $("#test").text($("#input_32_1").val());
    });
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Feb 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your reply, molendijk. Interesting solution. Is there a way to not use the span at all? I have several instances of text that need to be manipulated in this way, and it would be preferable to not have the extra markup.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by sajtc View Post
    Is there a way to not use the span at all? I have several instances of text that need to be manipulated in this way, and it would be preferable to not have the extra markup.
    I doubt it: we need an ID, so we need a HTML-element (here: the span).

Similar Threads

  1. Replies: 2
    Last Post: 07-04-2010, 08:12 PM
  2. Replies: 3
    Last Post: 11-04-2008, 05:58 AM
  3. Replies: 1
    Last Post: 06-10-2008, 04:57 AM
  4. Input Form with 2 Submit Buttons
    By kuau in forum HTML
    Replies: 8
    Last Post: 04-05-2008, 02:15 AM
  5. Replies: 11
    Last Post: 10-24-2007, 11:35 PM

Bookmarks

Posting Permissions

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