How to populate values of JSON obtained from server file in created HTML Form using jquery?

Question

FYI: I am not using bootstrap Modal Box for Pop up.

I have table with button in each row to display the detailed information in pop up modal box.

I am attaching part of code required for dashboard.html , modal.js , modal.css and modal.php .

I am lacking concepts of jquery to add element to form and assign values of returned JSON file by PHP and then add the FORM to div tag class modal-content . also CSS for pop up modal box is not working on button click.

Also i want to remove the previous html form tag inside class modal-content as each new row click will pop up with new form where user can make edit and change the values of row.

You can get more clear picture by looking at screenshot below.

File dashboard.html , this file has button to call modal.js

<div class="row">
<div class="col span-4-of-4">                             

<div style="overflow-x:auto;">

<table class="display_table" id='main_lead_table' style="display: none;">

    <thead>                        
        <th>#</th>
        <th>Lead Id</th> 
        <th>Name</th>
        <th>Website</th>
        <th>Linkedin</th>
        <th>Lead Description</th>
        <th>Owner Notes</th>

        <?php

        if($_SESSION['Admin'] == '1'){

        ?>

        <th>Admin Notes</th>
        <th>Added By</th>

        <?php 

        }

        ?>

        <th>Last Contact Date</th>
        <th>Next Contact Date</th>
        <th>Lead Status</th> 
        <th>Details</th>

    </thead>

    <tbody id='leadTable'>                          

        <?php



        function getLeadAddedByName($id){

            include('./server/connection.php');

            $selectSQL = "SELECT UserName FROM `tbl_user_signup_info` WHERE User_Id = '$id' ";

            $result = $conn -> query ($selectSQL);

            $name = "";

            while($row = mysqli_fetch_array($result)){

            $name = $row['UserName'];

            }

            return $name;

        }

        include('./server/connection.php'); 

        $selectSQL = "SELECT * FROM `tbl_main_lead_info` ORDER BY Lead_Id";

        $result = $conn -> query ($selectSQL);

        $i = 1;

        while ($row = mysqli_fetch_array($result)) {                                

              printf( "<tr class='content'>
                            <td>%s</td>
                            <td>%s</td>

                            <td>%s</td> 
                            <td>%s</td>                                                         

                            <td>%s</td>
                            <td>%s</td>

                            <td>%s</td>
                            <td>%s</td>

                            <td>%s</td>                                                           
                            <td>%s</td>

                            <td>%s</td>
                            <td>%s</td>

                            <td><button id='%d' name='leadidclick' value='%d' > View </button></td>                                                                            
                        </tr>",

                        $i,
                        $row['Lead_Id'], 
                        $row['FirstName']." ".$row['LastName'],
                        $row['Website'],
                        $row['Linkedin'],
                        $row['LeadDescription'],
                        $row['OwnerNotes'],                                                       
                        $row['AdminNotes'],

                        getLeadAddedByName($row['LeadAddedBy'])."<br>Date/Time: ".$row['LeadAddedOn'],                                                                                           

                        date('d-m-Y', strtotime($row['LastContactDate'])),
                        date('d-m-Y', strtotime($row['NextContactDate'])),                                                          
                        $row['LeadStatus'],

                        $row['Lead_Id'],                                                                   
                        $row['Lead_Id'],

                        );

                        $i = $i+1;

                    }

        ?>                                       

    </tbody>

</table>
</div>
</div>
</div>

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

    <p>This is Modal Box</p>                                        

  </div>

</div> 

This modal.js file will get row id on each new button click and build HTML FORM for POP up of modal box with that HTML FORM.

$(document).ready(function() {

    $('[name="leadidclick"]').click(function(e){

      e.preventDefault();
      // var leadid = $('[name="leadidclick"]').val();

      var leadid = $(this).val();

      alert("You clicked Leadid: " + leadid);

      $.ajax({

        type: "POST",
        url: './server/modal.php',
        data: {

          'leadid': leadid

        },        
        success: function(data){

           var result = $.parseJSON(data);
           console.log(result);

           console.log(result.length)
          //Modal Box to POP UP HERE

           $.each(result, function(key, value) {

                    $form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);


                   //This value assigning based on JSON Key value pair is also not working


                    $form.append('<label>Lead Id: </label><input type="text" name="leadid" ').attr("id", value['Lead_Id']);

                    $form.append('<label>Lead Name: </label><input type="text" name="leadname">').attr("value", value['FirstName']+" "+value['LastName']); 

                    $form.append('<label>Company: </label><input type="text" name="company" ').attr("value", value['Company']);


                    $form.append('<input type="button" value="button">'); 

                    i = i + 1;

                });


          $( ".modal-content" ).append( $form );

          //This change in CSS is not working

          $('#myModal').css("display", "show");         


        }

      });

    });

});

File modal.css for displaying Modal

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@Trupti Barad I am getting this console error for modal box pop up display, and i am not able to pop up modal box (i am using modal box without bootstrap).

modal.js:61 Uncaught TypeError: $(...).modal is not a function
    at Object.success (modal.js:61)
    at c (jquery-3.4.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
    at l (jquery-3.4.1.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)

Answer 1

In file dashboard.html You have to give div inside model code ex. <div id="formapp">

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

    <p>This is Modal Box</p>                                        
    <div id="formapp">
    </div>
  </div>

</div> 

In ajax

 $.ajax({

        type: "POST",
        url: './server/modal.php',
        data: {

          'leadid': leadid

        },        
        success: function(data){

           var result = $.parseJSON(data);
           console.log(result);

           console.log(result.length)
          //Modal Box to POP UP HERE

            $('#formapp').empty(); // first empty division content 
            var form=''; //declare var
           $.each(result, function(key, value) {

                    form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);


                   //This value assigning based on JSON Key value pair is also not working


                    form.append('<label>Lead Id: </label><input type="text" name="leadid" value="'+value['Lead_Id']+'">');

                    form.append('<label>Lead Name: </label><input type="text" name="leadname" value="'+value['FirstName']+" "+value['LastName']+'">');

                    form.append('<label>Company: </label><input type="text" name="company" value="'+value['Company']+'">');


                    form.append('<input type="button" value="button">'); 

                    i = i + 1;

                });


          $( "#formapp" ).html( form );

          //This change in CSS is not working

          $('#myModal').show();         


        }

      });

Or no need $.each() for single record just use result[0]['Lead_Id']

Also $form is treated as a reference. In jquery use var to declare the variable