Send multiple checkbox data to PHP via jQuery ajax()
我想通过jQuery的.ajax()在我的网站上提交一个POST表单,其中包含textarea字段和一个输入字段(type ="checkbox",其中包含任意/可变数量的复选框)。 PHP接收textarea数据,并向用户正确显示ajax响应。但是,似乎PHP没有收到复选框数据(是否已选中)。我怎样才能让它发挥作用?这是我的代码:
HTML:
1 2 3 4 5 6 7 | <form method="post" action="myurl.php" id=myForm> <textarea id="myField" type="text" name="myField"></textarea> <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" /> <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" /> ...(maybe some more checkboxes - dynamically generated as necessary) <input id="submit" type="submit" name="submit" value="Submit" onclick="submitForm()" /> </form> |
jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | function submitForm() { $(document).ready(function() { $("form#myForm").submit(function() { var myCheckboxes = new Array(); $("input:checked").each(function() { myCheckboxes.push($(this).val()); }); $.ajax({ type:"POST", url:"myurl.php", dataType: 'html', data: { myField:$("textarea[name=myField]").val(), myCheckboxes:myCheckboxes }, success: function(data){ $('#myResponse').html(data) } }); return false; }); }); |
现在,PHP
1 2 3 4 5 6 7 8 9 10 11 12 | $myField = htmlspecialchars( $_POST['myField'] ) ); if( isset( $_POST['myCheckboxes'] ) ) { for ( $i=0; $i < count( $_POST['myCheckboxes'] ); $i++ ) { // do some stuff, save to database, etc. } } // create the response $response = 'an HTML response'; $response = stripslashes($response); echo($response); |
一切都很好:当提交表单时,我的数据库中存储了一条新记录,响应被回复到网页,但不会发送复选框数据。我想知道哪些复选框已被选中(如果有的话)。我读过.serialize(),JSON等,但没有一个有用。我是否必须在jQuery和PHP中序列化/ JSON?怎么样?使用复选框发送表单数据时,有一种方法比另一种更好吗?我已经坚持了2天。任何帮助将不胜感激。提前谢谢!
是的,它与jquery.serialize()非常相似
HTML
1 2 3 4 5 6 | <form id="myform" class="myform" method="post" name="myform"> <textarea id="myField" type="text" name="myField"></textarea> <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" /> <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" /> <input id="submit" type="submit" name="submit" value="Submit" onclick="return submitForm()" /> </form> |
JQuery的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function submitForm() { var form = document.myform; var dataString = $(form).serialize(); $.ajax({ type:'POST', url:'myurl.php', data: dataString, success: function(data){ $('#myResponse').html(data); } }); return false; } |
现在PHP,我导出POST数据
1 |
你可以看到发送的所有复选框值。我希望它可以帮助你
1 2 3 4 |
您正在将复选框推送到错误的数组
看一下这个。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type="text/javascript"> function submitForm() { $(document).ready(function() { $("form#myForm").submit(function() { var myCheckboxes = new Array(); $("input:checked").each(function() { myCheckboxes.push($(this).val()); }); $.ajax({ type:"POST", url:"myurl.php", dataType: 'html', data: 'myField='+$("textarea[name=myField]").val()+'&myCheckboxes='+myCheckboxes, success: function(data){ $('#myResponse').html(data) } }); return false; }); }); } |
在myurl.php上你可以使用
1 | $.post("test.php", { 'choices[]': ["Jon","Susan"] }); |
所以我只是遍历选中的框并构建数组。 就像是。
1 2 3 4 5 | var data = { 'user_ids[]' : []}; $(":checked").each(function() { data['user_ids[]'].push($(this).val()); }); $.post("ajax.php", data); |
你也可以试试这个,
1 2 3 4 5 | var arr = $('input[name="myCheckboxes[]"]').map(function(){ return $(this).val(); }).get(); console.log(arr); |
你现在的代码似乎没问题。 使用此选项检查复选框数组包含的内容。 在php脚本的顶部添加此代码,看看是否将复选框传递给您的脚本。
1 |
';
出口;
代码> PRE>