[英]How to fill three text fields by selecting from first drop down menu using MySql in PHP
I am working on a website , in which I have to put user details which have user name , address , phone and zip code.我在一个网站上工作,我必须在其中放置用户详细信息,其中包含用户名、地址、电话和邮政编码。
All the details are stored in MySql.所有的细节都存储在 MySql 中。
So, in a form , if I click on user name from Drop Down menu, then the three other text fields are automatically filled with the respective data.因此,在表单中,如果我从下拉菜单中单击用户名,那么其他三个文本字段将自动填充相应的数据。
Some thing like , If username is selected of id 13, so address and other fields may have something like this, [insert address into field, where name=id13]例如,如果用户名被选择为 id 13,那么地址和其他字段可能有这样的内容,[将地址插入字段,其中名称=id13]
something like that, I am not sure how that works.类似的东西,我不确定它是如何工作的。
Note : I want to auto-populate the other three fields knowing the first option.注意:我想在知道第一个选项的情况下自动填充其他三个字段。 Other three options are stored in Same database as the first option其他三个选项与第一个选项存储在同一数据库中
My Code so far我的代码到目前为止
<!-- START Presonal information -->
<fieldset class="col-md-6">
<legend>Shipper Data :</legend>
<!-- Name -->
<div class="form-group">
<label class="control-label" >SHIPPER<span class="required-field"></span></label>
<select type="text" name="Shippername" id="Shippername" class="form-control">
<option value="0">Select</option>
<?php
$sql=mysql_query("SELECT * FROM customer");
while($row=mysql_fetch_array($sql)){
echo '<option value="'.$row['Shippername'].'">'.$row['Shippername'].'</option>';
}
?>
</select>
</div>
<div class="row" >
<div class="col-sm-6 form-group">
<label class="control-label">ADDRESS<span class="required-field"></span></label>
<input type="text" name="Shipperaddress" id="Shipperaddress"class="form-control" autocomplete="off" required>
</div>
<div class="col-sm-3 form-group">
<label class="control-label">PHONE</label>
<input type="text" class="form-control" name="Shipperphone" id="Shipperphone" autocomplete="off" required>
</div>
<div class="col-sm-3 form-group">
<label class="control-label">PIN CODE</i></label>
<input type="text" name="Shippercc" id="Shippercc"class="form-control" maxlength="20" placeholder="" autocomplete="off" required>
</div>
</div>
Check jfiddle in comment在评论中检查 jfiddle
//JQuery //JQuery
$('#Shippername').change(function() {
selectedOption = $('option:selected', this);
$("#Shipperaddress").val( selectedOption.data('address') );
$("#Shipperphone").val( selectedOption.data('phone') );
$("#Shippercc").val( selectedOption.data('zipcode') );
});
//php //php
<select name="Shippername" id="Shippername">
<option value="0">Select</option>
<?php
$sql=mysql_query("SELECT * FROM customer");
while($row=mysql_fetch_array($sql)) {
?>
<option value="<?php echo $row['Shippername'];?>" data-address="<?php echo $row['Shipperaddress'] ?>" data-phone="<?php echo $row['Shipperphone'] ?>" data-zipcode="<?php echo $row['Shippercc'] ?>"><?php echo $row['Shippername'];?></option>
<?php
}
?>
</select>
<div class="row" >
<div class="col-sm-6 form-group">
<label class="control-label">ADDRESS<span class="required-field"></span></label>
<input type="text" name="Shipperaddress" id="Shipperaddress"class="form-control" autocomplete="off" required>
</div>
<div class="col-sm-3 form-group">
<label class="control-label">PHONE</label>
<input type="text" class="form-control" name="Shipperphone" id="Shipperphone" autocomplete="off" required>
</div>
<div class="col-sm-3 form-group">
<label class="control-label">PIN CODE</i></label>
<input type="text" name="Shippercc" id="Shippercc"class="form-control" maxlength="20" placeholder="" autocomplete="off" required>
</div>
</div>
In general, the method you might wish to adopt to achieve your goal might be something like the following semi-pseudo code.通常,您可能希望采用的方法来实现您的目标可能类似于以下半伪代码。 Please note that this is not tested so you will likely have to see what happens - the database calls are NOT going to work as they are so you WILL need to tweak that but hopefully it'll give you a good idea how to approach this:请注意,这没有经过测试,因此您可能需要看看会发生什么 - 数据库调用不会像它们那样工作,因此您需要对其进行调整,但希望它能让您对如何处理这个问题有一个好主意:
<?php
@session_start();
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/*
Process the ajax request here to return data from db
The returned data is then used by your ajax callback to
build / populate fields in your form.
And yes, this should use PDO or prepared statements to avoid
mailicious users trying to hijack your site ( sql injection )
*/
$id=$_POST['id'];
$sql='select * from `customer` where `id`="'.$id.'"';
$results=$db->query( $sql );
$json=json_encode( $results );
/* the json data is used by "cbgetdata(r)" */
echo $json;
exit();
}
/* Include your files and do whatever else needs done */
?>
<html>
<head>
<title>Fred Flintstone didn't know how to write code</title>
<script>
function getdata(e){
var http=new XMLHttpRequest();
var oSel=document.getElementById('betty');
var id=oSel.options[ oSel.options.selectedIndex ].value;
var headers={
'Accept': "text/html, application/xml, application/json, text/javascript, "+"*"+"/"+"*"+"; charset=utf-8",
'Content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
};
http.onreadystatechange=function(){
if( http.readyState==4 && http.status==200 ) cbgetdata.call( this, http.response );
};
http.open( 'POST', document.location.href, true );
for( header in headers ) http.setRequestHeader( header, headers[ header ] );
http.send( 'id='+id );
}
function cbgetdata( r ){
/* callback function that does the form field completion etc */
var json=JSON.parse( r );
alert( json );
}
</script>
</head>
<body>
<form name='bert' id='bert'>
<select id='betty' onchange='getdata(event)'>
<optgroup label='select a user'>
<option value=1>Fred
<option value=2>Wilma
<option value=3>Barney
</optgroup>
</select>
<input type='text' id='tf1' name='tf1' />
<input type='text' id='tf2' name='tf2' />
</form>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.