Solved

How to replace text in HTML based on user input

Posted on 2010-11-27
12
481 Views
Last Modified: 2012-06-27
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?
0
Comment
Question by:designerguy55
  • 6
  • 5
12 Comments
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
Comment Utility
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
 
LVL 16

Expert Comment

by:CodedK
Comment Utility
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
 

Author Comment

by:designerguy55
Comment Utility
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
 
LVL 16

Expert Comment

by:CodedK
Comment Utility
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
 
LVL 16

Expert Comment

by:CodedK
Comment Utility
See this page for help too :
"AJAX Save"
http://www.zurb.com/playground/jquery-text-change-custom-event
0
 

Author Comment

by:designerguy55
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 16

Expert Comment

by:CodedK
Comment Utility
Designerguy55, please see if this is what you want...
 templatesample.html
0
 

Author Comment

by:designerguy55
Comment Utility
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
 
LVL 16

Accepted Solution

by:
CodedK earned 500 total points
Comment Utility
Ok Designerguy55, I think this is it. templatesample.html
0
 

Author Closing Comment

by:designerguy55
Comment Utility
Thanks for the help.
0
 

Author Comment

by:designerguy55
Comment Utility
Thanks for all the help, this will work.
0
 
LVL 16

Expert Comment

by:CodedK
Comment Utility
Glad I've helped.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to dynamically set the form action using jQuery.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now