2013-02-20 80 views
2

我有1場將被用於用戶名,另一個將用於用戶的URL基於另一個字段填充輸入?

因此,如果用戶鍵入john smith到輸入名稱,我想自動填充URL輸入用john-smith因爲url最終會變成/personal-trainer-directory/john-smith

我該如何自動執行此操作,以便用戶不必填寫url字段?

下面是一個例子,但有一些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> 

回答

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

jsFiddle example

+0

謝謝!這使我最接近!我只是想讓名字顯示出來,而這個部分是正確的:'$('#url_title')。val(''+ $(this).val()。toLowerCase()。replace(/ +/g,' - ')。trim());'? – 2013-02-21 17:17:03

+0

是的,你可以擺脫'''+'部分。 – j08691 2013-02-21 17:18:07

+0

謝謝!效果很好 – 2013-02-21 20:52:57

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

+0

@RuneFS這是爲什麼?見http://jsfiddle.net/pmatseykanets/6Tzvq/ – peterm 2013-02-20 18:27:50

+0

因爲我需要眼鏡:D對不起,誤讀了代碼 – 2013-02-20 18:57:06

相關問題