-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

フォームにそれほど多くの入力がなく、単純なスクリプトが必要な場合は、この小さなスクリプトで十分です。

デモをチェック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 に答える
2

一般的に言えば、フォーム メソッドとして 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);
});

これが何かの助けになることを願っています...

于 2013-07-03T03:03:40.960 に答える
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 に答える