自動的に追加された行の情報を追加した行の情報として扱いたい。

Question

■やりたいこと
自動的に追加された行の情報を追加した行の情報として扱いたい。

■実施したこと
INPUTテキスト「mail」のフォーカスを外した際、新たに1行追加されますが、
追加された行の「mail」欄に入力後、実行すると追加行が1行目に反映されてしまいます。
下記部分のname要素内の配列変数をname='Email[]'にするとうまく行きますが、
今度はSUBMIT時にフォーカスされた要素の取得ができなくなります。両方とも実装したいです。

<td><input type='mail' name='Email[$i]' class='mail'  value = '".$Email[$i]."'  ".$focus['Email['.$i.']'].">".$email_in."</td>

名前	mail
1行目	1行目
2行目	2行目

1行目の「mail」のフォーカスを外すと2行目が自動的に表示
実行すると2行目のmail欄に入力した情報が1行目のmail欄に反映されてしまう。

下記、全行

//最後にフォーカスされた要素を取得する処理
<script>
document.addEventListener('formdata',e=>{
  e.formData.append('focus',document.activeElement.name);
});
</script>

//mail欄のフォーカスが外れると1行追加される処理
<script>
$(function(){
    $('input.mail').on('blur', function(){
		$('#tbl tbody tr:last-child').clone(true).appendTo('#tbl tbody');
    });
});
</script>

$focus=["Email"=>""];
$focus[filter_input(INPUT_POST,"focus")]=" autofocus";

echo"
<form method='POST'>
<table id='tbl'>
<thead>
<tr><th>名前</th><th>mail</th></tr>
</thead>
<tbody>
";
$i = 1;
while( $i < 2 ){　//max「2」としていますが、DBに登録されているレコード分表示させる予定です。　
    echo"
    <tr>
    <td><input type='text' name='お名前' value='".$name[$i]."' ".$focus['お名前']."></td>
    <td><input type='mail' name='Email[$i]' class='mail'  value = '".$Email[$i]."'  ".$focus['Email['.$i.']'].">".$email_in."</td>
    </tr>
    ";
    $i++;
}
echo"
</tbody>
</table>
<input type='submit' value='保存'>
</form>
";

Comments

[yambejp]

> 1行目の「mail」のフォーカスを外すと2行目が自動的に表示

どの記載で実装しているのでしょうか？
$nameや$Emailとかも唐突に記載されていてなんだかわかりません

[test1234]

こちらになります。
//mail欄のフォーカスが外れると1行追加される処理
<script>
$(function(){
$('input.mail').on('blur', function(){
$('#tbl tbody tr:last-child').clone(true).appendTo('#tbl tbody');
});
});
</script>

[yambejp]

PHP関係ないですねblur処理で行を空で追加したいだけですね？

Answer 1

何をどうしたいのかイマイチ伝わってきませんが

<?PHP
$focus=filter_input(INPUT_POST,"focus");
$Email=filter_input(INPUT_POST,"Email",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY)?:[""];
$count=is_array($Email)?count($Email):1;
?>
<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.mail').on('blur', function(){
      var newname=$('#tbl tbody tr:last-child [type=mail]').attr('name').replace(/\d+/,r=>Number(r[0])+1);
      $('#tbl tbody tr:last-child').clone(true).find('[type=mail]').attr('name',newname).end().find('input').val("").end().appendTo('#tbl tbody');
    });
});
</script>
<form method='POST'>
<table id='tbl'>
<thead>
<tr><th>名前</th><th>mail</th></tr>
</thead>
<tbody>
<?PHP
for($i=0;$i<$count;$i++){
?>
<tr>
<td><input type='text' name='お名前' value=''></td>
  <td><input type='mail' name='Email[<?=$i?>]' class='mail'  value = '<?=htmlspecialchars($Email[$i])?>' <?=$focus=="Email[$i]"?"autofocus":""?>  ></td>
</tr>
<?PHP
}
?>
  </tbody>
</table>
<input type='submit' value='保存'>
</form>

textのほうが「お名前」というnameだと値は引き継げなさそうですけど

Comments

[test1234]

確認しました。やりたいことと合致しています！
$focus=="Email[$i]"?"autofocus":""　の部分ですが、phpの記述で書きたいのですが、どのように記載すればよろしいでしょうか。

[tino1231]

「まだ回答を求めています」となっていたのでコメントします。
$focus=="Email[$i]"?"autofocus":""　の部分は、phpの記述だと思うので望まれてる回答だと思います。

[test1234]

この部分でエラーになってしまいます。ダブルクォーテーションをシングルにしても同様でした。。。

[yambejp]

私の環境ではエラーはでません
ご利用のPHPのバージョンと、具体的なエラー内容を提示下さい

[test1234]

php7.4.20です。
すみません、エラーではなく、フォーカス位置の記憶ができなくなりました。
全体を<?php～?>で括っているプログラムの書き方をしており、echoで下記のように記述しました。

echo "
<tr>
<td><input type='text' name='お名前' value=''></td>
<td><input type='mail' name='Email[$i]' class='mail' value = '$Email[$i]' $focus=='Email[$i]'?'autofocus':'' ></td>
</tr>
";

[yambejp]

echoの中で変数以外の式を評価させようとするのはNGです
こんなふうにしてください

<?PHP
for($i=0;$i<$count;$i++){
$autofocus=$focus=="Email[$i]"?'autofocus':'';
echo <<<eof
<tr>
<td><input type='text' name='お名前' value=''></td>
<td><input type='mail' name='Email[$i]' class='mail' value = '$Email[$i]' $autofocus ></td>
</tr>
eof;
}
?>

[test1234]

できました！ありがとうございます。もう一点お聞きしたいのですが、下記が理解できません。どのような処理でしょうか。POSTした際に変数$Emailが正しく反映されないことがあります。
$Email=filter_input(INPUT_POST,"Email",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY)?:[""];

[yambejp]

Emailというパラメータで渡されたpostデータを配列に受けています
もしEmailというパラメータ要素がないなら空文字一つ設定した配列
になるように工夫しています。

＞POSTした際に変数$Emailが正しく反映されない

具体的にどういう場合か例示下さい

[test1234]

行を11行目以上増やすと3行目のEmailが消えてしまいます。

[FKM]

postのmaxサイズがオーバーしてませんかね？

[test1234]

設定は８Mとなっています。特にファイルのアップロード等行っているわけではないので、そこまで容量はないと思うのですが。

[FKM]

その１１行目のEmailはどんな値が入ってきても消えますか？それともその１１行目に来ているメールに、なにかエスケープが必要な値が混じっていて、それがたとえば１行目に来てもエラーが来るかどうか検証してみましょう。

[test1234]

どんな値でも同じです。すみません、最初の質問内容はyambejpさんにご回答頂いた内容で解決しておりますのでベストアンサーでクローズさせて頂きます。私が色々手を加えて質問の内容がずれてしまいました。改めて新規の質問として書き込みさせて頂きます。

[test1234]

すみません、下記部分の処理がどのような処理なのか教えていただけますでしょうか。
var newname=$('#tbl tbody tr:last-child [type=mail]').attr('name').replace(/\d+/,r=>Number(r[0])+1);
$('#tbl tbody tr:last-child').clone(true).find('[type=mail]').attr('name',newname).end().find('input').val("").end().appendTo('#tbl tbody');

[FKM]

var newname=$('#tbl tbody tr:last-child [type=mail]').attr('name').replace(/\d+/,r=>Number(r[0])+1);
tbody trタグの最終tdタグが持っているinput type="mail"のプロパティ、nameの値を取得してその序数を1インクリメントする

後半はわかると思います。

Answer 2

name属性はEmail[]にして

フォーカスされた要素を取得する処理を次のようにする良いかもしれません。

document.addEventListener('formdata',e=>{
	var elements = [].slice.call( document.querySelectorAll('[type="mail"]'));
	var index = elements.indexOf(document.activeElement);
	e.formData.append('focus', 'Email['+(index+1)+']');
});

何番目のtype="mail"の要素がフォーカスされているかで判定しています。

Comments

[test1234]

ありがとうございます。ご提示いただいたソースで試してみましたが、変わらずでした。