CODEWITHSUNDEEP
phpjqueryajaxhtml
CK8
CK8

Reputation: 359

jQuery ajax php to populate form fields doesn't work

I try to populate a form using jQuery ajax and php doesn't work. The code was taken from somebody else which populate the form using jQuery only and it worked. Here is my html/jquery code and my php code. Please help!

<!DOCTYPE html>
<html>
<head>


<link rel="stylesheet" type="text/css"   href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css"/>
<script type="text/javascript"   src="jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
</head>
<body>

  <form name="form_simple" action="details.html" method="get">
     <input type="hidden" name="ID" />
    <br/>
<label for="Name">Name</label>
<input name="Name" type="text" />
<br/>
<label for="Address">Address</label>
<textarea name="Address" rows="5" cols="20"></textarea>
<br/>
<label for="Country">Country</label>
<select name="Country" multiple="multiple">
    <br/>
    <option value="">-</option>
    <option value="UK">United Kingdom</option>
    <option value="SRB">Serbia</option>
    <option value="USA">United States of America</option>
    <option value="FRA">France</option>
</select>
<br/>
<label for="IsFeatured">Is Featured</label>
<input name="IsFeatured" type="checkbox" value="true" />
<br/>
<label for="Town">Town</label>
<select name="Town">
    <option value="" selected="selected">-</option>
    <option value="London">London City</option>
    <option value="Liverpool">Liverpool City</option>
    <option value="Lothian">Lothian City</option>
    <option value="Newcastle">Newcastle City</option>
    <option value="Buckinghamshire">Buckinghamshire City</option>
    <option value="Essex">Essex City</option>
</select>
<br/>
<label for="Contact">Contact</label>
<input name="Contact" type="radio" value="Email" />Email
<input name="Contact" type="radio" value="Phone" />Phone
<input name="Contact" type="radio" value="Post" />Post
<br/>
<input type="submit" value="Save" class="submit-button" />


<script>
/*
data = {
    "ID": 17,
    "Name": "Emkay Entertainments",
    "Address": "Nobel House, Regent Centre",
    "Town": "Lothian",
     "Country":["UK","USA"],
    "Contact": "Phone",
    "IsFeatured": true
};
*/
$(document).ready(function() {
//alert("get here");
$.getJSON("fill_form.php" ,
function(data){
 alert(data);
 // reset form values from json object
 $.each(data, function (name, val) {
    var $el = $('[name="' + name + '"]'),
        type = $el.attr('type');

    switch (type) {
        case 'checkbox':
            $el.attr('checked', 'checked');
            break;
        case 'radio':
            $el.filter('[value="' + val + '"]').attr('checked', 'checked');
        break;
      default:
        $el.val(val);
    }
});
});


});


</script>
</html>

---------------PHP code -------------------------------------------- 

  $row_data = array(
        "ID" => 17,
        "Name" => "Emkay Entertainments",
        "Address" => "Nobel House, Regent Centre",
        "Town" => "Lothian",
        "Country" => ['UK','USA'],
        "Contact" => "Phone",
        "IsFeatured" => true
  );

  array_push($data, $row_data);   



  echo json_encode($data);
?>

Upvotes: 0

Views: 309

Answers (2)

Jovan MSFT
Jovan MSFT

Reputation: 14600

As an alternative, you might download https://jocapc.github.io/jquery-view-engine/ that enables you to load JSON object into the form like:

$(document).ready(function() {
     $.getJSON("fill_form.php" ,
          function(data){
                 $("#form_simple").view(data);
          });
});

It will handle form elements see https://jocapc.github.io/jquery-view-engine/docs/form

Upvotes: 0

Xorifelse
Xorifelse

Reputation: 7911

$.getJSON("fill_form.php" , function(data){
  alert(data);
  $.each(data, function (name, val) {

This code loops over the first array index. Because you use array_push(), PHP create an array like so:

Array(
  [0] => Array(
    "ID" => 17,
    // etc
  )
)

This means it translates to [{ and not { so you are iterating over the index and not the inner array keys.

Either remove your array_push() or add a second foreach loop in your js code to loop over the keys.

Upvotes: 2

Related Questions