如何在按下提交后在同一页的表格中显示表单数据 - How to display form data in a table on the same page upon pressing submit?

How to display form data in a table on the same page upon pressing submit?

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

这是我的表格

<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";
    }
}

我想在按下提交键后，将一个新行添加到表格中，单元格中包含表单数据，但我不知道从哪里开始。

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

检查DEMOhttp://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>');
    });
});

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

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

示例代码可能看起来像：

客户端jquery后调用

.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);
});

希望这能有所帮助。。。

JQuery和CSS应该完成这项工作。。隐藏和显示形式

在表格的一行中，根据您的需要，首先填写表格。

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

在您的JQuery/javascript 中

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

这应该可以完成