7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Replace text on CURRENT page with text entered in form ONCLICK

by Adam Roy
5 replies
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.

Notice there will be MULTIPLE instances of XXXX on the current page.
#current #entered #form #onclick #page #replace #text
  • Profile picture of the author dwoods
    Hi Adam,

    Say hello to jQuery and JavaScript.
    Here's a little example that does exactly what you're looking for:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Little jQuery demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function update_fields(){
    //grab the value of #form_name id from the form
    form_name = $('#form_name').val();

    //update all instances of .name class in the .content class 
    $('.content .name').html(form_name);
}
</script>

</head>
<body>

<form method="post" action="index.html" onsubmit="return false">
Name: <input type="text" name="form_name" id="form_name" value="" /><br />

<input type="button" onclick="update_fields();" value="click me" />
</form>

<p class="content">
    Hi my name is <span class="name" />XXX</span>
    <br /><br />
    His name is <span class="name" />XXX</span>
    <br /><br />
    Would you like to meet <span class="name" />XXX</span>
</p>

</body>
</html>
    {{ DiscussionBoard.errors[7035291].message }}
  • Profile picture of the author Adam Roy
    Thanks.

    Doesn't seem to be working, what if the page you're currently viewing isn't .html? Is that the problem?

    I'm trying to do this in a Wordpress page, and it appears that everything should work just fine, except for the action="index.html" since that's not the actual page.
    Signature
    {{ DiscussionBoard.errors[7036305].message }}
  • Profile picture of the author dwoods
    I tested it on my local computer before posting it -- it works.

    Yes should be .html, or .php (unless your htaccess has add/types to treat other file types as .html).

    the action="index.html" doesn't matter because the form is never actually submitted for 2 reasons:

    1.) because the onsubmit action of the form is a return false
    2.) because there is no submit button, only a button element that fires a javascript when clicked.

    If you'd like a little help integrating this with your wordpress page l would be more than happy to help you out, just contact me on skype at darrenwoods80

    Regards,
    {{ DiscussionBoard.errors[7036486].message }}
  • Profile picture of the author Adam Roy
    skype request sent

    If you copy/paste the above code into a wordpress page, it's likely not going to work.
    Signature
    {{ DiscussionBoard.errors[7036634].message }}
  • Profile picture of the author mesmsgs
    <input type="text" value="blablabla" name="input" onclick="body.replace("XXXX",input.value);/>
    <input type="button" onclick="body.replace("XXXX",input.value);/>

    body equal getelementbyid('YourId').
    input equal getelementbyid('IdOfYourInput').
    {{ DiscussionBoard.errors[7075760].message }}

Trending Topics