php—使用javascript显示以html形式键入的sql数据

798qvoo8  于 2021-06-20  发布在  Mysql
关注(0)|答案(3)|浏览(424)

我正在使用sql数据库页来存储数据,但我一直在按类型显示sql中的数据。
下面是html表单的样子

现在在上图中,“model group”和“model varient”字段是只读的。现在我想在输入车辆识别号后立即填写这两张表格。键入的vin编号已存储在sql数据库中。有人能建议我应该使用什么代码或一些参考文档吗?谷歌serach在这方面帮不了什么忙。如果需要,sql数据库如下所示:

nzk0hqpo

nzk0hqpo1#

正如@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" );
      });
  }
})

您可以看到regex匹配,因为您应该尝试提高性能并验证vin号,以便仅在需要时调用ajax。您应该更改regex以适应您的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. .
祝你好运。

pokxtpni

pokxtpni2#

您需要对vinno的blur事件执行ajax请求。

$('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所说,它需要一个选择列表,这样用户就可以选择一个现有值。如果使用“select”,则可以将“blur”事件设置为“change”事件。我使用了jqueryajax调用,ajax请求需要在服务器端执行。

ijxebb2r

ijxebb2r3#

如果希望用户写入输入:
首先要做的是 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>

相关问题