CODEWITHSUNDEEP
javascriptjqueryajaxformsautocomplete
Andrés
Andrés

Reputation: 85

How autocomplete fill another form input

I need to know how to fill another input in other forms in the same page when the autocomplete fill the values in the first form.

Like per example, if I have three form in the same page and I need to fill the id adquired in the autocomplete value in the first form to populate in the other two, how can I do it?

Here the example code:

//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>

And so on... the page have five form for make the diagnosis and revision of each car.. when the user hit the submit button with ajax the form is submited. My problem is how the add the same id in the others form when the autocomplete fill the values in the first form.

Upvotes: 0

Views: 134

Answers (1)

synz
synz

Reputation: 573

Something like this?

$("#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/

Upvotes: 1

Related Questions