Check which option is selected
When a button is clicked, I am using AJAX to display a PHP modal, with a form inside it. It is an edit form so the fields are filled in with data received from AJAX calling a PHP function via a handler. However I need a way for a select input to know which one is selected but, the data to use for that is in JavaScript. Usually I would use a function such as
$occasionTypes = getPublishedOccasionTypes($connection); if($occasionTypes != NULL){ foreach ($occasionTypes as $occasionType) { $selected = (isset($booking['reservation_type']) && ($booking['reservation_type'] == $occasionType['id'])) ? 'selected' : NULL; $occasionSelect .= '<option value='.$occasionType['id'].' '.$selected.'>'.$occasionType['name'].'</option>'; } } But in this case, $booking['reservation_type] is useless because the actual value I need is in an input (a hidden one I created) but being filled by JavaScript. Anyone any ideas? Here is my JavaScript also
$.ajax({ type: 'POST', url: "/modules/ajax/ajax_handler.php", data: data }) .done((result)=>{ result = JSON.parse(result); console.log(result); $('#firstName').val(result.customer_first_name); $('#lastName').val(result.customer_last_name); $('#email').val(result.customer_email); $('#number').val(result.customer_mobile); $('#date').val(result.reservation_date); $('#time').val(result.reservation_time); $('#size').val(result.party_size); $('#occasion').val(result.occasion_type); $('#comment').val(result.special_requirements); $('#code').val(pcode); $('#customerCode').val(result.customer_code); $('#editModal').modal('show'); }) MODAL
$modalpopup = ' <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Edit Booking</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <form id="editBooking" class="form form-horizontal" method="post" enctype="multipart/form-data"> <div class="modal-body"> <div class="form-group"> <label>First Name</label> <input type="text" class="form-control" name="firstName" id="firstName" placeholder="" required> </div> <div class="form-group"> <label>Last Name</label> <input type="text" class="form-control" name="lastName" id="lastName" placeholder="" required> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" name="email" id="email" placeholder="" required> </div> <div class="form-group"> <label>Phone Number</label> <input type="text" class="form-control" name="number" id="number" placeholder="" required> </div> <div class="form-group"> <label>Date</label> <input type="date" class="form-control" name="date" id="date" placeholder="" required> </div> <div class="form-group"> <label>Time</label> <select id="time" name="time" class="form-control" required> <option value="">Please select ...</option> '.$timeSelect.' </select> </div> <div class="form-group"> <label>Party Size</label> <input type="number" class="form-control" name="size" id="size" placeholder="" required> </div> <div class="form-group"> <label>Occasion</label> <select id="occasion" name="occasion" class="form-control" required> <option value="" selected>Please select</option> '.$occasionSelect.' </select> </div> <div class="form-group"> <label>Status</label> <select class="form-control" name="status" id="status" placeholder=""> <option value="accepted">Accepted</option> <option value="not-accepted">Not Accepted</option> </select> </div> <div class="form-group"> <label>Comment</label> <textarea type="text" class="form-control" name="comment" id="comment" placeholder=""></textarea> </div> <input type="hidden" class="form-control" name="code" id="code" placeholder=""> <input type="hidden" class="form-control" name="customerCode" id="customerCode" placeholder=""> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Edit</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </form> </div> </div> </div>'; 
