Форма автозаполнения данными из базы данных, если выбрана опция - codeigniter

Question

У меня есть таблица в базе данных, как показано ниже

id  |    service         |      rate         |      unit      |
 1        wifi                1,000                Mbps
 2     fiber optic            1,500                 Km

У меня также есть форма, подобная приведенной ниже

<form>
<select class="form-control" id="service">
   <option></option>
   <option value='1'>Wifi</option>
   <option value='2'>Fiber Optic</option>      
</select>


  <table>
     <tbody>
        <tr class="main">
            <td></td>
            <td>
                       <input type="text" name="service" class="form-control" placeholder="service">
            </td>
            <td>
                       <input type="text" name="rate" class="form-control" placeholder="Rate / Price">
            </td>
            <td>
                       <input type="text" name="unit" class="form-control" placeholder="Mbps/Km">
            </td>
           </tr>
         </tbody>
      </table>
    </form>

Я хочу добавить value в таблицу автоматически на основе select optionзначение.

Вы знаете, как его добавить или показать?

Спасибо

Answer 1

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

<select class="form-control" id="service" name="service">
   <option></option>
   <option value='1'>Wifi</option>
   <option value='2'>Fiber Optic</option>      

В вашем php-файле -

$selectedOption = $_REQUEST['service'];  //this will store the value of option 

$con=mysqli_connect("server","username","password","db_name");
// Check connection
if (mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM table_name where id = $selectedOption");

echo "<table border='1'>
<tr>
     <th>Firstname</th>
     <th>Lastname</th> 
</tr>";

while($row = mysqli_fetch_array($result))
{
    echo "<tr>"; 
    echo "<td><input value='" . $row['service'] . "'></td>";
    echo "<td><input value='" . $row['rate'] . "'></td>";
    echo "<td><input value='" . $row['unit'] . "'</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);  
?>

если ваша таблица динамическая, попробуйте получить текст выбранной опции <option value="wifi">wifi</option>

Answer 2

Я предлагаю вам использовать Jquery. Так что вы можете вызвать ajax-запрос к вашему контроллеру. В вашем контроллере вы получаете выбранную опцию и собираете данные из таблицы базы данных с моделью. Затем верните данные из контроллера в запрос ajax и снова заполните форму html. Вот пример. вызовите ajax-запрос к контроллеру со страницы html.

$( document ).ready(function() { 
    $('#service').change(function(){
       var selectedValue = $(this).val();
         $.ajax({
               method: "POST",
               url: "url-to-controller",
               dataType:"json",
               data: { 'service': selectedValue },
               success:function(data){
                   //get json data and populate html form

                }
            })
       });
  });

В вашем контроллере получите данные json, декодируйте их. Затем добавьте модель из БД. затем вернитесь как данные json.

   $service = $_POST['service'];
   $service_info = array();
   if(!empty($service)){
     //get data from model
      $service_info = $data_from_model;
   }
   header('Content-Type: application/json');//set header
   if(!empty($service_info)){       
        echo json_encode(array('result'=>1,'service_name' =>            
        $service_info['name'],'rate'=>$service_info['rates'], 
        'units'=>$service_info['units']));
   }else{
         echo json_encode(array('result'=>0));
    }

Answer 3

Используя базовый PHP для эмуляции поиска в базе данных и некоторый ванильный JavaScript, вы обычно делаете что-то вроде этого. Отправьте запрос Ajax в PHP-скрипт, который выполняет поиск в базе данных на основе значения / идентификатора, отправленного в запросе. Пусть PHP-скрипт отправит ответ, содержащий правильные данные, а затем использует обратный вызов ajax для заполнения полей формы.

<?php

    /* To emulate a database lookup */
    $dbtable=array(
        1   =>  (object)array('service' => 'wifi', 'rate' => 1000, 'unit' => 'mbps'),
        2   =>  (object)array('service' => 'fibre optic', 'rate' => 1500 , 'unit' => 'km')
    );


    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['id'] ) ){
        ob_clean();

        $obj=array_key_exists( $_POST['id'], $dbtable ) ? $dbtable[ $_POST['id'] ] : false;

        header('Content-Type: application/json');
        exit( $obj ? json_encode( $obj ) : $obj );
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Set Form field values based upon selected option</title>
        <script>

            const ajax=function(url,params,callback){
                let xhr=new XMLHttpRequest();
                xhr.onload=function(){
                    if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
                };
                xhr.open( 'POST', url, true );
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send( params );
            };

            document.addEventListener('DOMContentLoaded',()=>{
                document.querySelector('select[id="service"]').addEventListener('change',function(e){
                    ajax( location.href, 'id='+this.value, function(r){
                        if( !r ){
                            alert( 'Bad foo!' );
                            return;
                        }
                        let json=JSON.parse( r );
                        Object.keys( json ).map( k=>{
                            let field=document.querySelector('input[name="'+k+'"]');
                            if( field )field.value=json[k]
                        })

                    });
                });
            });
        </script>
    </head>
    <body>
        <select class='form-control' id='service'>
            <option selected disabled hidden>Please select service
            <option value=1>Wifi
            <option value=2>Fibre Optic
        </select>

        <table>
            <tr class='main'>
                <td></td>
                <td>
                    <input type='text' name='service' class='form-control' placeholder='service' />
                </td>
                <td>
                    <input type='text' name='rate' class='form-control' placeholder='Rate / Price' />
                </td>
                <td>
                    <input type='text' name='unit' class='form-control' placeholder='Mbps/Km' />
                </td>
            </tr>
        </table>
    </body>
</html>