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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Replace text on CURRENT page with text entered in form ONCLICK

    I did a search here and couldn't find exactly what I was looking for.

    Basically, I have a page that I'd like to add a little feature too.

    At the top of the page, would be a form, with a single text field and a submit button.

    When the submit button is clicked, all instances of XXXX on the current page would be automatically replaced with whatever was entered in the text field.

    Let's say on a page, the form would say "enter name here" and a 'submit' button...

    Now just for the sake of simple example, I have several sentences on this current page.

    Hi my name is XXXX

    His name is XXXX

    Would you like to meet XXXX

    etc.

    I need XXXX replaced on the current page with the text entered in the form when the submit button is clicked.

    So if I had entered Adam in the form, the resulting sentences would dynamically change to,

    Hi my name is Adam

    His name is Adam

    Would you like to meet Adam

    To be more specific, I don't want to send people to a NEW page when the submit button is clicked, I want the existing XXXX on the current page to be replaced with the new text when the submit button is clicked.
    Last edited by addcode; 09-23-2012 at 02:31 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are:-

    Code:
    <html>
    <head>
    
    <body>
    
    Enter name here: <input type = "text" id = "username"><br>
    <input type = "button" value = "Change Names" onclick = "change()">
    
    <div id = "mydiv1">
    Hi my name is XXXX<br><br>
    
    His name is XXXX<br><br>
    
    Would you like to meet XXXX<br><br>
    </div>
    
    <script type = "text/javascript">
    
    var replaceVal = "XXXX";
    function change() {
    var n = document.getElementById("username").value;
    n = n.replace(/^\s+|\s+$/g,"");  // strip leading and trailing spaces
    n = n.replace(/\s{2,}/g," ");  // replace multiple spaces with one space
    n = n.replace(/[^a-z\s\-\']/gi,"");  // strip all but letters space hyphen apostrophe
    n = n.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});  // capitalise first letter
    document.getElementById("username").value = n;  // write back to the field
    var n1 = n.replace(/[^a-z]/gi,"");  // remove non-letters
    if (n1.length < 2) {  // a name must be at least 2 letters
    alert ("Please enter your name in the textbox");
    document.getElementById("username").value = "";  // clear the field
    return false;
    }
    
    var txt = document.getElementById("mydiv1").innerHTML;
    var match = new RegExp(replaceVal, 'ig');	 // setting regex with replaceVal and case insensitive along with global
    var output = txt.replace(match, n); // replacing variable string with variable replacement value
    document.getElementById("mydiv1").innerHTML=output;
    replaceVal = n;
    }
    
    </script>
    
    </body>
    </html>
    A submit button is used to submit a form to a server-side script. I don't think you are doing that.


    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)
    Last edited by Philip M; 09-23-2012 at 07:22 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

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