-2

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

这是我的表格

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

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

4

3 回答 3

2

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

您可能希望查看 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);
});

希望这个对你有帮助...

于 2013-07-03T03:03:40.960 回答
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>');
    });
});
于 2013-07-03T03:27:13.017 回答
1

JQuery 和 CSS 应该做的工作.. 隐藏和显示形式

首先是表格，就像您在表格的一行中想要的那样。

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

在你的 JQuery/javascript

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

这应该可以解决问题

于 2013-07-03T02:48:40.000 回答