Hello and welcome to our community! Is this your first visit?
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
    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


    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 03:31 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    London, England
    Thanked 2,573 Times in 2,551 Posts
    Here you are:-

    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>
    <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
    replaceVal = n;
    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 08: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