使用來自一個表單域的輸入來填充另一個表單域

我有一個包含多個文本框的表單。使用來自一個表單域的輸入來填充另一個表單域

第一個輸入框是「商家名稱」。還有幾個包含各種信息的框，然後最後一個框是「URL」，我輸入我希望這個業務在我的數據庫中擁有的url。我不想手動輸入這個URL，而是希望它取得標題輸入框的值，並用「 - 」替換空格，並使其全部爲小寫。我也想要前綴的網址。

因此，如果我輸入「Bobs Hotel」，那麼只要我輸入完整URL地址框就會預裝「business/bobs-hotel」。如果我輸入「Mikes Hot Dogs」，那就是「business/mikes-hot-dogs」等，並準備好提交表格。

編輯：我忘了一個重要的細節：「商業」這個詞實際上不會被使用。要使用的單詞來自下拉選擇框。此框有3-4個選項名稱（不是值），「酒店」，「餐廳」等。因此，如果從下拉列表中選擇「酒店」，則URL將爲「酒店/酒店名稱」

一個重要的事情是，雖然你從下拉列表中值酒店是一個數字中選擇「酒店」，像5或什麼（因爲它對應於數據庫中的類ID）

我怎麼可以這樣做？

來源

2012-10-27 Jay

您所做的編輯是從原來的問題相當激烈。正確的程序是打開一個新的問題。 – richoffrails

對不起，我在這裏很新，我會確保下次再問一個新問題。 – Jay

鑑於您的輸入有ID name和url，你可以做這樣的事情用jQuery：

$("#name").on("focusout", function() { 
    var business = $("#business").val(); 
    $("#url").val(business + "/" + $(this).val().toLowerCase().replace(" ", "-")); 
});

Demo

更新：

更新的例子要爲業務帶來的價值從下拉列表爲好。查看更新的演示。

更新2：

要獲得所選擇的選項，而不是價值的內容，你可以這樣做，而不是：

$("#name").on("focusout", function() { 
    var business = $("option:selected", "#business").text(); 
    $("#url").val(business + "/" + $(this).val().toLowerCase().replace(" ", "-")); 
});

現在，我們得到元素中所選擇的選項元素編號爲business，並使用.text()方法讀取其內容。

DEMO

來源

2012-10-27 21:45:52

這很好，但是可以在選擇框中獲取名稱而不是值？在我的情況下值是一個數字，但我想要的類別文本。這裏是我使用的一個例子'' – Jay

@Jay好的，看我更新的答案。 –

這很好！如果在標題輸入後我碰巧改變了下拉菜單，那麼我需要返回到標題並刪除一個字母，然後重新添加它以供URL更新。當類別下拉列表也發生變化時，爲了讓網址刷新，我需要做些什麼？ – Jay

快速replace與正則表達式和toLowerCase將照顧這一點。

var business_name = $('#business-name').value; 
var dashified = business_name.trim().replace(/\s/g,'-').toLowerCase(); 
var url = 'business/' + dashified; 
$('#url-field').value(url);

replace的第一個參數可以是正則表達式。這一個會發現所有的空白。第二個參數是你想要替換的參數，在這種情況下是短劃線。

來源

2012-10-27 21:45:19 richoffrails

試試這個使用jQuery

Business Name : <input type="text" id="business" name="bussiness" /></br> 

<label class="url" ></label> 

$(function() { 

    $('#business').on('change', function() { 

     var val = $(this).val().replace(' ', '-').toLowerCase();; 
     $('.url').text(this.id + '/' + val) 
    }); 
});

Check DEMO

來源

2012-10-27 21:45:36

嗨，我有點複雜，請參閱我上面的編輯。我需要在下拉菜單中添加文本 – Jay

使用來自一個表單域的輸入來填充另一個表單域

回答

相關問題