2015-09-30 2 views
-1

Я работаю над веб-сайтом, на котором я должен указать данные пользователя, которые имеют имя пользователя, адрес, телефон и почтовый индекс.Как заполнить три текстовых поля, выбрав из первого выпадающего меню с использованием MySql в PHP

Все данные хранятся в MySql.

Итак, в форме, если я нажму на имя пользователя из меню «Выпадающее меню», три других текстовых поля будут автоматически заполнены соответствующими данными.

Некоторые вещи, как, если имя пользователя выбран из идентификатора 13, так что адрес и другие поля могут иметь что-то вроде этого, [вставить адрес в поле, где имя = ID13]

что-то вроде этого, я не уверен, как это работает.

Примечание: я хочу автоматически заполнить остальные три поля, зная первый вариант. Другие три варианта хранятся в той же базе данных, как первый вариант

Мой код до сих пор

<!-- 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> 
+0

Мольба se уточните вашу проблему, вы ищете автоматическое заполнение полей или вы спрашиваете, как вставить данные в базу данных? – Epodax

+0

Я хочу автоматически заполнить остальные три поля, зная первый вариант. Другие три опции хранятся в той же базе данных, что и первый вариант. – Cybergod

+0

Для этого вам нужно использовать ajax. – Epodax

ответ

0

В общем, метод, который вы могли бы пожелать принять для достижения этой цели может быть что-то вроде следующего полу-псевдо код. Обратите внимание, что это не проверено, поэтому вам, вероятно, придется посмотреть, что произойдет - вызовы базы данных НЕ будут работать так, как они есть, поэтому вам нужно будет настроить их, но, надеюсь, это даст вам представление о том, как подойти к этому:

<?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> 
1

Проверить jfiddle в комментарии

// JQuery

$('#Shippername').change(function() { 
    selectedOption = $('option:selected', this); 
    $("#Shipperaddress").val(selectedOption.data('address')); 
    $("#Shipperphone").val(selectedOption.data('phone')); 
    $("#Shippercc").val(selectedOption.data('zipcode')); 
}); 

// 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> 
+0

https://jsfiddle.net/bineeshmvarghese/g6fL6y8d/ –