根据另一个字段填充输入?

时间:2013-02-20 18:08:17

标签: javascript jquery html5

我有1个字段用于用户名,另一个字段用于用户URL

因此,如果用户在名称输入中键入john smith,我希望自动使用john-smith填充网址输入,因为网址最终会为/personal-trainer-directory/john-smith

如何自动执行此操作,以便用户不必填写网址字段?

这是一个例子,但有一些ExpressionEngine代码,这就是为什么有大括号,但我认为这与代码而不是CMS有关,所以在这里发布。

这就是我现在所拥有的:

<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>

2 个答案:

答案 0 :(得分:3)

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

<强> jsFiddle example

答案 1 :(得分:1)

你可以做这样的事情

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

jsFiddle

或者如果您希望在键入时填充

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

}); jsFiddle