Используйте JavaScript, чтобы показать данные из SQL, как это типизировано в форме HTML

Question

Я работаю над страницей базы данных SQL для хранения данных, но я застрял при отображении данных из sql в том виде, в каком они напечатаны.

Вот как выглядит html-форма

Теперь на изображении выше поля «Группа моделей» и «Вариант модели» имеют виднеизменяемые.Теперь я хочу заполнить две формы, как только я наберу номер VIN.Введенный номер вин уже хранится в базе данных sql.Кто-нибудь может подсказать, какой код мне использовать или какие-то ссылочные документыGoogle Serach не сильно помог с этим.Если вам нужно, база данных sql выглядит так:

Answer 1

Вам необходимо выполнить ajax-запрос для события blur vinno.

$('body').on('.vin-no','blur', function(){
   $.ajax({
        type:'post',
        dataType:'json',
        url: 'server.php',
        data: {vinno: $(this).val()}
        success: function(response){
            $('.model-group').val(response.modelgroup);
            $('.model-variant').val(response.modelvariant);
        }
   });
})

Также, как сказал @ali, это должен быть список выбора, чтобы пользователь мог выбрать одно из существующих значений.Если вы используете «выбрать», вы можете сделать событие «размытие», чтобы «изменить» событие.Я использовал jquery ajax-вызовы, и ajax-запрос должен выполняться на стороне сервера.

Answer 2

Как писал @RobertFrenette (и если я пойму, чего вы пытаетесь достичь), потребуется несколько сценариев связи между передним html - через AJAX в PHP - от PHP до SQL - и всеми обратно в пользовательскую html-форму.Попробуйте этот подход

1 Вызовите ajax для отправки ввода пользователя (номер vin)

HTML-код:

<input type="text" id="vin-input">
<input type="text" id="model-group" disabled>
<input type="text" id="model-varient" disabled>


enter code here

Javascript (с jQuery) код:

//When only user change VIN number call this function.
$("#vin-input").keyup(function( event ){
  var input = $(this).val();

  //Regex validate to prevent AJAX request when not needed.
  //@todo change regex to your VIN schema.
  var properInput = new RegExp('^[0-9]{6,}$');
  if (properInput.test(input)) {

    //@todo remove this
    alert(input + " ok - send ajax");
    //Send AJAX to PHP script.
    //@todo change "get-vin.php" to your PHP script name.
    $.post( "get-vin-data.php", {"vin": input})
      .done( function( data ) {
        //Handle data returning from PHP script.
        //@todo parse returning data and put it into form.
        $( "#model-group" ).val( "model 45" );
        $( "#model-varient" ).val( "varient 45" );
      })
      .fail(function() {
        //Handle failure of AJAX call (here it will always fail).
        $( "#model-group" ).val( "model 45" );
        $( "#model-varient" ).val( "varient 45" );
      });
  }
})

Вы можете увидеть соответствие регулярных выражений, поскольку вам следует попытаться улучшить производительность и проверить номер vin для вызова AJAX только тогда, когда это необходимо.Вы должны изменить регулярное выражение в соответствии со своей схемой VIN.

Скрипт переднего конца

2 Получить данные в бэкэнде и вернуться к вашему сценарию

Эту часть я должен оставить вам.Вы должны:

• создать скрипт (в моем примере он называется get-vin-data.php, но вы можете назвать его по своему желанию и в любой технологии, которую вы используете.
• Он должен возвращать информациюк вашему пользовательскому скрипту - как можно меньше и проще, например, JSON {model-group: "group 32", model-varient: "reddish"}.
• Добавьте эти данные к правильным входным данным в HTML - в примере JS его кодовая часть //@todo parse returning data and put it into form..

Удачи.

Answer 3

Если вы хотите, чтобы пользователь записал ввод:

Первое, что нужно сделать, это select все vin значения и сохранить их в качестве ввода для тега HTML data-list.

Тогда вы можете использовать приведенный ниже код (вместо входного тега, который вы используете сейчас):

<input list="vinData" name="vinValue" required>
  <datalist id="vinData">
    <option value="89841321">
    <option value="546123">
    <option value="213134984">
  </datalist>

Вы должны сделать option, используя PHP с циклом

---

Или вы можете просто использовать HTML-тег select. Таким образом, пользователь ничего не может написать и должен выбрать один из вариантов.

<select>
  <option value="89841321">89841321</option>
  <option value="546123">546123</option>
  <option value="213134984">213134984</option>
</select>