php - JQUERYを使用して、選択した単一のフォーム値をポストさせたい

キー/値の配列を生成し、それをスクロールしてフォーム内に一連の「a」タグを生成します。 JQuery に「a」タグのどれがクリックされたかを検出してフォームを送信させ、値ではなく KEY が送信されるようにしたいと考えています。 JQuery 関数は、私が作成した test.php ファイルでは動作していないようです。

<?php if(isset($_GET['id'])) {
    echo '<h2>URL parameter passed by $_GET</h2>' ;
    echo '<pre>' ;
        echo print_r($_GET) ;
    echo '</pre>' ; 
} elseif(isset($_POST['id'])) {
    echo '<h2>URL parameter passed by $_POST</h2>' ;
    echo '<pre>' ;
        echo print_r($_POST) ;
    echo '</pre>' ; 
}

?>
<style>
    table {
        width:50%;
    }
    td {
        width:25%;
        border:1pt solid black;
        margin:0px;
    }
</style>
<?php 
    // Build Indexed Array
    $fruit[0] = 'Orange' ;
    $fruit[1] = 'Apple' ;
    $fruit[2] = 'Banana' ;

    echo '<pre>' ;
        echo print_r($fruit) ;
    echo '</pre>' ; 

    // Form definition
    echo '<form name="groupform" id="groupform" action="test.php" method="post">' ;
    echo '<table>' ;
    echo '<tr><td>Array values</td><td>Simple A tag</td><td>Regular submit button</td><td>A tag with class submit</td></tr>' ;
    for($key = 0; $key < count($fruit); $key++) {
      echo '<tr>' ;
      // Array Values
      echo '<td>Index is ' . $key . ', value is ' . $fruit[$key] . '</td>' ;
      // Simple A tag
      echo '<td><a href="?id=' . $key . '">' . $fruit[$key] . '</a></td>' ;
      // Regular submit button
      echo '<td><input type="submit" name="id" id="id" value="' . $fruit[$key] . '"></td>' ;
      // A tag with class submit
      echo '<td><a href="" class="submit" name="id" id="id" value="' . $key . '">' . $fruit[$key] . '</a></td>' ;
      echo '</tr>' ;
    }
    echo '<tr><td></td><td>Functions correctly, but don&apos;t want to use a URL parameter to send the key</td><td>Can&apos;t get this to post the key instead of the value</td><td>Ideally want to style it as an a tag, but post the key</td></tr>' ;
    echo '</table>' ;
    echo '</form>' ;
 ?>
<script src="/scripts/jquery-3.3.1.js"></script>
<script>
  $(function(){
    // when clicking the submit button
    $('.submit').click(function(){
        // Get the value of the clicked a tag
        var usethisID = $(this).val();
        alert(usethisID);
        // submit the form
        // BUT POST the value of usethisID as id
        $('#groupform').submit();
        });
    });
</script>

このスニペットには jQuery ライブラリが含まれていないため、$ は明示的に設定するまで jQuery への参照として認識されません。

2020 年 9 月 4 日 19:55

ダン、ありがとう、初心者のエラーです! JQuery 関数の直前に追加しましたが、問題は解決していないようです。問題は関数自体にあると思います。これは確かに、「ユーザーが submit クラスの要素をクリックした場合、フォームを送信する」と言っているのでしょう。しかし、「読めない」のです。実際にクリックされたタグの値を取得し、それをフォームが送信する値にします。私は正しいエリアで狩りをしていますか?

2020 年 9 月 4 日 20:49

申し訳ありませんが、現在 usethisID に値を読み取っていますが、空のようです。この値を投稿の一部として送信するように JQuery にまだ指示していません。

2020 年 9 月 4 日 21:05

var usethisID = $(this).attr("value");

DOM では、同じ 'id' を持つタグを使用できないことに注意してください。 各 id='' には一意の値が必要です。 https://developer.mozilla.org/en-US/docs/Web/API/Element/id

そこで私は提案します内部の $key を使用して各「id」を構築します: id_XXXX

echo '<td><a href="" class="submit" name="id" id="id_'.$key.'" value="' . $key . '">' . $fruit[$key] . '</a></td>' ;

jQuery では、id から $key を抽出します。

<script>
  $(function(){
    // when clicking the submit button
    $('.submit').click(function(){
        // Get the value of the clicked a tag
        var index = $(this).attr("id");
        var usethisID = index.substring(index.indexOf("_")+1 );

        alert(usethisID);

        // submit the form
        // BUT POST the value of usethisID as id
        $('#groupform').submit();
        });
    });
</script>

続きです。

_テディ_

1

ありがとうテディ。これはうまくいきました。useThisID は間違いなく正しく設定されています。私の関数はまだ値を適切にポストしていませんが、それを解決していきます...

2020 年 9 月 5 日 17:35