2012-03-17 11 views
1

を返します。jQueryの.serialize()私は、テーブル内のこのフォームを持って空の

<table id="fields"> 
    <form method="post" id="accountform"></form> 
    <tbody><tr><td class="key">First Name:</td><td class="value">bla bla</td></tr> 
    <tr><td class="key">Last Name:</td><td class="value">bla bla</td></tr> 
    <tr><td class="key">Email:</td><td class="editable"><input type="text" class="textbox" value="blabla" name="input0"></td></tr> 
    <tr><td class="key">Cell Number:</td><td class="editable"><input type="text" class="textbox" value="123-456-7890" name="input1"></td></tr> 
    <tr><td class="key">Extension:</td><td class="editable"><input type="text" class="textbox" value="1234" name="input2"></td></tr> 
    <tr><td class="key">Authority Level:</td><td class="value">Admin</td></tr> 
    <tr><td align="right" colspan="2"><input type="submit" value="Save" id="submit"></td></tr> 
</tbody></table> 

Javascriptを/ jQueryの:

$(document).ready(function(){ 
    $("form#accountform").submit(function() { 
     alert($(this).serialize()); 
    }); 
}); 

私は警告が空白に出てくるフォームを送信します。 :| 私は本当になぜこれが起こるか考えていません。各テキストボックスには名前があります。私は前に(テーブルの中で)これに似たフォームをシリアライズしました。

編集: これは、 'オリジナルの' HTML(jQueryとブラウザがそれを編集する前に)次のとおりです。

<table id="fields"> 
    <form method="post" id="accountform" action=""> 
    <tr><td class="key">First Name:</td><td class="value"><?php echo $_SESSION['firstname']; ?></td></tr> 
    <tr><td class="key">Last Name:</td><td class="value"><?php echo $_SESSION['lastname']; ?></td></tr> 
    <tr><td class="key">Email:</td><td class="editable"><?php echo $_SESSION['email']; ?></td></tr> 
    <tr><td class="key">Cell Number:</td><td class="editable"><?php echo formatPhone($_SESSION['phone']); ?></td></tr> 
    <tr><td class="key">Extension:</td><td class="editable"><?php echo $_SESSION['ext']; ?></td></tr> 
    <tr><td class="key">Authority Level:</td><td class="value"><?php echo authToName($_SESSION['auth']); ?></td></tr> 
    <tr><td align="right" colspan="2"><input type="submit" value="Edit" id="submit"/></td></tr> 
    </form> 
</table> 

そして、これはテキストボックスでテキストを置き換えることjQueryのです:

$("td.editable").each(function(index) { 
       $(this).html("<input type='text' class='textbox' value='"+$(this).html()+"' name='input"+index+"'/>"); 
}) 

答えて

3

問題は間違いなくマークアップです:

<table id="fields"> 
    <form method="post" id="accountform" action=""> <!-- Form does not go in the table --> 
    <tr>...</tr> 
     ... 
    <tr>...</tr> 
    </form> <!-- Form does not go in the table --> 
</table> 

はテーブルに置く代わり<form>タグであなたのテーブルを包みます。

<form method="post" id="accountform" action=""> 
    <table id="fields"> 
     <tr><td class="key">First Name:</td><td class="value"><?php echo $_SESSION['firstname']; ?></td></tr> 
     <tr><td class="key">Last Name:</td><td class="value"><?php echo $_SESSION['lastname']; ?></td></tr> 
     <tr><td class="key">Email:</td><td class="editable"><?php echo $_SESSION['email']; ?></td></tr> 
     <tr><td class="key">Cell Number:</td><td class="editable"><?php echo formatPhone($_SESSION['phone']); ?></td></tr> 
     <tr><td class="key">Extension:</td><td class="editable"><?php echo $_SESSION['ext']; ?></td></tr> 
     <tr><td class="key">Authority Level:</td><td class="value"><?php echo authToName($_SESSION['auth']); ?></td></tr> 
     <tr><td align="right" colspan="2"><input type="submit" value="Edit" id="submit"/></td></tr> 
    </table> 
</form> 

作業fiddle(PHPコードのサブラインには、プレーンテキストの値が入ります)。

+0

うわー、それは動作します。それは私が他のフォームを同じように設定し、それらの作品をシリアライズするので、奇妙です。 Hm。私は戻ってそれらを修正します。どの答えが正しいと思いますか?あなたは問題の後半を解決し、Blenderは最初の問題を解決しました。 – fruitcup

+0

それはあなたが答えることができる質問です。 :) – pete

2

<form>要素が途中で終了します(終了タグのすぐ隣にある終了タグを参照してください)。

ではなく、このHTMLを試してみてください:

<form method="post" id="accountform"> 
    <table id="fields"> 
    <tbody> 
     <tr><td class="key">First Name:</td><td class="value">bla bla</td></tr> 
     <tr><td class="key">Last Name:</td><td class="value">bla bla</td></tr> 
     <tr><td class="key">Email:</td><td class="editable"><input type="text" class="textbox" value="blabla" name="input0"></td></tr> 
     <tr><td class="key">Cell Number:</td><td class="editable"><input type="text" class="textbox" value="123-456-7890" name="input1"></td></tr> 
     <tr><td class="key">Extension:</td><td class="editable"><input type="text" class="textbox" value="1234" name="input2"></td></tr> 
     <tr><td class="key">Authority Level:</td><td class="value">Admin</td></tr> 
     <tr><td align="right" colspan="2"><input type="submit" value="Save" id="submit"></td></tr> 
    </tbody> 
    </table> 
</form>​ 
+0

非常に奇妙ですね!ページが最初に読み込まれたときに、フォーム内に入力フィールドがないため、ブラウザが自動的にタグを早く閉じてしまったようです。実行時に、テーブルにフィールドを挿入するjqueryがありますが、フィールドが何もしないようにフォームが既に閉じられているようです。 さらに調査する必要があります。 – fruitcup

+0

どのように要素を挿入していますか?そのコードも投稿してください。 – Blender

+0

無効なマークアップのためにこれが実行されている可能性があります。私は、元のHTML(jqueryの前に)とそれを変更するコードを投稿します。 – fruitcup

関連する問題