名前、メールアドレス、購読などのフィールドがあるお問い合わせフォームがあります。サブスクライブは、ユーザーが同時に複数のオプションを選択できるようにするチェックボックス(配列)のセットです。
重要:
javascriptがなくてもフォームを機能させるつもりなので、「subscribe[]」という入力名が必要であることに注意してください。チェックボックスのHTMLコードを見るだけで、私が何を意味するのかがわかります。
完全なソースコード(デバッグあり):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Posting of checkbox array</title>
</head>
<body>
<form id="frm_contact" name="frm_contact" method="post" action="ajax_contact_us.php">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text" /><br />
<label for="email">Email</label>
<input type="text" name="email" id="email" class="text" /><br />
<label for="subscribe">Subscribe</label>
<input type="checkbox" class="subscribe" name="subscribe" value="email" id="subscribe_0" />Email
<input type="checkbox" class="subscribe" name="subscribe" value="sms" id="subscribe_1" />SMS
<br />
<input type="submit" name="sbt_send" id="sbt_send" value="Send" class="btn_submit" />
</form>
<div id="test"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#sbt_send').click(function(e) {
$('#test').html();
var subscribe = new Array();
$(".subscribe:checked").each(function() {
subscribe.push($(this).val());
});
//Prepare data to be sent
var dataString = $('#frm_contact').serialize();
$.ajax({
type: "POST",
url: "ajax_contact_us11.php",
data: dataString,
dataType: 'json',
cache: false,
success: (function(response)
{
if(response.error == 0)
{
alert('yes');
}
else
{
//alert('no');
$('#test').html('');
$('#test').append( response.message['name'] + '<br />'+
response.message['email'] + '<br />'+
response.check );
}
})
});
e.preventDefault();
});
});
</script>
</body>
</html>
//ajax_contact_us11.php
<?php session_start();
$errors = array();
$str = '';
if( !isset( $_POST['name'] ) || trim( $_POST['name'] ) == '' )
{
$errors['name'] = 'Enter name';
}
if( !isset( $_POST['email'] ) || trim( $_POST['email'] ) == '' )
{
$errors['email'] = 'Enter email';
}
if( !isset( $_POST['subscribe'] ) || trim( $_POST['subscribe'] ) == '' )
{
$errors['subscribe'] = 'Check at least one checkbox';
$str = $errors['subscribe'];
}
else
{
$str = $_POST['subscribe'];
}
if(count($errors))
{
$error = 1;
$message = $errors;
}
else
{
$error = 0;
$message = "success";
}
print json_encode(array('error' => $error, 'message' => $message, 'check' => $str));
die();
?>
問題:
ここには2つの問題があります。
チェックボックスの入力名としてsubscribe[]を使用している場合、両方がチェックされているか、一方だけがチェックされていても、チェックボックスの値を取得できません。
[]を削除すると、チェックボックスの名前に「subscribe []」ではなく単に「subscribe」を使用すると、2つチェックされている場合でも、チェックボックスの値を1つしか取得できません。
「subscribe[]」の代わりに「subscribe」を使えば簡単に解決できると思いますが、本当に「subscribe[]」を使う必要があります。JSが無効になっているときにフォームを機能させることはできますが、両方の値を正しく送信するには(両方のチェックボックスがオンになっている場合)、名前を「subscribe[]」にする必要があります。
では、両方のチェックボックスの値を取得し、同時に名前として「subscribe[]」を使用するにはどうすればよいでしょうか。
長い形を、たとえば日本酒などの最も基本的な形に分解したことに注意してください。現在のオプションにさらにチェックボックスを追加し、他の名前のチェックボックスの新しいセットも追加します。したがって、この質問の解決策を、フォームに追加する新しい入力セットに適用します。
私は1日半からこれに取り組んでおり、SOとGoogleの多くのソリューションを試しましたが、残念ながら、何も役に立ちませんでした。
私はすべての助けに感謝します。