bmcgonag bmcgonag - 5 months ago 19
jQuery Question

Add data from form field to table on page without refreshing whole page

Most of the stuff I see on this site refers to adding information to a div from php. I just want to take a user's input, add it to a table dynamically and have it displayed in the div as the click the submit button.

I'm not doing anything where the data gets posted to a database, no php, etc, at this point.

I have the JQuery to run the dynamic add to the database as well. It works, but I have to use a breakpoint in the javascript to step through and see the entered data added to the row....issue is when that function is done, the page refreshes, and all data is gone.

I need a way to add the data to the table in the div without the page refreshing and clearing all of the other data each time.

Imagine parent information in one div, and child information being added in another div. As I add each child piece, I don't want the parent information to be removed, and in fact want it to remain as "editable" information.

------------------------------------------ Edit ----------------------------------------------

Below is the code I'm now using based on suggestions, but I obviously don't understand completely, because it hits the event handler for the click, but then doesn't get inside the function, just jumps back out, and never hits my other breakpoints inside there.

---------------------------------------Final Edit ----------------------------------------------

I finally pulled my head out of my backside and paid attention to what Charlie was telling me, and got this...and it works when I call the function from the onClick event. I couldn't get the event to bind to the button click, but that may be because I was using the tag instead of the setup.

function(addNoteRow){
event.prevent.Default();
var noteTxt = $('#noteEntry').val();
var noteEntBy = 'BGM'
noteEntDate = (Date());
if (!document.getElementsByTagName) return;
tabBody=document.getElementsByTagName("TBODY").item(0);
row=document.createElement("TR");
cell1=document.createElement("TD");
cell2=document.createElement("TD");
cell3=document.createElement("TD");
textnode1=document.createTextNode(noteEntDate);
textnode2=document.createTextNode(noteEntBy);
textnode3=document.createTextNode(noteTxt);
cell1.appendChild(textnode1);
cell2.appendChild(textnode2);
cell3.appendChild(textnode3);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tabBody.appendChild(row);
}

Answer Source

You mentioned you're using jQuery, so I will in my example to make this easier.

 $('#submit_button').click( // Bind an event handler to the submit button
        function(event){
            event.preventDefualt(); //This is necessary if you are using a an submit button input element as normal behavior is to submit the form without ajax causing the page location to change. Event is automatically passed in, and we can call preventDefault() on this object to stop the browser from navigating away from our page.
            $.ajax({
                url:'http://youserver.com/script_that_will_respond.php', //Give the ajax call a target url
                data: $('#user_input').val(), //Supply some data to send with the request,
                success: function(data){ //Supply an anonymous function to execute on success. The parameter will be the response text.
                    $('#your_result_div').html(data); //On success of the ajax call, put the response text into an html element on your page
                }
            });
        }
    );

jQuery's ajax method has a lot of settings. This is a pretty bare-bones example. You can read more about the various options here: http://api.jquery.com/jQuery.ajax/

Edit: I may have misunderstood. If you do not need to reach a server, and want to do this all locally, it is simpler.

$('#submit_button').click( // Bind an event handler to the submit button
    function(event){
        event.preventDefault();
        /*
        We have to call this method on the event object bacause deafult behavior
        of a subnmit button is to submit the form, causing the browser to go to a new page.
        */
            var text = $('#some_input_element').val(); //Store the value of a text input in the variable text
            $('#your_div').html(text); //put the contents of the variable text into the "your_div" elemnt.
        }
);