Javascript 在div中显示提交的表单数据

我一直在尝试将提交的表单数据显示到表单下方的一个div中。不刷新页面。我有多个表格，每个表格下都有一个div，我想将文本插入该表格下的div中

下面是我的表单div的大致外观：

html代码的一部分（我有多个表单，每个表单下面都有div，如下所示）：

已提交表单文本显示在此文本上方

在一定程度上发挥了作用，给了你一个想法

更正您的html，丢失

将“提交”类型转换为“按钮”类型

删除onclick函数

展示了前两种表单的工作示例

当您填写数据并单击表单时

$(document).ready(function(){
    $("input[type=button]").click(function(){
        var myChildren = $(this).parent().children();
        var $submited='';
        $(myChildren).each(function(i, obj){
            if(myChildren.eq(i).is(":visible")){
            $submited += ($(this).parent().children().eq(i).val())+', ';             
            }

        });       
        $submited = $submited.substr(0, ($submited.length - 4));
        $(this).parent().next('div').html($submited);
        //Ajax Functionality goes here
        $.get('demo_form.asp', function(data){
            //rest operation to carry out at client side.
        })

    });
});

填写值并单击按钮，查看最上面的两个表单

---

对于ajax功能，您可以参考，Simple

亲爱的朋友，我可以看到“>>”的类型是submit，所以表单将提交到“demo\u form.asp”，考虑到“demo\u form.asp”是同一页面，那么您最好使用服务器端帮助，还有一件事请命名您的表单，其次，如果您希望表单是ajax发布的，然后在div中显示发布的值会更容易。考虑一下你的选择。我已经在处理IT服务器端了，想显示它的客户机白。服务器正在处理它。

$(document).ready(function(){
    $("input[type=button]").click(function(){
        var myChildren = $(this).parent().children();
        var $submited='';
        $(myChildren).each(function(i, obj){
            if(myChildren.eq(i).is(":visible")){
            $submited += ($(this).parent().children().eq(i).val())+', ';             
            }

        });       
        $submited = $submited.substr(0, ($submited.length - 4));
        $(this).parent().next('div').html($submited);
        //Ajax Functionality goes here
        $.get('demo_form.asp', function(data){
            //rest operation to carry out at client side.
        })

    });
});