<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" );
});
}
})
这部分我必须留给你。你必须: 创建脚本(在我的示例中它被命名为 get-vin-data.php 但你可以随意命名,也可以用任何技术。 它应该将信息返回到您的用户端脚本-尽可能小而简单,例如json {model-group: "group 32", model-varient: "reddish"} . 将此数据附加到html中的正确输入-在js示例中是其代码部分 //@todo parse returning data and put it into form. . 祝你好运。
3条答案
按热度按时间nzk0hqpo1#
正如@robertfrenette所写的(如果我不理解您试图实现的目标),它需要在前端html之间使用多个通信脚本——通过ajax到php——从php到sql——以及所有返回到用户端html表单。试试这个方法
1调用ajax发送用户输入(vin编号)
html代码:
javascript(带jquery)代码:
您可以看到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.
.祝你好运。
pokxtpni2#
您需要对vinno的blur事件执行ajax请求。
正如@ali所说,它需要一个选择列表,这样用户就可以选择一个现有值。如果使用“select”,则可以将“blur”事件设置为“change”事件。我使用了jqueryajax调用,ajax请求需要在服务器端执行。
ijxebb2r3#
如果希望用户写入输入:
首先要做的是
select
全部vin
值并将其存储为html的输入data-list
标签。然后可以使用下面的代码(而不是现在使用的输入标记):
你应该
option
在循环中使用php或者你可以简单地使用html
select
标签。这样用户就不能写任何东西,只能选择其中一个选项。