使用jQuery更新DOM元素

Question

I'm looking for a way to update the webpage I'm working on to act as a report for several different people to pass back and forth. I'm using forms to take in several pieces of data and am wondering how I can make it so that it just immediately adds the content to the divs under the right heading. I'm currently using jquery and append and it looks like it adds the desired input and then immediately removes it. I tried using .live as well and it did not show up at all. Is there a way to make form inputs post to the page without submitting to another page?

Here is my code so far, testing just the element that will be the heading for the issue:

<div class="IssueDiv">

</div>

<form id="newIssue">
    <fieldset>
        <legend>Add a new important issue:</legend>
        <input type="text" id="issue" placeholder="Issue Summary...">
        <input type="text" id="issue-client" placeholder="Client...">
        <input class="ticket" type="text" id="issueParent" placeholder="Parent ticket..."><br>
        <textarea placeholder="Issue details..."></textarea><br>
        <button id="addIssue">Add Issue</button>
    </fieldset>
</form>

And the jquery:

<script>
    $(function(){
        $("#addIssue").click(function() {
            var $issue = $("#issue").val();
            var $issueSum = $("<h3></h3>").text($issue);
            $(".IssueDiv").append($issueSum);
        });
    });
</script>

edit: I'm looking into using AJAX but I'm not sure how to make it so that all of the input data will persist. I am basically looking to make a webpage-style-report that will allow myself and my team to update the entries on the report and they will stay on the report until we are able to take them off by removing a div that encapsulates the individual issue.

I would also like to be able to format the individual pieces here separately, so, for instance, I could add a check-box that says the issue is urgent and format the heading of those to be red. What is the easiest way to have data that persists, can be added into new (div/h/p) elements, and is shown on the main webpage, while also allowing me to update formatting?

Answer 1

Your code appears to add the text and then immediately remove it because your form gets posted and the page reloads, effectively resetting the page to its initial state.

If you just want to add the text to the page without posting the form or executing any server-side processing, you can prevent the form from posting using jQuery's preventDefault() . Note that I have created a submit listener on the form itself, rather than a click listener on the submit button.

$("#newIssue").on('submit', function(e) {
    e.preventDefault();
    ...
});

 $(function () { $("#newIssue").on('submit',function (e) { e.preventDefault(); var $issue = $("#issue").val(); var $issueSum = $("<h3></h3>").text($issue); $(".IssueDiv").append($issueSum); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="IssueDiv"></div> <form id="newIssue"> <fieldset> <legend>Add a new important issue:</legend> <input type="text" id="issue" placeholder="Issue Summary..."> <input type="text" id="issue-client" placeholder="Client..."> <input class="ticket" type="text" id="issueParent" placeholder="Parent ticket..."> <br> <textarea placeholder="Issue details..."></textarea> <br> <button id="addIssue">Add Issue</button> </fieldset> </form> 

However, keep in mind that if you're using this to share reports between computers, this will not work. This is only updating the DOM in the current browser and is not doing any data storage or retrieval. If you need the reports to update online, consider using AJAX to post your data to a server-side script without refreshing the page. Then include some sort of timer that refreshes the content (also using AJAX) on a schedule (eg every 10 seconds).