当field1在表单中更改时更改field2

Question

我有一个表格，它要求field1一个序列号。 然后在第二个字段中，将询问模型。 但是我可以找到带有序列号的型号。 它是序列号的第3和第4个数字。 因此，我不想询问型号，而是想直接放置模型而无需用户干预。

我希望在更新field1后直接更改field2，而不是在表单发布后。

所以首先，只有php才可能吗？ 我对jQuery，Ajax和JS的了解非常有限。

这是我现在的做法：

        <div class="col-xs-6">
            <div class="form-group">
            <label for="no_serie_produit" class="label col-xs-3">N° Série Produit</label>
                <div class="col-xs-10">
                    <input type="text"  name="no_serie_produit" id="no_serie_produit" placeholder="N° Série de ... (Obligatoire) ">
                </div>
            </div>
            <div class="form-group">
                <label for="model_produit" class="label col-xs-3">Modele Produit</label>
                    <div class="col-xs-10">
                        <input type="text"  name="model_produit" id="model_produit" placeholder="Modèle ... (Obligatoire)">
                    </div>
            </div>
        </div>

第二：如果我真的需要使用JS或jQuery之类的东西，您能推荐我最简单的方法吗？

编辑

范例：

如果我输入序列号：14020001，我想要在字段2中：TMSA4-NET LV

Answer 1

在#no_serie_produit上监听input事件，然后相应地设置#model_produit的值：

$('#no_serie_produit').on('input', function() {
    // don't do anything before 4 digits are inputted
    if (this.value.length < 4) return;

    // .slice()'s start is inclusive, end is exclusive
    var modelId = this.value.slice(3, 5);

    // do the Ajax call with $.ajax or the shorthand $.post/$.get methods
    $.get('path/to/getModelName.php', { modelId: modelId }, function(modelName) {
        // received the model name in the Ajax response, update the field
        $('#model_produit').val(modelName);
    });
});

这会将Ajax请求发送到path/to/getModelName.php （相应地更新路径/文件名），在此PHP文件中，您将可以通过$_GET['modelId']访问模型ID。 然后，您可以使用它查询数据库并echo显名称。 回显的值将作为Ajax调用的响应返回，在这种情况下，即$.get的回调的modelName参数。

一些阅读参考：

• input事件
• $.get
• String#slice