[jQuery+php]input=textをjsで動的に増減させてその内容をphpで処理する

Reading Time: 1 minute

やったことなかったってのと、
知らず固定観念できちゃってたのとかで、
まあなんとかなった。

Contents

1 やりたいこと
2 中身
3 解説的なもの
4 感想というか

やりたいこと

手入力のフォーム（input[type=”text”]とか）を動的に増減できるようにする。
phpで受け取って、空欄を除けたりした上で煮るなり焼くなりできるように整える。

中身

「form.html」で入力したのを「check.php」で処理するとする。

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="scripts.js"></script>
<form action="check.php" method="post" accept-charset="utf-8">
	<ul class="addInput">
		<li><input type="email" name="email[]"></li>
		<li><input type="email" name="email[]"></li>
	</ul>
	<ul class="buttonset">
		<li><span class="add">ADD</span></li>
		<li><span class="remove">REMOVE<strong></strong></span></li>
	</ul>
	<input type="submit">
</form>

</ul>

<li><span class="remove">REMOVE<strong></strong></span></li>

</ul>

</form>

$(function(){
	//「ADD」を押したら増やす
	$('.add').click(function(){
		$('.addInput').append('<li><input type="email" name="email[]"></li>');
	});
	//「REMOVE」を押したら減らす
	$('.remove').click(function(){
		$('.addInput li:last-child').remove();
	});
});

$(function(){

//「ADD」を押したら増やす

$('.add').click(function(){

$('.addInput').append('<li><input type="email" name="email[]"></li>');

});

//「REMOVE」を押したら減らす

$('.remove').click(function(){

$('.addInput li:last-child').remove();

});

<?php
mb_language('ja');
mb_internal_encoding('UTF-8');
//変数にする
$email = $_POST["email"];
//配列内に空欄があったら削る
$email = array_filter($email,"strlen");
//添字を振り直す
$email = array_values($email);
?>
書き出し例
<ul>
<?php foreach($email as $emailvalue){echo "<li><p>".$emailvalue."</p></li>"; } ?>
</ul>

<?php

mb_language('ja');

mb_internal_encoding('UTF-8');

//変数にする

$email = $_POST["email"];

//配列内に空欄があったら削る

$email = array_filter($email,"strlen");

//添字を振り直す

$email = array_values($email);

書き出し例

<ul>

<?php foreach($email as $emailvalue){echo "<li><p>".$emailvalue."</p></li>"; } ?>

</ul>

解説的なもの

項目の増減はjsで簡単にできる。
ただこれを導入すると、空欄が出てくる可能性もある。
項目追加良いけど入力してないのが出たらどうするか、バリデーションで利用者側にストレスかけてもウザいだけじゃねえの？みたいな、これくらいならルールの押しつけをするほどじゃないんじゃないのこっちで済ませられそうじゃん。
みたいな感じのモヤモヤを整理しとかなきゃいけない。
そのためにphpの中で空白の削除作業を受け取りから書き出しの間に挟み込んである。

感想というか

checkboxで配列云々やるのは珍しくないんだけど、
それでしかやってこなかったおかげで、
checkboxじゃないとできないみたいな偏見というか、
誤った認識があった。

案の定というか、
まあやればできるよね。