javascript - 将 AJAX 响应显示到输入字段中

Question

<table class="table table-bordered responsive">
          <thead>
            <tr>
              <th>Session</th>
              <th>Bus Route</th>
              <th>Charges</th>
              <th>Action</th>
            </tr>
          </thead>
          <?php foreach ($fetchbus as $busfee){?>
          <tbody>
            <form action="#" method="post">
              <tr>
                <td> <?php echo $busfee->Session; ?> </td>
                <td> <?php echo $busfee->Route; ?> </td>
                <td> <?php echo $busfee->Charges; ?> </td>
                <td><a href="#" id="<?php echo $row->Route_Id;?>" onClick="getbusdetailsforedit(this.id)" class="">Edit</a></td>
              </tr>
              <script type="text/javascript">
                function getbusdetailsforedit(id)
                {
                  ajaxRequest = new XMLHttpRequest();
                  ajaxRequest.onreadystatechange = function()
                  {
                    if(ajaxRequest.readyState == 4)
                    {
                      var ajaxDisplay = document.getElementById('getbusdetailsforeditview');
                      ajaxDisplay.innerHTML = ajaxRequest.responseText;    
                    }
                  }
                  ajaxRequest.open("GET", "<?php echo base_url();?>account/SetFee/getbusdetailsforedit/" +id, true);
                  ajaxRequest.send(); 

                } 
              </script> 
            </form>
          </tbody>
          <?php } ?>
        </table> 

当我点击编辑按钮时，我在一个 id 中完美地得到了所有 ajax 响应。但我有三个输入字段:

<div class="widgetcontent"> 
      <?php echo form_open('account/SetFee/addbusfeedetails/', array('class'=>'stdform stdform2')); ?>
      <div> 
        <div id="getbusdetailsforeditview" class="">

         <p>
           <label>Session</label>
           <span class="field">
            <select name="session" id="session" class="form-control">
              <option value="">Select Session</option>
              <?php for($i=2000;$i<2020;$i++){
               ?> 
               <option value="<?php echo $i."-"; echo $i+1; ?>"><?php echo $i.'-';echo $i+1;?></option>
               <?php } ?>
             </select>
           </span>
         </p>


         <p>
          <label>Route</label>
          <span class="field">  
            <input name="route" id="route" placeholder="Enter Route" class="form-control">
          </span>
        </p>



        <p>
         <label>Charges</label>
         <span class="field">
           <input type="number" id="charges" name="charges" placeholder="Enter Route Charges" class="form-control">
         </span> </p>
       </div>

       <p><span class="field">
        <input type="submit" value="Update Route"  name="submit" class="btn-primary" style="left-margin:50px;" />
      </p>

    </div>

    <?php echo form_close(); ?>
  </div>

我获取了ajax响应数据。但我正在显示数据

var ajaxDisplay = document.getElementById('getbusdetailsforeditview');
ajaxDisplay.innerHTML = ajaxRequest.responseText; 

如何将数据输入到我的特定输入字段中并在输入值中显示它。目前它显示在单个 ID getbusdetailsforeditview

Answer 1

您可以使用 de value 属性为输入字段设置值。

Checkout w3school reference