jQueryを使いformでsubmitした時の位置を保持する方法について

タイトルのやり方を調べていると下記サイトが参考になったのですが、
https://office-obata.com/report/memorandum/post- …

下記のようにformが複数ある場合、商品1や商品2に投票しても商品3に投票されてしまいます。
商品1　0票　[投票する]
商品2　0票　[投票する]
商品3　10票　[投票する]

<form method="POST" action="./vote.php" id="form1">
<input type="hidden" name="vote" value="1">
<input type="hidden" name="shohin" value="商品1">
<input type="hidden" name="position" value="0">
<input type="button" value="投票する" class="button">
</form>
<form method="POST" action="./vote.php" id="form2">
<input type="hidden" name="vote" value="2">
<input type="hidden" name="shohin" value="商品2">
<input type="hidden" name="position" value="0">
<input type="button" value="投票する" class="button">
</form>
<form method="POST" action="./vote.php" id="form3">
<input type="hidden" name="vote" value="3">
<input type="hidden" name="shohin" value="商品3">
<input type="hidden" name="position" value="0">
<input type="button" value="投票する" class="button">
</form>

どの部分を修正することで正しい投票ができるようになりますでしょうか。
下記のように修正してみたのですがうまくできませんでした。
<script>
$(document).ready(function()
{
window.onload = function (){ $(window).scrollTop(<?php echo $position; ?>);}
$("input[type=button]").click(function()
{
var position = $(window).scrollTop();
$("input:hidden[name=position]").val(position);
$("#form").submit();
});
});
</script>

↓

<script>
$(document).ready(function()
{
window.onload = function (){ $(window).scrollTop(<?php echo $position; ?>);}
$("input[type=button]").click(function()
{
var position = $(window).scrollTop();
$("input:hidden[name=position]").val(position);
$("#form1").submit();
});
});
</script>
<script>
$(document).ready(function()
{
window.onload = function (){ $(window).scrollTop(<?php echo $position; ?>);}
$("input[type=button]").click(function()
{
var position = $(window).scrollTop();
$("input:hidden[name=position]").val(position);
$("#form2").submit();
});
});
</script>
<script>
$(document).ready(function()
{
window.onload = function (){ $(window).scrollTop(<?php echo $position; ?>);}
$("input[type=button]").click(function()
{
var position = $(window).scrollTop();
$("input:hidden[name=position]").val(position);
$("#form3").submit();
});
});
</script>

質問者からの補足コメント

• アドバイスありがとうございます。
  formをまとめて一つにする方を是非やりたいと思いまして、下記のように変更してみました。
  
  <form method="POST" action="./vote.php" id="form">
  
  <input type="hidden" name="vote" value="1">
  <input type="hidden" name="shohin" value="商品1">
  <input type="hidden" name="position" value="0">
  <input type="button" value="投票する" class="button">

  No.1の回答に寄せられた補足コメントです。 補足日時：2021/12/23 20:07

• <input type="hidden" name="vote" value="2">
  <input type="hidden" name="shohin" value="商品2">
  <input type="hidden" name="position" value="0">
  <input type="button" value="投票する" class="button">
  
  <input type="hidden" name="vote" value="3">
  <input type="hidden" name="shohin" value="商品3">
  <input type="hidden" name="position" value="0">
  <input type="button" value="投票する" class="button">
  
  </form>

    補足日時：2021/12/23 20:08

• <script>
  $(document).ready(function()
  {
  window.onload = function (){ $(window).scrollTop(<?php echo $position; ?>);}
  $("input[type=button]").click(function()
  {
  var position = $(window).scrollTop();
  $("input:hidden[name=position]").val(position);
  $("input:hidden[name=vote]").val(vote);
  $("input:hidden[name=shohin]").val(shohin);
  $("#form").submit();
  });
  });
  </script>

    補足日時：2021/12/23 20:08

• しかし、今度は送信されなくなってしまいました。
  私がスクリプトに下記を追加したのが間違っていると思うのですが、上記のような書き方では送信されないのでしょうか。
  
  $("input:hidden[name=vote]").val(vote);
  $("input:hidden[name=shohin]").val(shohin);
  
  「複数の必要な値をセットして送信」の部分をもし可能でしたら詳しくおしえていただけないでしょうか。

    補足日時：2021/12/23 20:09

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/12/23 18:44

こんにちは

なぜ、formを3つ作らなければならないのかわかりませんけれど・・

そのままでやりたいのなら、
「押されたボタンのformをsubmitする」
ようにすれば、とりあえずは動作するのではないでしょうか？
イベント処理の中では、this値で発生要素を参照できますので、その親のform要素は
　$(this).parent()
で取得することができます。


一方で、どうせスクリプトからsubmitしているのですから、formをまとめて一つにしておいて、
「ボタンが押されたら、(positionと同様に)必要な値をセットして送信する」
ようにしておけば、同じ内容のformを複数作成する必要もなくなるのではないかと思います。

また、DOMreadyの中で再度onloadの設定をしていますけれど、loadだけで十分ではないのでしょうか。
（スクロール制御なので、画像も読み込んでからの方が確実かなと）

この回答へのお礼

アドバイスありがとうございました。
$(this).parent()
の方は取得できました。ありがとうございます。

ただ、ご指摘の通り、formをまとめて一つにする方に変更したいのですが、そちらはできておりません。
「複数の必要な値をセットして送信」する部分に参考になるページなどございましたら是非教えていただけると幸いです。

お礼日時：2021/12/24 03:56

No.4 回答者： Ogre7077 回答日時： 2021/12/24 15:49

複数の必要な値をセットして送信、する HTML の例です

ポイント
* 複数の投票を一つのフォームにまとめる
* ボタンでそのまま送信(submit)させる
* ボタンに関連する値はボタンの値(data-*)として持たせる
* 送信前に処理される、ボタン押した(click)イベントで値を整理する

<form id=vote>
_ <input type=hidden name=pos value="">
_ <input type=hidden name=sho value="">
_ <button type=submit
_ _ _ name=vote value=1 data-sho=X1>商品1に投票</button>
_ <button type=submit
_ _ _ name=vote value=2 data-sho=X2>商品2に投票</button>
_ <button type=submit
_ _ _ name=vote value=3 data-sho=X3>商品3に投票</button>
</form>
<script>
window.onload = function(){ $(window).scrollTop( ... ) };
$(function(){
_ $(document).on('click', 'form#vote button', function(){
_ _ var form = $(this.form);
_ _ form.find('input[name=pos]').attr('value', $(window).scrollTop());
_ _ form.find('input[name=sho]').attr('value', $(this).data('sho'));
_ _ return true;
_ })
})
</script>

ちょっとスクロールして商品3に投票した際のフォーム送信内容の例
* pos=1234&sho=X3&vote=3

この回答へのお礼

アドバイスありがとうございます。
ポイントをまとめていただきまして助かります。
ちょっと年末に向けてバタバタしそうなので、じっくりと勉強させていただきます。
ありがとうござました。

お礼日時：2021/12/24 18:16

No.3 回答者： sukitaro 回答日時： 2021/12/24 08:40

No2です。

$shohin = (isset($_POST['shohin']))? $_POST['shohin']: [0, 0, 0];

これは三項演算子なので、以下と同じです。

if (isset($_POST['shohin'])) {
$shohin = $_POST['shohin'];
}else{
$shohin = [0, 0, 0];
}

参考：https://www.php.net/manual/ja/language.operators …

php7.4で確認していますが、バージョンが違うと
他のところも動かないかもしれません。

この回答へのお礼

再度ありがとうございます。
ご指摘の通り、バージョンがかなり古いためかもしません。

お礼日時：2021/12/24 18:15

No.2 回答者： sukitaro 回答日時： 2021/12/23 19:32

参考サイトでも、入力値のチェックがされていないので、セキュリティ上の問題がありそうですが、とりあえずこんな感じでしょうか。

<?php
$position = 0;
$msg = null;
if ((isset($_REQUEST["position"]) == true)
&& (isset($_REQUEST["reset"]) != true)){
$position = $_REQUEST["position"];
$msg = "【ボタンが押されましたが、表示位置がキープされました。】";
}
$shohin = (isset($_POST['shohin']))? $_POST['shohin']: [0, 0, 0];
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>位置テスト</title>
<style type="text/css">
article {
width: 800px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCC;
text-align: center;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 600px;
padding-left: 30px;
}
p{
text-align: justify;
}
input[type=submit],
input[type=button]{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 29px;
}
.center{
text-align: center;
margin-bottom: 300px;
}
.time{text-align: right;}
.msg{
color: #F00;
text-align: center;
}
</style>
<script>
window.addEventListener('load',()=>{
document.scrollingElement.scrollTop = <?= $position ?>;
const VOTE = document.forms['vote'];
const BUTTONS = [...document.querySelectorAll('input[type=button]')];
document.addEventListener('click',(e)=> {
if(BUTTONS.includes(e.target)){
const position = document.scrollingElement.scrollTop;
const hidden = [...document.querySelectorAll('input[type=hidden]')]
let v = hidden[BUTTONS.indexOf(e.target)].value;
hidden[BUTTONS.indexOf(e.target)].value = parseInt(v) + 1;
hidden[3].value = position;
VOTE.submit();
}
},false);
},false);
</script>
</head>
<body>
<article>
<section><p class="time"></p><h1>フォームボタンクリックで表示位置のキープに対応</h1><p>下のフォームボタンを押して、プログラムに送信すると表示位置がキープした状態で再表示されます。</p><p>試しに、画面のかなり下にあるボタンを押してみてください。<br>表示位置がボタンの位置のままキープされます。</p><p class="center">↓ボタンはもう少し下にあります。↓</p><p class="center">↓ボタンはもう少し下にあります。↓</p><p class="center">↓ボタンはもう少し下にあります。↓</p></section>
<section>
<form name="vote" id="form" action="" method="post" enctype="application/x-www-form-urlencoded">
<input name="shohin[]" type="hidden" value="<?= $shohin[0] ?>">
<input name="shohin[]" type="hidden" value="<?= $shohin[1] ?>">
<input name="shohin[]" type="hidden" value="<?= $shohin[2] ?>">
<input name="position" type="hidden" value="0">
<p> 商品1 <?= $shohin[0] ?> 票 <input type="button" value="投票する"></p>
<p> 商品2 <?= $shohin[1] ?> 票 <input type="button" value="投票する"></p>
<p> 商品3 <?= $shohin[2] ?> 票 <input type="button" value="投票する"></p>
<input name="reset" type="submit" value="リセット">
</form>
<p class="msg"><?php echo $msg; ?></p>
</section>
</article>
</body>
</html>

この回答へのお礼

アドバイスありがとうございます。
実際にアップしてみたのですが、
$shohin = (isset($_POST['shohin']))? $_POST['shohin']: [0, 0, 0];
の部分でParse errorになってしまいました。
もうちょっと色々試してみます。

お礼日時：2021/12/24 04:00