使用来自一个表单域的输入来填写另一个答案

【问题标题】：Using the input from one form field to fill in another使用来自一个表单域的输入来填写另一个
【发布时间】：2012-10-27 21:39:52
【问题描述】：

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

第一个输入框是“企业名称”。还有几个包含各种信息的框，最后一个框是“URL”，我在其中输入我希望该企业在我的数据库中拥有的 url。我希望它采用标题输入框的值，而不是手动输入此 url，并将空格替换为“-”并将其全部设为小写。我也想给网址加前缀。

因此，如果我输入“Bobs Hotel”，那么一旦我输入完 URL 框，就会预填“business/bobs-hotel”。如果我输入“Mikes Hot Dogs”，它将是“business/mikes-hot-dogs”等，然后我就可以提交表单了。

编辑：我忘记了一个重要的细节： “商业”这个词实际上不会被使用。要使用的词来自下拉选择框。此框有 3-4 个选项名称（不是值）、“hotel”、“Restaurant”等。因此，如果您从下拉列表中选择“Hotel”，则 URL 将为“hotel/hotel-名字”

重要的一点是，尽管您从下拉列表中选择“酒店”，但酒店的值是一个数字，例如 5 或其他任何值（因为它对应于数据库中的类别 ID）

我该怎么做？

【问题讨论】：

您所做的编辑与原始问题相比非常激烈。正确的程序是打开一个新问题。
对不起，Rich，我是新来的，下次我一定会问一个新问题。

标签： php jquery forms

【解决方案1】：

鉴于你的输入有 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 的元素中获取选定的选项元素，并使用 .text() 方法读取其内容。

DEMO

【讨论】：

效果很好，但是是否可以在选择框中获取名称而不是值？在我的情况下，该值是一个数字，但我想要类别文本。这是我正在使用的示例<option value="'.$row['cid'].'">'.$row['cat_name'].'</option>
效果很好！如果我在输入标题后碰巧更改了下拉菜单，那么我需要返回标题并删除一个字母并重新添加它以更新 url。当类别下拉列表也更改时，我需要做什么才能刷新 url？
@Jay 我猜你也可以为下拉列表添加一个焦点监听器。将第一行更改为$("#name, #business").on("focusout", function () {。

【解决方案2】：

用 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

【讨论】：

嗨，我的事情有点复杂，请看我上面的编辑。我需要在 url 前面加上下拉列表中的文本

【解决方案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的第一个参数可以是正则表达式。这个会找到所有的空白。第二个参数是您要替换的参数，在本例中为破折号。

【讨论】：