5

さて、ここにアイデアがあります：

複数のフォームを処理する jQuery スクリプトを作成したいと考えています。すべてのフォームにはボタンがあります。このボタンをクリックすると、スクリプトはすべての入力フィールドの名前と値を $_POST でフォームのアクション URL に送信する必要があります。しかし、私はそれを機能させることはできません。

jQuery ファイルの 3 行目の .each をループしません。

jQuery:

$("input[type='button']").click(function(){
    var query = {};
    $(this).parent('form').children('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });

    $.post($(this).parent('form').attr('action'), query, function(data) {
        $("#dialog").html(data);
        $("#ui-id-1").html('Activate account');
        $("#dialog").dialog("open");
    }, 'json');
});

HTML:

<form action="/action/activateacc.php">
<table>
    <tr>
        <td>E-mail:</td>
        <td><input type="text" id="mail" name="mail" /></td>
        <td><img class="tick" id="mailIMG" width="20px" /></td>
    </tr>
    <tr>
        <td>Activation code:</td>
        <td><input type="text" id="code" name="code" /></td>
        <td><img class="tick" id="codeIMG" width="20px" /></td>
    </tr>
    <tr>
        <td>Choose organization-name:</td>
        <td><input type="text" id="name" name="name" /></td>
        <td><img class="tick" id="nameIMG" width="20px" /></td>
    </tr>
    <tr>
        <td></td>
        <td style="text-align:center"><input type="button" style="cursor:pointer" value="Activate account" /></td>
    </tr>
 </table>
 </form>
4

6 に答える 6

2

入力の名前/値を取得するには、フォームで.serialize()を使用するだけです。また、親は1レベルしか上がらないため、最も近いものを使用する必要があります

$("input[type='button']").click(function(){   
    var query = $(this).closest('form').serialize();
    $.post($(this).parent('form').attr('action'), query , function(data) {
        $("#dialog").html(data);
        $("#ui-id-1").html('Activate account');
        $("#dialog").dialog("open");
    }, 'json');
});
于 2013-01-22T15:23:09.640 に答える
0

.parent()DOM の 1 レベルだけ上がる - を使ってみて.closest()-find()そう

$(this).closets('form').find('input[type="text"]').each(function(){
于 2013-01-22T15:19:32.960 に答える
0

.find子.parentsを検索し、フォームを検索するために使用します

$(this).parents('form').find('input[type="text"]').each(function(){
        query[$(this).attr('name')] = $(this).val();
    });
于 2013-01-22T15:19:42.870 に答える
0

私がそれを読む最も簡単な方法は、.closest()（1つのレベルである親の代わりにずっと上に行く）とfind()（現在のjQueryオブジェクトを介してクエリを実行する）を使用することです：

$(this).closest('form').find('input[type="text"]').each(function(){ 
    query[$(this).attr('name')] = $(this).val();
});

jsFiddle デモ

于 2013-01-22T15:20:00.977 に答える
0

parent()DOM ツリーで 1 レベルだけ上に移動し、DOM ツリーでchildren()1 レベルだけ下に移動します。

構造が変更されないことが 100% 確実な場合 (お勧めしません。それほどきれいではありません)、もっと多くのタグを使用するかclosest()、DOM ツリーで指定された最も近いタグ名を取得する を使用してください。

于 2013-01-22T15:23:02.133 に答える
0

form組み込みの を使用するだけで、要素をクエリにシリアル化するという頭痛の種から解放されます$.serialize。

.serialize() メソッドは、標準の URL エンコード表記でテキスト文字列を作成します。一連のフォーム要素を表す jQuery オブジェクトで動作します。

あなたの場合：

var query = $(this).closest('form').serialize();
于 2013-01-22T15:23:20.290 に答える