如何在按下提交後在同一頁面的表格中顯示錶單數據？

-3

如何在按下提交按鈕時在同一頁面的表格中顯示錶格數據？如何在按下提交後在同一頁面的表格中顯示錶單數據？

這是我的形式

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

我想在按下提交被添加到表的新行的單元格中的表單數據但我不知道從哪裏開始。

來源

2013-07-03 abcd1234123123

阻止通常的提交表單的使用jQuery和Ajax – Olrac

如果你想留在同一個頁面不使用提交，使用按鈕類型，而不是 – CME64

如果在窗體中有沒有那麼多投入，你想一個簡單的腳本，該腳本小會做一切爲您。

檢查DEMO 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-03 03:27:13 yeyene

jQuery和CSS應該做的工作..隱藏和形式

一是形式，正如你在表中的行想要的節目。

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

在你的JQuery/JavaScript的

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

這應該做的伎倆

來源

2013-07-03 02:48:40

我不想隱瞞或顯示錶格。我想要的是當按下提交按鈕時，一個新行將被添加到表格中的表單數據。 – abcd1234123123

因此每行可能有多行和一個表單？ –

不..形式不是表格的一部分。表格在表格之外。如果表單多次提交，可能會有很多行。 – abcd1234123123

一般來說，考慮到你正在使用後的形式方法，則可以將數據發送到一個腳本被處理。然後將使用該腳本的響應來生成新表。在發送到服務器端腳本（如php）之前，可以使用客戶端腳本（javascript/jquery）來驗證您的表單。

您可能會喜歡看jquery .serialize函數，因爲它提供了一種簡單的方法將數據發送到服務器端腳本，並操縱返回的數據。

示例代碼可能看起來像：

客戶端的jQuery POST調用

.post(serverSideScript.php',$('#yourFormId').serialize()).success(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); 

}

這個調用 genResults功能

如果你不想要/需要處理表單然後客戶端腳本是你的朋友。只需在表單提交上創建一個表格。

使用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-03 03:03:40 lukeocom

如何在按下提交後在同一頁面的表格中顯示錶單數據？

回答

相關問題