Question

我有一个带有多个文本框的表单。

第一个输入框是“商家名称”。还有几个包含各种信息的框，然后最后一个框是“URL”，我在其中输入我希望此业务在我的数据库中的URL。我没有手动输入这个url，而是希望它获取标题输入框的值，并用“ - ”替换空格并将其全部小写。我还想在网址前加上前缀。

因此，如果我输入“Bobs Hotel”，那么只要我输入URL框就会预先填写“business / bobs-hotel”。如果我输入“Mikes Hot Dogs”，它将是“business / mikes-hot-dogs”等，并准备好我提交表格。

编辑：我忘记了一个重要的细节： “商业”这个词实际上并没有被使用。要使用的单词来自下拉选择框。此框有3-4个选项名称（非值），“酒店”，“餐厅”等。因此，如果您从下拉列表中选择“酒店”，则URL将为“酒店/酒店 - 名称“

一个重要的事情是，虽然您从下拉列表中选择“酒店”，酒店的值是一个数字，如5或其他（因为它对应于数据库中的类别ID）

我该怎么做？

Answer 1

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

Answer 2

鉴于你的输入有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(" ", "-"));
});

现在，我们在ID为business的元素中获取所选的option-element，并使用.text()方法读取其内容。

<强> DEMO

Answer 3

快速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的第一个参数可以是正则表达式。这个会找到所有的空白区域。第二个参数是您要替换它的内容，在本例中为破折号。

使用来自一个表单字段的输入来填充另一个表单字段

3 个答案: