CODEWITHSUNDEEP
javascriptjqueryajax
faize
faize

Reputation: 59

How to append check box inside a table of Ajax response

//assume I have the response data as follows:
var response[] = { blake,[email protected],fofehu45555,ontario,toronto }, {flake,[email protected],kokehu45555,ontario,toronto}; 

for(i=0; i<response.data.length; i++){

$("#table").append('<input type="checkbox"'"<tr class='tr'> <td> "+response.data[i].user_name+" </td> <td> "+response.data[i].userr_contact+" </td> <td> "+response.data[i].user_license+" </td> <td> "+response.data[i].userr_email+" </td> <td> "+response.data[i].state+" </td> <td> "+response.data[i].city);}
<button onclick="myfunction();">Go</button>
<table id="table" border=1>
  <tr>
   <th> Name </th>
   <th> contact </th>
   <th> license </th>
   <th> email </th>
   <th> state </th>
   <th> city </th>
  </tr>
</table>

I want to append this checkbox inside the table accurately, so that I can give the permission to the client to select few of the response data and give a new request again by the click of a button (onclick).

The tricky part that im struggling with this is i want to get the email address of the selected checkboxes stored in a variable/ array variable

Upvotes: 0

Views: 1439

Answers (3)

Rajasekaran
Rajasekaran

Reputation: 1

remove double quotes for type="checkbox"

it caused the error syntax uncaught error for me.

try instead type=checkbox

Upvotes: 0

iiirxs
iiirxs

Reputation: 4582

Supposing your response is in this format:

var response = [
  { 
    user_name: 'blake',
    user_email: '[email protected]',
    user_licence: 'fofehu45555',
    user_state: 'ontario',
    user_city: 'toronto' 
  },
  { 
    user_name: 'flake',
    user_email: '[email protected]',
    user_licence: 'kokehu45555',
    user_state: 'ontario',
    user_city: 'toronto' 
  }
];

one more readable way to create what you want is:

response.forEach(function(user) {
    var tr = $('<tr/>');
    var nameTd = $('<td/>', {text: user.user_name});
    var checkbox = $('<input />', { type: 'checkbox', value: user.user_email }).prependTo(nameTd);
    nameTd.appendTo(tr);
    var contactTd = $('<td/>', {text: user.user_contact}).appendTo(tr);
    var licenceTd = $('<td/>', {text: user.user_licence}).appendTo(tr);
    var emailTd = $('<td/>', {text: user.user_email}).appendTo(tr);
    var stateTd = $('<td/>', {text: user.user_state}).appendTo(tr);
    var cityTd = $('<td/>', {text: user.user_city}).appendTo(tr);
    $('table tbody').append(tr);
});

You html should look something like this: 

<html>
  <body>
    <table>
      <thead>
        <tr>
           <th> Name </th>
           <th> contact </th>
           <th> license </th>
           <th> email </th>
           <th> state </th>
           <th> city </th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </body>
</html>

JSFiddle

Then you can get the checked users' emails like this:

var selected = $('input:checkbox:checked');
var emails = [];
selected.each(function(){
    emails.push($(this).val());
});

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Assume I have the response data as follows

Hew... No. Because I feel that this is your issue.
Else, the answer is: Get the server script that is producing such a malformed "response" and fix it.

So I reworked a lot in there, to show you a working example.

As mentionned in comments, the response declaration, which is the starting point, is invalid. I structured it in a "commonly seen" way... Which is an object containint an array of objects.

Objects have propety names... Which you were tring to refer to in the jQuery append. So I added them.

Then, in the append, you placed the checkbox outside the tr... That's not good. I placed it in the name cell... But I would prefer to add a table colunm for it. You to decide.

You also had some quotes issue on that string to append.

$("#goBtn").on("click",function(){

  //assume I have the response data as follows:
  var response = {
    data:[
        {
          user_name: "blake",
          user_email: "[email protected]",
          user_contact: "fofehu45555",
          state: "ontario",
          city: "toronto",
          user_license: ""
        },
        {
          user_name: "flake",
          user_email: "[email protected]",
          user_contact: "kokehu45555",
          state: "ontario",
          city: "toronto",
          user_license: ""
        }
      ]
  };

  for(i=0; i<response.data.length; i++){

    $("#table").append("<tr class='tr'> <td> <input type='checkbox'> "+response.data[i].user_name+" </td> <td> "+response.data[i].user_contact+" </td> <td> "+response.data[i].user_license+" </td> <td> "+response.data[i].user_email+" </td> <td> "+response.data[i].state+" </td> <td> "+response.data[i].city);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="goBtn">Go</button>
<table id="table" border=1>
  <tr>
   <th> Name </th>
   <th> contact </th>
   <th> license </th>
   <th> email </th>
   <th> state </th>
   <th> city </th>
  </tr>
</table>

Upvotes: 1

Related Questions