自动填充如何填充另一个表单输入

时间:2017-12-04 16:19:15

标签: javascript jquery ajax forms autocomplete

当自动填充填充第一种形式的值时,我需要知道如何在同一页面中以其他形式填充另一个输入。

就像每个例子一样,如果我在同一页面中有三个表单,并且我需要填写第一个表单中自动填充值中所获取的ID以填充其他两个,我该怎么办?

这里是示例代码:

//First form, in the license input the autocomplete fill the license, owner, brand and the id
<form method="post" name="first" id="first" class="form-horizontal">
    <div class="row form-group">
        <label class="col-sm-3 text-right">Car license number:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="license"  id="license"> //  autocomplete input
        </div>
    </div>
    <div class="row form-group">
        <label class="col-sm-3 text-right">Owner:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="owner"  id="owner">
        </div>
    </div>
    <div class="row form-group">
        <label class="col-sm-3 text-right">Brand:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="brand"  id="brand">
        </div>
    </div>
    <input type="hidden" id="idCar" name="idCar" />  // hidden input needed in the other forms
    <input type="submit" id="sCar" class="btn btn-info" value="Save Car" />
</form>

//Second form
<form method="post" name="second" id="second" class="form-horizontal">
    <div class="row form-group">
        <label class="col-sm-3 text-right">Requested work:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="reWork"  id="reWork">
        </div>
    </div>
    <div class="row form-group">
        <label class="col-sm-3 text-right">How many miles in this diagnosis have the car:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="miles"  id="miles">
        </div>
    </div>
    <div class="row form-group">
        <label class="col-sm-3 text-right">Type of oil used:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="oil"  id="oil">
        </div>
    </div>
    <input type="hidden" id="idCar" name="idCar" />  // Hidden input needed to fill previously in the first form
    <input type="submit" id="sDiag" class="btn btn-info" value="Save diagnosis" />
</form>

等等...页面有五个表格用于对每辆车进行诊断和修改。当用户点击提交按钮时,ajax表单被提交。我的问题是当自动填充填充第一种形式的值时,如何在其他表单中添加相同的ID。

1 个答案:

答案 0 :(得分:1)

这样的东西?

$("#first [name='license']").on("change keyup",function(){
            $("#first [name='idCar']").val("123").trigger("change"); // i just make this like some autocomplete example
});

$("#first [name='idCar']").on("change",function(){
        var val = $(this).val();
            $("[name='idCar']").not(this).val(val);
});

jsfiddle:https://jsfiddle.net/synz/cc958dp4/