Add ajax success return json object data in html form

Question

I have created form to add data in php-mysql database with ajax, It is working fine, after data is added it shows in html table.

Now i am trying to create code for editing those entry, I had created code as below for edit with AJAX,

$(document).ready(function() {
var table = $('#categorylist').DataTable();

$('#categorylist tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
} );

$('#edit_category').on( 'click',function () {
    document.getElementById('editcategory').style.display = "block";



    /*do some task here to get values of ID*/
var catid = $("#cat_id").val();


            jQuery.ajax({
                        url: "<?php echo base_url(); ?>index.php/tools/edit_category",
                        data: {category:catid},
                        type: "POST",
                        success:function(data){ 
                        var objData = jQuery.parseJSON(data);
                            console.log(objData);
                            $("#cname").html(
                                objData.category_name
                                            );


                                    }
                        });

});
});

Above code will send request to PHP to get information for that ID and return me data in json format, Below is returned data,

category_id: "38" category_name: "Test Conveyance"

Now i want to show this values in html form so that user can see what are current values, then user will edit values and click on save.

Below is my html form, how can i show category ID and name in html input form as value?

Thanks,

<form action="" method="post" accept-charset="utf-8" id="category_editform">
                            <div class="form-group">

                              <div class="controls">
                              <div class="input-group m-t-20 icons-panel"> <span class="input-group-addon bg-white"> <i class="fa fa-list"></i> </span>
                         <input type="text" class="form-control" name="category_name" placeholder="category name" id="cname" required>
                        </div>

                              </div>
                            </div>
                            <div class="align-left">
                              <input type="submit" class="btn btn-primary m-r-20" name="create_category" value="Save">
                              <button type="reset" class="btn btn-default" onClick="expensecategory_editform_hide()">Cancel</button>
                            </div>

                          </form>

Answer 1

imagine this is your json

{'category_id': "38", 'category_name': "Test Conveyance"}

parse it using dot notation. Ex. if it in ajax response use data.category_id and data.category_name

Then

use set it into form using id Ex. your field is

<input type="text" id="category_id">

then assign the value of category id to field

$("#category_id").val(data.category_id);

And in your case you should use

$("#cname").val(objData.category_name);

Answer 2

Use below code to show category name value in html form

$("#cname").val(objData.category_name)

Instead of

$("#cname").html(objData.category_name)