0

I am trying to make a form page in adding new client in a database. The form consist of a selection tag that has options for adding house number. But there are circumstances like house number is not yet placed on the database, so I decided to create a button for adding new house no (using modals).

Form:

<div class="col-md-3 form-group" id="autoload">      
<label>
  Household: <a data-toggle="modal" data-target="#addHousehold" 
  style="cursor: pointer; text-decoration: none;">
  <i class="fa fa-plus" >Add</i></a>
</label>

<select class="form-control select2" style="width: 100%;">
    <option selected="selected">Select Household</option>
      <?php foreach($result3 as $row): ?>
    <option><?=$row['house_no']?></option>
      <?php endforeach ?>

</select>

</div>

Script for adding new house number, and refresh the selection when new house number is successfully added:

$('#addHouseholder').click(function(){
        var householder = $('.householder').val()
        var street = $('.strsel1').val();

        $.ajax({
          method: "POST",
          url: "insert.php",
          data: {householder:householder,street1:street}
        }).then(()=>{

            $("#autoload").load(" #autoload");
            alert('Household Added')
        })

This function successfully, the only problem is the division of the selection is deformed. I also forgot to say that I reload the div, but I wonder if it is possible to just reload the selection. I am not sure how to execute this. Looking forward for your help. Thank you very much!

JBotigan
  • 1
  • 2
  • 1
    Prepare the HTML which you need to update on the page in PHP file which process ajax request and sent it as a response. Then set the HTML response on your page via js in your particular section. https://stackoverflow.com/a/18064824/5962966 https://www.sitepoint.com/auto-refresh-div-content-jquery-ajax/ Hope it helps. – Milind Singh Nov 30 '18 at 10:03

2 Answers2

0

Are you using select2 (https://select2.org/)?

If so, you can use the ability to programmatic control the select.

https://select2.org/programmatic-control/add-select-clear-items

By using:

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');

You could return the option in the ajax response and populate the select.

Pedro Jannotti
  • 71
  • 4
0

You just need to echo json format of your data in insert.php file then modify your js script to 

    $.ajax({
    type: "POST",
    url: "path/insert.php",
    data: {householder:householder,street1:street},
    success: function(data){
        // Parse the returned json data
        var opts = $.parseJSON(data);
        // Use jQuery's each to iterate over the opts value
        $.each(opts, function(i, d) {
            // You will need to alter the below to get the right values from your json object.  Guessing that d.no / d.anyOtherInfo are columns in your data
            $('#autoload').children(".orm-control.select2").append('<option value="' + d.no + '">' + d.anyOtherInfo + '</option>');
        });
    }
});

Good luck.

Edit 1: adding source.

check Populate Select box options on click with Javascript/Jquery with Json data

Lamine Kessoum
  • 51
  • 7