0

I have an HTML form that is within a Bootstrap Modal, that gets populated via Javascript. Basically the code reads data from a MySql Db and presents it to a form. Click the row in the form and it loads the modal with default values from the form, which can be then updated and then written back to the MySql Db through an MVC CRUD type scenario. The problem I am having is that all of the form "input" populate correctly using the "name" generated by the JS script, but I cannot get it to populate the "select""option" text input using the "name" generated by the JS script.

HTML code snippet as follows:-

    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria- 
   labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
   <a href="#" data-dismiss="modal"> <img src="img/footer-logo.png" width="30px" height="30px"> 
    `enter code here`<small>Back</small>
   </a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Update entry</b> 
   </font></span> 
    </div>
    <div class="modal-body">
    <table class="table table-striped">
       <thead>
          <tr>
             <th>From</th>
             <td><?php echo $orderbook_info['collection_company'] . " " . $orderbook_info['collection_address_1'] . " " . $orderbook_info['collection_address_2'] . " " . $orderbook_info['collection_city']; ?></td>
          </tr>
          <tr>
             <th>To</th>
             <td><?php echo $orderbook_info['delivery_company'] . " " . $orderbook_info['delivery_address_1'] . " " . $orderbook_info['delivery_address_2'] . " " . $orderbook_info['delivery_city']; ?></td>
          </tr>
       </thead>
    </table>
    <form class="form-horizontal" method="post" action="index.php?route=orderbook/orderbook">
    <fieldset id="modal_form">
    <div class="form-group" >
       <label class="col-md-4 control-label" for="textinput">Supplier</label>
       <div class="col-md-6">
          <input name="dataSupplier" type="text" class="form-control input-md" value = "<?php echo $orderbook_info['supplier']; ?>">
       </div>
    </div>
    <div class="form-group" >
       <label class="col-md-4 control-label" for="textinput">Supplier</label>
       <div class="col-md-6">
          <select class="form-control input-md">
             <option selected="selected" name="dataSupplier"><?php echo $orderbook_info['supplier']; ?></option>
             <option value="Seabourne">Seabourne</option>
          </select>
       </div>
    </div>

JS script as follows:-

<script>
// When the modal is show
$('#editModal').on('show.bs.modal', function (event) {
    var target = $(event.relatedTarget);

    // Get the order_id from the attribute
    var order_id = target.data('order-id');
    var supplier = target.data('order-supplier');
    
    
    
    var modal = $(this);

    // Find the input from modal and put a value in it
    modal.find('input[name=dataWaybillNo]').val(order_id);
    modal.find('input[name=dataSupplier]').val(supplier);
    
    
})

So, "input" populates default correctly similar to placeholder, but "option" does not

AdrianB
  • 7
  • 5
  • The SELECT needs the name, not the OPTION - a select is the element. Its value is the selected option. – Nikki9696 Aug 05 '21 at 14:53
  • @Nikki9696 I have tried putting the name in Select as well. It doesn't work unfortunately. – AdrianB Aug 05 '21 at 15:04
  • Select is not an input element. It is mentioned as input only if the html markup is also input. Select is a select element. And you need to use append to add an option to select. – Maria Nirmal Aug 05 '21 at 15:19
  • @Maria Nirmal so how can I populate the text portion of the option with the JS name. It works if I populate it with an echo PHP variable. – AdrianB Aug 05 '21 at 15:30
  • I don't clearly understand what you have done in your code. are you sure you are getting any output at all with this? Where is this input named "dataWaybillNo" even? And what are you trying to do? Could you share a working example of your code? – Maria Nirmal Aug 05 '21 at 15:45
  • @Maria Nirmal unfortunately code is on Local host in development. Please ignore dataWaybillNo as I have only put a snippet of code in. The problem is that the form input populates dataSupplier correctly, but I have not been able to get the select/option to populate dataSupplier in the text part of the option. – AdrianB Aug 05 '21 at 16:13
  • you can find a solution here https://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-a-javascript-object-with-jq – Maria Nirmal Aug 05 '21 at 16:36

0 Answers0