Question

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

我的html代码的一部分（我有多个表单，每个表格都有这样的div）：

<div style='float:left'>
<form action='demo_form.asp'>
    <input type='text' name='email' value="+object_guid+" id='guid' style='display:none'>
        <input type='text' name='email' id='page' style='font-size: 200%;width:78%;float:left'>
            <input type='submit' onclick='goToPage();' value='>>' style='float:right;width:20%;font-size: 200%'>
    </div>
<div style='float:left;height:50px;width:400px;border:2px solid black'>Have submitted form text display above this text</div>

Answer 1

在一定程度上工作，给你一个想法，

更正你的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.
        })

    });
});

Demo

查看前两个表单，填写值并点击按钮

对于ajax功能，您可以参考http://api.jquery.com/jquery.get/，简单

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

1 个答案: