CODEWITHSUNDEEP
javascriptjqueryhtml
Joe Bobby
Joe Bobby

Reputation: 2811

Populate Input based on another field?

I have 1 field that will be used for the users name, and another that will be used for the users URL

so if a user types john smith into the name input, i would like to automatically populate the URL input with john-smith since the url will end up being /personal-trainer-directory/john-smith

how do I do this automatically so the user doesnt have to fill out the url field?

Here is an example but there is some ExpressionEngine code, thats why there are curly brackets, but I figure this is more related to the code instead of the CMS so posting this here.

this is what I currently have:

<div class="formsection clearfix">
<label for="title">Name</label>
<span class="directions">The name you want to be displayed in your listing.</span>
<input type="text" name="title" id="title" value="{title}" size="50" maxlength="100">
</div>

<div class="formsection clearfix">
<label for="url_title">URL Title</label>
<span class="directions">Put a dash between first and last name. example: "john-smith"</span>
<input type="text" name="url_title" id="url_title" value="{url_title}" maxlength="75" size="50">
</div>

Upvotes: 2

Views: 1712

Answers (2)

peterm
peterm

Reputation: 92785

You can do something like this

$(function(){
    $("#title").blur(function(){
        $("#url_title").val('/personal-trainer-directory/' + $(this).val());
    });
});

jsFiddle

or if you want it to be populated as you type

$(function(){
    $("#title").keyup(function(){
        $("#url_title").val('/personal-trainer-directory/' + $(this).val());
    });

    }); jsFiddle

Upvotes: 1

j08691
j08691

Reputation: 207901

$("#title").change( function () {
    $('#url_title').val('/personal-trainer-directory/'+$(this).val().toLowerCase().replace(/ +/g, '-').trim());
});

jsFiddle example

Upvotes: 3

Related Questions