Question

如何在按提交时在同一页面上的表格中显示表单数据？

这是我的表格

<form method="post" target="_parent">

    <p>Name: 
      <input type="text" name="Name" value="" maxlength="200" size="60">
    </p>

    <p>User ID:
        <input type="text" name="UserID" value="" maxlength="200" size="60">
    </p>

    <p>Password:
        <input type="password" name="Password" value="" maxlength="200" size="60">
    </p>

    <p>Organization:
        <input type="text" name="Organization" value="" maxlength="200" size="60">
    </p>

    <p> Role
      <select name="Role">
        <option name = "Member" selected>Member</option>
        <option name = "Admin">Admin</option>
      </select>
    </p><br />
    <p> 
      <input type="submit" name="submit">
      <input type="button" name="cancel" value="Cancel" onClick="closebox()">
    </p>
</form>

这是我添加的表格行代码

function addrow()
{
    var table=document.getElementById("tablelist");
    var row=table.insertRow(-1);
    var cells = new Array();
    for(var i = 0; i < 6;i++)
    {
        cells[i]=row.insertCell(i);
        cells[i].innerHTML="New";
    }
}

我希望在按下提交时将新行添加到表中，并在单元格中显示表单数据，但我不知道从哪里开始。

Answer 1

一般来说，考虑到您使用post作为表单方法，您可以将数据发送到要处理的脚本。然后，该脚本的响应将用于生成新表。在发送到服务器端脚本（如php）之前，您可以使用客户端脚本（javascript / jquery）来验证表单。

您可能希望查看jquery .serialize函数，因为它提供了一种将数据发送到服务器端脚本以及操作返回数据的简单方法。

示例代码可能类似于：

客户端jquery post call

.post(serverSideScript.php',$('#yourFormId').serialize()).success(genResults);

这会在您的服务器端脚本成功完成时调用genResults函数

回调函数

//display a new table with whatever info you like
function formSent(data){   
  var newTR = '<table><tr>' 
        + '<td>Display a result ' 
        + $('#userId').val() 
        + '</td></tr></table>';

//append to your table,
$('body').append(newTR);

}

如果您不想/需要处理表单，那么客户端脚本就是您的朋友。只需在表单提交上创建一个表。

使用jQuery看起来像

$('#yourFormId').submit(function(e){

//prevent the default form action
e.preventDefault();

//display a new table with whatever info you like

      var newTR = '<table><tr>' 
            + '<td>Display a result ' 
            + $('#userId').val() 
            + '</td></tr></table>';

    //append to your table,
    $('body').append(newTR);
});

希望这有一些帮助...

Answer 2

如果您的表单没有那么多输入而且您想要一个简单的脚本，那么这个小脚本将为您完成所有操作。

检查演示http://jsfiddle.net/yeyene/S4FT7/

$(document).ready(function(){
    $('#submit').on('click',function(){
        var st = '';
        $('#myForm input[type=text],input[type=password],select').each(function(){
            st = st+ '<td>'+$(this).val()+'</td>';
            $(this).val('');
        });
        $('#details').append('<tr>'+st+'</tr>');
    });
});

Answer 3

JQuery和CSS应该做的工作..隐藏和显示表单

首先是表格，如你所希望的那样。

<tr>
 <td>
   <div class="myForm hide">
     <form>...</form>
   </div>
 </td>
</tr>

在你的JQuery / javascript中

$('.button').click(function(){
  $('.myForm').show();
});

这应该可以解决问题

如何在提交时在同一页面上的表格中显示表单数据？

3 个答案: