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

Question

I have a form, which it ask for the field1 a serial number. Then in the 2nd field, it will ask the model. But I can find the model with the serial number. Its the 3 & 4th numbers of the serial. So instead of asking the model number, I wanted to put directly the model without the user intervention.

I want the field2 directly changed when the field1 has been updated, not after the post of the form.

So first, is it possible only with php ? My knowledge in jQuery, Ajax and JS are very limited.

Here's how I'm doing now :

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

2nd : If I really need to use something like JS or jQuery, can you suggest me the most easy one to learn.

EDIT

Example :

If I put in Serial n° : 14020001, I want in the field2 : TMSA4-NET LV

Answer 1

Listen for the input event on #no_serie_produit, then set the value of #model_produit accordingly:

$('#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);
    });
});

This will send an Ajax request to path/to/getModelName.php (update the path/filename accordingly), in this PHP file you will be able to access the model ID through $_GET['modelId']. Then you can query the database with it and echo the name. The echoed value will be returned as the response of the Ajax call, that is, the $.get's callback's modelName parameter in this case.

Some reading reference:

• input event
• $.get
• String#slice