How to replace text in HTML based on user input

What I'd like to do is replace certain text on a web page based on a user input. For example, I'll have a form that says "enter your user ID", and based on what they enter, certain parts on the page will be replaced with their user ID.

Here is an example of what I mean:

http://www.getmoremomentum.com/jv/

Half way down the page this person has a form that says "brand tools". You fill in the form with your "affiliate ID". Then when you hit submit, all the instances of this text on the page...

https://aim.infusionsoft.com/go/instantlifestyle/XXXXX

...get replaced with:

https://aim.infusionsoft.com/go/instantlifestyle/affiliateid 

The xxxxx part gets replaced with the affiliate id you filled into the form.

I'm not very technical at all, so what's the simplest way to accomplish this?
designerguy55Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
CodedKConnect With a Mentor Commented:
Ok Designerguy55, I think this is it. templatesample.html
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
First add same class (say "affiliate-link") all your A tags you want the href value to be changed. Then use the jQuery code below.
$('#affiliate-id-input').bind('change', function(){
    $('.affiliate-link').attr('href', 'https://aim.infusionsoft.com/go/instantlifestyle/'+$(this).val());
});

Open in new window


Note: You'll need to change the #affiliate-id-input to the id of your input box
0
 
CodedKCommented:
Give a class or an id to your input field for example "lala".
Give the image - button a class, for example "lolo"
Every other object on the page you want to change should have the same class ie "lili"


    $('.lolo').click(function(){
        var user_input = $("lala").val(); // Store user input
        $('lili').text(user_input);
    });



0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
designerguy55Author Commented:
Hi guys. Thanks for the feedback. Can someone go a step further and quickly modify a simple HTML page for me to make this work? Like I said, I'm not very technical at all and don't know anything about jquery and how to actually put these lines of code to use.

I've attached a sample HTML template. And on this template here's what I have and what I need to happen...

There is a simple form that asks for the used id (which is just a line of text or numbers).

The user fills out the form and hits submit.

After they hit submit, the instances of this line of text...

http://www.yourwebsite.com/yourproduct/xxxxx 

get changed to...

http://www.yourwebsite.com/yourproduct/userid

(the xxxxx part gets changed to the user ID that person submitted into the form)

I would really appreciate it if someone can actually apply the code to my simple template and make this work.
templatesample.html
0
 
CodedKCommented:
Designerguy55 this is quite simple.

But you need a php file in the server to connect to the database and post back to the page the userid.
Something like this:


1) The button in your html page gets clicked ->
2) the default function of the button gets overridden by the JavaScript ->
3) An Ajax call is made to the php file to the server with a parameter, the string that the user filled in, -->
4) Php connects and query the database, then echoes the result (user id) -->
5) JavaScript displays the results as stated in the posts above.


If you want something random instead of a real user id then i will send you the html you posted back with the steps 1,2,5.
Is that what you want?  
0
 
CodedKCommented:
See this page for help too :
"AJAX Save"
http://www.zurb.com/playground/jquery-text-change-custom-event
0
 
designerguy55Author Commented:
If you want something random instead of a real user id then i will send you the html you posted back with the steps 1,2,5.
Is that what you want?

It doesn't have to be a real user ID, and it doesn't have to be verified or coming from any sort of database. People can input any text they want, hit submit, and that text get's inserted into the places on the page that currently say xxxxx.

And yes, if you could actually apply that to the HTML template I uploaded that would be great.
0
 
CodedKCommented:
Designerguy55, please see if this is what you want...
 templatesample.html
0
 
designerguy55Author Commented:
CodedK, this is sort of what I want but not completely.

You made a line of text get replaced with another pre-assigned line of text. I need the text to be replaced with something a user submits.

So a user comes to a site. There is a simple form with 1 field to fill out. They type in a line of text (any letters on numbers) and they hit submit. Then what ever they typed into the form replaces all "xxxxx" text areas that I have on a site.

I've attached an image to illustrate what I want.

Can you do this for me...

Create just a simple 1 line form with submit button. Then under the form just one line of text that says:

http://www.yourwebsite.com/yourproduct/xxxxx

And then make what ever gets submitted to the form replace the xxxxx part.

 Text Replace Sample image
0
 
designerguy55Author Commented:
Thanks for the help.
0
 
designerguy55Author Commented:
Thanks for all the help, this will work.
0
 
CodedKCommented:
Glad I've helped.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.