Append HTML data jQuery

Question

This time I wrote html in controller when I check a checkbox I get data in console but I want to get it in the form.

I have checkbox in foreach loop

<input type='checkbox' value='{$student['id']}' name='student_ids[]' id='chkbx' required> {$student['name']}

when click on checkboxes data load accordingly

its my html

    $str .= '<div class="form-group">
    <label class="control-label col-md-3">
    Student
    </label>
    <div class="col-md-4">
        <select id="students-clicked" class="form-control select2-multiple" multiple name="students[]">
            <option value=""></option>';
            foreach ($students as $students) {
                $str .= "<option value='{$student->id}'>{$student->name}</option>";
            }

$str .=         '</select>
    </div>
</div>';

Jquery Method is as

    $('body').on('click', "#chkbx", function() {
    var class = $('input:checkbox:checked').map(function() {
        return this.value;
    }).get();
    $.ajax({
            url: '/trigger/studentsData',
            type: 'POST',
            data: {'trigger_type': 'click' , ids: class},
            success: function(result) {

            }
        });
});

Except jQuery everything is written in controller this time I am getting HTML data in console how can I append it in my html form it should also update according to checkbox selection

@Kyslik it requirement here in my case that'ts why i am using this approach — Ramzan Mahmood
– Ramzan Mahmood, Commented Jun 6, 2017 at 9:54
yes above html in my question changes on chekboxes selection i want to show that div in my form — Ramzan Mahmood
– Ramzan Mahmood, Commented Jun 6, 2017 at 9:59

kunal · Accepted Answer · 2017-06-06 10:01:33Z

1

Try this :-

<input type='checkbox' value='{$student['id']}' name='student_ids[]' id='chkbx' required/> {$student['name']}
<div id="appendata">
 //your ajax data
</div>

Now in Success Function

success: function(result) {
    $("#appendata").html(result); // this will replace when you select the checkbox
         or
    $("#appendata").append(result); // this will append when you select again from checkbox
}

Hope it helps

answered Jun 6, 2017 at 10:01

kunal

4,28313 gold badges45 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ramzan Mahmood Over a year ago

its close to solution but not exact its insert 5 html fields if i check 5 checboxes it should give all data in one dropdown

Ramzan Mahmood Over a year ago

if i click 2nd checkbox it should insert data in same field not need to insert new

kunal Over a year ago

then you have to do changes in your html that is to be used in controller. i have give answer according to your problem now you have to look your code

kunal Over a year ago

then use html(result);

Ramzan Mahmood Over a year ago

thanks +1 for help please also vote question if you think it should :)

|

linktoahref · Accepted Answer · 2017-06-06 10:22:49Z

1

Don't append() rather use html() to override the content with the response data

success: function (result) {
    $("#container").html(result);
}

Plus, if you have more than one checkboxes, don't use id, rather use class attribute to loop through them

edited Jun 6, 2017 at 10:22

answered Jun 6, 2017 at 10:14

linktoahref

8,0273 gold badges32 silver badges54 bronze badges

1 Comment

Ramzan Mahmood Over a year ago

thanks +1 for help please also vote question if you think it should :)

Collectives™ on Stack Overflow

Append HTML data jQuery

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related