0

次のスクリプトがあります。

<script type="text/javascript" >

$('form').each(function() {
    $(this).on('submit', function() {

var first_firstname = $(".first_firstname", this).val();
var first_lastname = $(".first_lastname", this).val();
var second_firstname = $(".second_firstname", this).val();
var second_lastname = $(".second_lastname", this).val();
var TeamName = $(".TeamName", this).val();
var dataString = 'first_firstname='+ first_firstname + '&first_lastname=' + first_lastname +
'&second_firstname=' + second_firstname + '&second_lastname=' + second_lastname + '&TeamName=' + TeamName;

 $.ajax({
type: "POST",
url: "data.php",
data: dataString,
success: function(){
window.setTimeout(function(data)
{
$('#propspectDiv').html('Team Name Added!');
$('#data').css("display","block");
$('#data').html(data);
}, 2000);
}

});

return false;
});

</script>

そして、mysql データベースを使用してページ上に多数のフォームを生成する次の php

<?php    

echo '<table class="greensmalltbl" cellspacing="10px" cellpadding="5px"><div id="propspectDiv"></div>';

    for ($i=1,  $o=$totalEntrants; $i<=$half; $i++, $o=$o-1) {

    $formid = $i;


echo "<div style='border:3px;'><form action='' method='post'>
<tr><td><input type='text' name='first_firstname' id='first_firstname' value='$firstName[$i]' />
<input type='text' name='first_lastname' id='first_lastname' value='$lastName[$i]' />
  Skill Level : ".$skill[$i]."</td></tr>";
echo "<tr><td>WITH</td></tr>";
echo "<tr><td><input type='text' name='second_firstname' id='second_firstname' value='$firstName[$o]' />
<input type='text' name='second_lastname' id='second_lastname' value='$lastName[$o]' /> Skill Level ".$skill[$o]."</td></tr>";
echo "<tr><td>Enter Team Name : <input type='text' name='TeamName' id='TeamName' value='' />
<input type='submit' name='submit' value='Submit'></form></td></tr>";

    }

echo '</table>';

?>

各フォームの TEAM NAME で db テーブルを更新したい

問題は、最初のフォーム入力のみが渡されることです。他のすべてのフォームは何もしません。ajax コードのさまざまなバリエーションを試しましたが、どれも機能しませんでした。誰でもここで問題を見つけることができますか

4

1 に答える 1

0

この行はフォームを返しません。

var parent = $(this).parent('form');

送信ボタンがタグ内trにラップされているためです。tdこれらのタグを削除するか ( で使用していないため無効ですtable)、コードを次のように更新します。

var parent = $(this).closest('form');

closest()要素のすべての祖先まで検索し、セレクターの最初の一致を返します。こちらのドキュメントをご覧ください: http://api.jquery.com/closest/

または、ページにフォームが 1 つしかない場合は、次のようにします。

var parent = $('form');

：： 編集 ：：

わかった。上記のすべてを忘れてください。コードの後半で親変数を使用していないようです。より重要な問題は、フォームの送信ボタンで Click イベントをキャッチしていても、実際にはフォームの送信イベントをキャッチしたいということです。

したがって、コードの最初の行を次のように変更します。

$('form').on('submit', function() {

また、HTML のコードが無効です。

<form action'' method='post' id='$formid'>

action''する必要があります action = ''

さらにエラーが発生する可能性があるため、これで問題が実際に解決されない可能性があります。次回は、質問を投稿する前にコードを検証してみてください。

：： 編集 ：：

最終編集、約束します。私はすぐにあなたのコードをもう一度調べましたが、複数のフォームがあるようです. これは、同じ ID を持つ異なる形式の要素を取得することを意味します。ID は、ページ全体で一意である必要があります。したがって、このような値を取得しようとすると、$("#second_firstname").val();うまくいきません。jQueryはあなたが何を意味するのかを知らないため、ページに複数回表示される可能性のあるすべての要素にはクラスが必要であり、IDを持つことはできません.

次に、次のように変更することで、フォームをループできます。

$('form').each(function() {
    $(this).on('submit', function() {

        var first_firstname = $(".first_firstname", this).val(); // . instead of # and use 'this' as context

        // and so on..
        // the rest of your code here.
    }
});

フォーム付きのテーブルはここで見ることができます

于 2013-05-02T15:33:48.393 に答える