Solved

How to replace text in HTML based on user input

Posted on 2010-11-27
12
485 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
ID: 34224304
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
ID: 34224884
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
ID: 34226997
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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 16

Expert Comment

by:CodedK
ID: 34229087
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
ID: 34229166
See this page for help too :
"AJAX Save"
http://www.zurb.com/playground/jquery-text-change-custom-event
0
 

Author Comment

by:designerguy55
ID: 34233645
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
 
LVL 16

Expert Comment

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

Author Comment

by:designerguy55
ID: 34252590
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
ID: 34253318
Ok Designerguy55, I think this is it. templatesample.html
0
 

Author Closing Comment

by:designerguy55
ID: 34264050
Thanks for the help.
0
 

Author Comment

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

Expert Comment

by:CodedK
ID: 34264651
Glad I've helped.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP.NET MVC 5- How can I post textarea value using @Html.ActionLink? 8 53
Accordion won't close correctly 5 12
CSS for <center> 14 31
title attribute 5 22
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

713 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