0

I am sending data successfully using ajax method of jQuery to a PHP file. Now, my problem is that I want to populate a modal form for editing an existing database record based on event ID that I am sending to my PHP page.

the snippet I use to call the PHP page is:

$.ajax({
                    url: 'dbget.php',
                    data: 'eventid='+event.id,
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    success: function(json_resp){   




                        //populate_data('#update_event', json_resp);
                        $('#updateModal').modal('show');
                    },
                    error: function(e){
                        alert('Error processing your request: '+e.responseText);
                    }
                });

As you can see that I can't seem to get the data to populate in the form in success section of the ajax method.

Here is the data returned from PHP file:

[{"u_id":"21","u_eventName":"Ready Ply","u_eventDate":"2017-05-11","u_customerName":"Fassoooggg","u_customerMobile":"9383838383","u_customerEmail":"ffgg@gmaks.com","u_totalAmount":"1000","u_advanceAmount":"500","u_balanceAmount":"500"}]

Here is the PHP file snippet processing DB request and sending json encoded data:

//Get the evenId from the POST request
$eventId = $_POST['eventid'];

$events = array();

$getQuery = mysqli_query($con, "SELECT eventmaster.id, eventmaster.eventName, eventmaster.startDate, eventmaster.customerName, "
."eventmaster.customerMobile, eventmaster.customerEmail, eventdetail.totalAmount, eventdetail.advanceAmount, "
."eventdetail.balanceAmount FROM eventMaster INNER JOIN eventdetail ON eventmaster.id = eventdetail.eventId " 
."WHERE eventmaster.id= '$eventId'");

while($fetch = mysqli_fetch_array($getQuery, MYSQLI_ASSOC))
{
    $e = array();

    $e['u_id'] = $fetch['id'];
    $e['u_eventName'] = $fetch['eventName'];
    $eventDate =  substr($fetch['startDate'],0,10); //extract the eventDate in yyyy-mm-dd format from the table date
    $e['u_eventDate'] = $eventDate;
    $e['u_customerName'] = $fetch['customerName'];
    $e['u_customerMobile'] = $fetch['customerMobile'];
    $e['u_customerEmail'] = $fetch['customerEmail'];
    $e['u_totalAmount'] = $fetch['totalAmount'];
    $e['u_advanceAmount'] = $fetch['advanceAmount'];
    $e['u_balanceAmount'] = $fetch['balanceAmount'];


    array_push($events, $e);
}

//printf("Data sent to client: " );

echo json_encode($events); //return data in JSON array

Please note that the keys in the json data match the name of the form fields. Here is the form snippet. This is the form I am trying to populate:

<!-- Update Event Modal Starts -->
<div id="updateModal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">

   <div class="modal-header"><!-- Modal Header -->
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Update Event</h4>
   </div>

   <div class="modal-body"><!-- Modal Body -->

        <p class="statusMsg"></p>

        <form method="post" id="update_event">

            <div class="form-group">
                <input type="text" name="u_id" id="u_id" class="form-control"   />
            </div>
            <div class="form-group">
                <label for="u_eventName">Event Name</label>
                <input type="text" name="u_eventName" id="u_eventName" class="form-control"  placeholder="Event Name"/>
            </div>

                <label for="u_startDate">Event Date</label>
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" name="u_startDate" id="u_startDate" readonly />
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <br />
            <div class="form-group">
                <label for="u_customerName">Customer Name</label>
                <input type="text" name="u_customerName" id="u_customerName" class="form-control"  placeholder="Customer Name"/>
            </div>

            <div class="form-group">
                <label for="u_customerMobile">Customer Mobile</label>
                <input type="text" name="u_customerMobile" id="u_customerMobile" class="form-control"  />
            </div>

            <div class="form-group">
                <label for="u_customerEmail">Customer Email</label>
                <input type="text" name="u_customerEmail" id="u_customerEmail" class="form-control"  placeholder="customer@email.com"/>
            </div>

            <div class="form-group">
                <label for="u_totalAmount">Total Amount</label>
                <input type="text" name="u_totalAmount" id="u_totalAmount" class="form-control"  placeholder="0"/>
            </div>

            <div class="form-group">
                <label for="u_advanceAmount">Advance Amount</label>
                <input type="text" name="u_advanceAmount" id="u_advanceAmount" class="form-control"  placeholder="0"/>
            </div>

            <div class="form-group">
                <label for="u_balanceAmount">Balance Amount</label>
                <input type="text" name="u_balanceAmount" id="u_balanceAmount" class="form-control"  placeholder="0"/>
            </div>

            <div class="form-group">
                <input type="submit" name="updateBtn" id="updateBtn" value="Update" class="btn btn-success" />
            </div>

        </form>
   </div>

   <div class="modal-footer"><!--Modal Footer -->
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>
<!-- Update Event Modal Ends -->

So, once again, after you look at the above code snippets, please help me to populate the form with the JSON object sent from the PHP file containing one row record from database to be populated in the form.

Am I missing something or what? Also, if I try to print the JSON object in the html page, I only get an OBJECT printed instead of the data.

The sample I posted here was what I echoed from PHP.

Anyone's help will be highly appreciated. Thanks.

gr8techie
  • 1
  • 1
  • Your code is vulnerable to [**SQL injection**](https://en.wikipedia.org/wiki/SQL_injection) attacks. You should use [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) prepared statements with bound parameters as described in [**this post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). – Alex Howansky May 31 '17 at 18:27
  • Thanks for the heads-up. I would optimize it later on once i solve the issue of populating my form with the json object from the PHP file. – gr8techie May 31 '17 at 18:49
  • What is going on here? `while($fetch = mysqli_fetch_array($getQuery, MYSQLI_ASSOC)){/* here */}` Just do `$data[] = $fetch + ['u_eventDate' =>substr($fetch['startDate'],0,10)];` and after the loop: `echo json_encode($data);` – Xorifelse May 31 '17 at 23:24
  • actually, the column names in the table are different than the names of the form fields. So, I am iterating and getting the data to the appropriate form field name. This is needed as the table column names correspond with the fullcalendar jQuery control. I am using it to display the bookings done per date. – gr8techie Jun 01 '17 at 05:48

0 Answers0