自動的に追加された行の値が引き継がれない

Question

■やりたいこと
下記画像ののようなシステムを構築しています。
・数量のフォーカスを外すと1行追加される
・SUBMIT時フォーカスされたinputの位置を保持
ですが、自動的に追加された行の値が引き継がれなくなってしまい、困っています。
上手くいくときもあるのですが、検証してもパターンがわかりません。お手数ですが、ご教示お願いします。

■検証したところ、追加された行に入力すると配列の引継ぎがうまくできていないようです。　

<script>
$(function(){
    $('input.suryo').on('blur', function(){
      var newname=$('#tbl tbody tr:last-child [type=text]').attr('name').replace(/\d+/,r=>Number(r[0])+1);
      $('#tbl tbody tr:last-child').clone(true).find('[type=text]').attr('name',newname).end().find('input').val('').end().appendTo('#tbl tbody');
    });
});
</script>

■不具合時のダンプ
array(2) { [0]=> string(1) "1" [1]=> string(1) "6" } array(1) { [0]=> string(1) "2" } array(1) { [0]=> string(1) "3" }

下記全容

<?PHP

$focus=filter_input(INPUT_POST,'focus');
$h_code=filter_input(INPUT_POST,'h_code',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY)?:[''];
$name=filter_input(INPUT_POST,'name',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY)?:[''];
$suryo=filter_input(INPUT_POST,'suryo',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY)?:[''];
var_dump($h_code);
var_dump($name);
var_dump($suryo);
$count=is_array($h_code)?count($h_code):1;

echo"
<script>
document.addEventListener('formdata',e=>{
  e.formData.append('focus',document.activeElement.name);
});
</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script>
$(function(){
    $('input.suryo').on('blur', function(){
      var newname=$('#tbl tbody tr:last-child [type=text]').attr('name').replace(/\d+/,r=>Number(r[0])+1);
      $('#tbl tbody tr:last-child').clone(true).find('[type=text]').attr('name',newname).end().find('input').val('').end().appendTo('#tbl tbody');
    });
});
</script>
<form method='POST'>
<table id='tbl'>
<thead>
<tr><th>コード</th><th>名前</th><th>数量</th></tr>
</thead>
<tbody>
";


for($i=0;$i<$count;$i++){

	$autofocus_h=$focus=="h_code[$i]"?'autofocus':'';
	$autofocus_n=$focus=="name[$i]"?'autofocus':'';
	$autofocus_s=$focus=="suryo[$i]"?'autofocus':'';

	echo "
	<tr>
	<td><input type='text' name='h_code[$i]' class='h_code' value = '$h_code[$i]' $autofocus_h ></td>
	<td><input type='text' name='name[$i]' class='name' value = '$name[$i]' $autofocus_n ></td>
	<td><input type='text' name='suryo[$i]' class='suryo' value = '$suryo[$i]' $autofocus_s ></td>
	</tr>
	";

}

echo"
  </tbody>
</table>
<input type='submit' value='保存'>
</form>
"; 
?>

Comments

[m.ts10806]

POSTした情報はそれぞれ想定どおりでしょうか。デバッグしてみてください

[test1234]

質問内容の画像を更新しました。上手くPOSTできていないようです。

[FKM]

普通に動いてますけどね、テストした環境はChromeです。

[m.ts10806]

デバッグの結果をご提示ください。

[test1234]

FKMさんがおっしゃるようにうまく行くこともあるので、どこをどうデバッグすればよいのかわかりません・・・。

[m.ts10806]

入力した内容がきているか出力して確認するだけですよ。

[FKM]

うまく行かないパターンは一度クローンして、そのまま値を入力してENTERした場合でした。
そのまま入力だけしてENTERだとうまくいくようです。

[test1234]

m.ts10806さん
そのデバッグであれば画像を更新したのでそちらを参照頂きたいです。値がPOSTできていれば初期値として残るはずですが、2行目に正しく反映されていないです。

[test1234]

引き続き回答受け付けています。

Answer 1

テーブル要素の行をcloneする場合はtrのディープコピーをそのまま使うようにした方がいいです。どうやら手動で作成している部分が悪さをしているようです。また、last-childだと同じ子の列td(name=ho_code[])しか引っ張ってこないので、first-of-typeにしています。

$(function(){
    $('input.suryo').on('blur', function(){
      $('#tbl tbody tr:first-of-type').clone(true,true).find('input').val('').end().appendTo('#tbl tbody');
    });
});

また、filter_inputは自動でnull判定してくれるので、以下の記述で問題ないですし、inputのnameの変数も空オブジェクトで対応できます。

これで希望通りの動きをしてくれるのでは？

<?PHP

$focus=filter_input(INPUT_POST,'focus');
$h_code=filter_input(INPUT_POST,'h_code',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$name=filter_input(INPUT_POST,'name',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$suryo=filter_input(INPUT_POST,'suryo',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
var_dump($h_code);
var_dump($name);
var_dump($suryo);
$count=is_array($h_code)?count($h_code):1;

echo"
<script>
document.addEventListener('formdata',e=>{
  e.formData.append('focus',document.activeElement.name);
});
</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script>
$(function(){
    $('input.suryo').on('blur', function(){
      $('#tbl tbody tr:first-of-type').clone(true,true).find('input').val('').end().appendTo('#tbl tbody');
    });
});
</script>
<form method='POST'>
<table id='tbl'>
<thead>
<tr><th>コード</th><th>名前</th><th>数量</th></tr>
</thead>
<tbody>
";


for($i=0;$i<$count;$i++){

$autofocus_h=$focus==$h_code[$i]?'autofocus':'';
$autofocus_n=$focus==$name[$i]?'autofocus':'';
$autofocus_s=$focus==$suryo[$i]?'autofocus':'';
    echo "
    <tr>
    <td><input type='text' name='h_code[]' class='h_code' value = '$h_code[$i]' $autofocus_h ></td>
    <td><input type='text' name='name[]' class='name' value = '$name[$i]' $autofocus_n ></td>
    <td><input type='text' name='suryo[]' class='suryo' value = '$suryo[$i]' $autofocus_s ></td>
    </tr>
    ";

}

echo"
  </tbody>
</table>
<input type='submit' value='保存'>
</form>
";
?>

Comments

[test1234]

フォームの処理的には問題ありません！ただ、「SUBMIT時フォーカスされたinputの位置を保持」ができないです。

[test1234]

下記にするとinputのフォーカスは保持されますが、今度はPOSTがうまく行きません（2行目に入力した値が1行目に反映され、1行だけになる）。
<td><input type='text' name='h_code[$i]' class='h_code' value = '$h_code[$i]' $autofocus_h ></td>
<td><input type='text' name='name[$i]' class='name' value = '$name[$i]' $autofocus_n ></td>
<td><input type='text' name='suryo[$i]' class='suryo' value = '$suryo[$i]' $autofocus_s ></td>

[FKM]

focusのところ変数になってなかったですね
先程の回答を以下に差し替えてみてください。これでいけるかと

$autofocus_h=$focus==$h_code[$i]?'autofocus':'';
$autofocus_n=$focus==$name[$i]?'autofocus':'';
$autofocus_s=$focus==$suryo[$i]?'autofocus':'';

[test1234]

フォームの処理的には問題ありませんが、「SUBMIT時フォーカスされたinputの位置を保持」ができませんでした。。。

[FKM]

現状だとautofocusの取得部分に誤りがありますね。方法としては
activeElementを使って対象のinputの番号を取得、それをhiddenに格納してPHP内で突き合わせ
これで対処できるはずです。

[test1234]

はい、差し替え頂いたものをコピペしても同じでした。EnterキーでSUBMITしても、「保存」ボタンを押しても、最終フォーカスが保持されません

[test1234]

phpのバージョンは7.4.20です

[FKM]

$autofocus_?に代入される部分を追跡すればそのフォーカス部分がなぜ今の記述のままじゃ駄目なのかわかると思いますよ。

[test1234]

追跡すると、cloneで追加された行だけSUBMIT前に値を入力すると先頭の”h_code”がフォーカスされてしまいます。

[FKM]

var_dump($focus)をプログラム中に記述して、本当に欲しい$focusの値が代入されているか追跡してみてください。

[test1234]

はい、それは既に実施しております。「cloneで追加された行だけSUBMIT前に値を入力すると先頭の”h_code”がフォーカスされてしまいます。」一度submitした後であれば、inputの値もフォーカス位置も保持されますが、CLONEされた直後だけうまく行きません。

[test1234]

すみません、「activeElementを使って対象のinputの番号を取得、それをhiddenに格納してPHP内で突き合わせ」この記述方法がわからないのでご教示頂きたいです。

[FKM]

行の値は引き継がれているんですよね。そことは別問題のロジックになります。

要はフォーカスしたx番目のinputタグの序数をスクリプト内でhiddenのvalueに格納して、それとループ文のインデックス番号を突き合わせ、一致しているときにautofocusを代入するというやり方です。

[test1234]

>>それとループ文のインデックス番号を突き合わせ、一致しているときにautofocusを代入するというやり方です。
これは理解できているのですが、

>>フォーカスしたx番目のinputタグの序数をスクリプト内でhiddenのvalueに格納
この書き方がわからず困っています。

[FKM]

フォーカスしたinputはdocument.activeElementで取得できます。これをイベントメソッドと合わせます。

[test1234]

話が戻ってしまうのですが、ですので2つ前のコメント「activeElementを使って対象のinputの番号を取得方法がわからない」と記述しました。activeElementの使い方をインターネットで調べてもフォーカスしたinputの行番号まで取得する方法がわかりませんでした。