PHP HTML JQuery上选择更改填充PHP值的文本字段


PHP HTML JQuery on select change fill the text fields with php values

不知道如何命名这个问题,但我可以在这里解释我的情况,我有以下代码(这不是一个真正的数据,我必须创建这个向你们展示我想要什么)

<!DOCTYPE html>
<html>
<head>
    <title>Multiple form submit </title>

</head>
<body>
<form action="test.php" method="POST">
    First Name : <input type="text" name="fname" /><br />
    Last Name : <input type="text" name="lname" /><br />
    Gender : <input type="text" name="gender" /><hr />
    <select class="form-control input-sm" name="rta_address" id="rta_address">
        <option value="2">5, Footer street, AA2 2KK</option>
        <option value="23">44, Header street ZZ6 7FF</option>
        <option value="28">56, Oak street, DD5 5LL</option>
        <option value="33">5, (flat 5) Temple street, EE2 9HH</option>
    </select>
    <br />
    Postcode : <input type="text" name="postcode" /><br />
    House No : <input type="text" name="houseno" /><br />
    Street : <input type="text" name="street" /><br />
    <input type="submit" name="submit" value="Save" />
</form>
</body>
</html>
我想知道的是……如果用户除了下拉框中提供的地址之外没有其他地址,那么用户可以从下拉框中选择一个值,该值应该填充这些地址文本字段,否则用户可以手动输入

请记住,如果表单有大约40个项目,我这里只给你看了7或8个,所以提交表单我认为不是一个好主意,因为在这个时候表单还没有完全填好。

请注意,所有的地址都是通过循环从数据库来的。

我希望你明白我的意思

如果有必要解决这个问题,请随时提出任何问题。

你可以这样做:

 $('#rta_address').change(function(){
      var data = $(this).text().split(',');
      $('input[name="houseno"]').val($.trim(data[0])) ;
      $('input[name="street"]').val($.trim(data[1])) ;
      $('input[name="postcode"]').val($.trim(data[2])) ;  
 });

是的,你可以做一个空的选择,比如:

在jquery

 $('#rta_address').append($('<option>-- SELECT --</option>');
 $('#rta_address').text('-- SELECT --');

或在HTML中(将此添加到select中)

 <option selected="selected">-- SELECT --</option>   

您可以为每个选项使用数据属性如:

<option data-houseno="5" data-street="Footer Street" data-pincode="AA2 2KK">
   5, Footer street, AA2 2KK
</option>

在jquery中使用这个

获取数据
$(document).on('change','#rta_address',function(){
      $('input[name="postcode"]').val($(this).find('option:selected').data('postcode')) ;
      //AND SO ON
})

下面是一个例子- http://jsfiddle.net/3UA7X/2/

$('#rta_address').change(function(){
    var addressParts = $(this).val().split(',');
    $('input[name="postcode"]').val(addressParts[2]);
    $('input[name="houseno"]').val(addressParts[0]);
    $('input[name="street"]').val(addressParts[1]);
});

您可以使用jQuery库轻松实现。代码示例如下

$(document).on('change','#rta_address',function(e){
             if($.trim($(this).val())!=''){
                       var tmp= $(this).val().split(" ");
                       var house_no=tmp[0];
                       var street=tmp[1]+" "+tmp[2];
                       var post_code=tmp[3]+" "+tmp[4]; 
                       $('input[name="postcode"]').val(post_code) ;
                       $('input[name="houseno"]').val(house_no) ;
                       $('input[name="street"]').val(street) ;
             }
});