View Full Version : Replace text on CURRENT page with text entered in form ONCLICK

09-23-2012, 03:10 PM
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.

Philip M
09-23-2012, 08:20 PM
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)