Question

我在这个网站上看到的大部分内容都是指从php添加信息给div。我只想获取用户的输入，将其动态添加到表中，并在单击提交按钮时将其显示在div中。

此时我没有做任何数据发布到数据库，没有php等的事情。

我还有JQuery来运行动态添加到数据库。它可以工作，但我必须在javascript中使用断点来逐步查看输入的数据添加到行....问题是当该函数完成时，页面刷新，所有数据都消失了。

我需要一种方法将数据添加到div中的表中，而不会每次刷新页面并清除所有其他数据。

想象一个div中的父信息，以及另一个div中添加的子信息。当我添加每个子片段时，我不希望删除父信息，并且实际上希望它保留为“可编辑”信息。

------------------------------------------编辑---- ------------------------------------------
下面是我现在使用的代码基于建议，但我显然不完全理解，因为它点击事件处理程序的点击，但然后没有进入函数内部，只是跳回去，从来没有命中我在那里的其他断点。

---------------------------------------最终编辑------ ----------------------------------------
我终于把头从我的背后拉了出来，注意到Charlie告诉我的事情，并得到了这个......当我从onClick事件中调用该函数时它就有效了。我无法将事件绑定到按钮单击，但这可能是因为我使用的是标记而不是设置。

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 1

尝试AJAX以部分刷新页面的部分，如div等。 http://api.jquery.com/jQuery.ajax/

Answer 2

你提到你正在使用jQuery，所以我将在我的例子中使这更容易。

 $('#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的ajax方法有很多设置。这是一个非常简单的例子。您可以在此处详细了解各种选项：http://api.jquery.com/jQuery.ajax/

编辑：我可能误会了。如果您不需要访问服务器，并希望在本地完成所有操作，则更简单。

$('#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.
        }
);

将表单字段中的数据添加到页面上，而不刷新整页

2 个答案: