asehgal asehgal - 1 year ago 63
Javascript Question

add list group item that contains a form with inputs to a ul using JS

This is my markup in HTML5

<ul class="list-group">
<li class="list-group-item">
<form action="" method="post">
<span class="categoryname"><?php htmlout($category['name']); ?></span>
<input type="hidden" class="id" name="id" value="<?php echo $category['id']; ?>">
<input type="hidden" name="project" value="<?php echo $projectid; ?>">
<button type="button" name="action" value="Edit" class="edit btn pull-right btn-link" data-toggle="tooltip" title="Edit Name">
<i class="glyphicon glyphicon-edit" style="font-size: large; color: black"></i>

How can I add a
to the
using JQuery/JS on a button click ? New to web technologies and development. Help appreciated.

Answer Source

if you want to add html using jquery you can use the methods .append/.html ...

so what you can do is copy the html and append it

$('#myButton').on('click', function(e) {
    var html = $('#what-i-want-to-copy').html(); // returns a string

    // or you can add plain text

but i see you are using php inside your code there, and all that snippet of code will do is copy the html rendered as is, and im assuming you want it with some data from the server, so i would suggest you use templates, and retrieve the data on click and then append the html using that template and data.

Read more:

Explanation of <script type = "text/template"> ... </script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download