不能'使用ajax发送复选框数组

Here is my HTML :

 <form method="post" action="<?php echo get_template_directory_uri(); ?>/mailer.php">
                   <div class="formRow alignCenter">
                    <input type="text" class="w25" name="name" data-validation="length" data-validation-length="min1" placeholder="نام و نام خانوادگی" />
                    <input type="text" class="w25" name="email" data-validation="email" placeholder="ایمیل" />
                    <input type="text" class="w30" name="phone" data-validation="number" placeholder="شماره تماس" />
                    <div class="clear"></div>
                    </div>
                    <div class="formRow">
                        <span class="green"><i class="fa fa-cog"></i> هسته سایت:</span>
                        <div class="horSpacer"></div>
                        <input type="radio" name="website_core" value="CMS" checked><label for="website_core"><abbr title="CMS ها اسکریپت هایی از پیش نوشته شده و آماده استفاده می باشند. استفاده از آنها باعث تسریع و کاهش هزینه در پروژه می شود.">CMS</abbr></label>
                        <div class="horSpacer small"></div>
                        <input type="radio" name="website_core" value="پرتال اختصاصی"><label for="website_core">پرتال اختصاصی</label>
                    </div>
                    <div class="formRow">
                        <span class="green"><i class="fa fa-wrench"></i> نوع وب سایت:</span>
                        <div class="horSpacer"></div>
                        <input type="radio" name="website_type" value="وب سایت شخصی" checked><label for="website_core">وب سایت شخصی</label>
                        <div class="horSpacer small"></div>
                        <input type="radio" name="website_type" value="وب سایت شرکتی"><label for="website_core">وب سایت شرکتی</label>
                        <div class="horSpacer small"></div>
                        <input type="radio" name="website_type" value="پرتال سازمانی"><label for="website_core">پرتال سازمانی</label>
                        <div class="horSpacer small"></div>
                        <input type="radio" name="website_type" value="فروشگاه اینترنتی"><label for="website_core">فروشگاه اینترنتی</label>
                        <div class="horSpacer small"></div>
                        <input type="radio" name="website_type" value="سایر"><label for="website_core">سایر</label>
                        <div class="horSpacer small"></div>
                        
                    </div>
                    <div class="formRow">
                        <span class="green"><i class="fa fa-wrench"></i> خدمات:</span>
                        <div class="horSpacer"></div>
                        <input type="checkbox" name="website_services[]" value="راه اندازی کامل" id="wholeWebsite" checked><label for="website_core">راه اندازی کامل وب سایت</label>
                        <div class="horSpacer small"></div>
                        <input type="checkbox" name="website_services[]" value="طراحی PSD" id="wholeWebsite2" checked><label for="website_core">طراحی گرافیک و PSD</label>
                        <div class="horSpacer small"></div>
                        <input type="checkbox" name="website_services[]" value="تبدیل PSD به HTML" id="wholeWebsite3" checked><label for="website_core">تبدیل PSD به HTML</label>
                        <div class="horSpacer small"></div>
                        <input type="checkbox" name="website_services[]" value="پیاده سازی روی اسکریپت" id="wholeWebsite4" checked><label for="website_core">پیاده سازی روی اسکریپت</label>
                    </div>
                    <div class="formRow">
                        <span class="green"><i class="fa fa-wrench"></i> خدمات ویژه: </span>
                        <div class="horSpacer"></div>
                        <input type="checkbox" value="سئو" name="website_VIPservices"><label for="website_core"><abbr title="جایگاه بهتر سایت شما در نتایج جست و جوی گوگل">سئو و بهینه سازی / SEO</abbr></label>
                        <div class="horSpacer small"></div>
                        <input type="checkbox" value="ریسپانسیو" name="website_VIPservices"><label for="website_core"><abbr title="سازگاری کامل وب سایت شما با موبایل و تبلت ،علاوه بر کامپیوتر">ریسپانسیو / Responsive</abbr></label>
                        <div class="horSpacer small"></div>
                        <input type="checkbox" value="مدیریت" name="website_VIPservices"><label for="website_core"><abbr title="مدیریت وبسایت شما توسط ما انجام میشود.">ورود اطلاعات / Data Entry</abbr></label>
                        <div class="horSpacer small"></div>
                        <input type="checkbox" value="چند زبانه" name="website_VIPservices"><label for="website_core">چند زبانه</label>
                        <div class="horSpacer small"></div>
                        <input type="checkbox" value="تحویل فوری" name="website_VIPservices"><label for="website_core">تحویل فوری</label>
                    </div>
                    <div class="formRow">
                    <div class="colBig">
                    <div class="formRow">
                    <span class="blue"><i class="fa fa-wrench"></i> آدرس وب سایت مشابه آنچه مد نظر شماست را وارد کنید: </span>
                        <div class="horSpacer"></div>
                    <input type="text" class="w459 ltr" data-validation-optional="true" name="similarWebsite" value="http://www." />
                    <div class="clear"></div>
                    </div>
                    <div class="formRow">
                    <span class="orange"><i class="fa fa-wrench"></i> حدود بودجه در نظر گرفته شده برای پروژه: </span>
                        <div class="horSpacer"></div>
                      <input type="text" id="budjet" value="800000" name="budjet" data-slider="true" data-slider-theme="volume" data-slider-range="400000,5000000" data-slider-step="100000" data-slider-snap="true">
                    <div class="clear"></div>
                    </div>
                        </div>
                    <div class="colCustom1">
                    <div class="formRow" style="border-bottom:none;">
                    <span class="green"><i class="fa fa-wrench"></i> توضیحات لازم:</span>
                        <div class="horSpacer"></div>
                        <textarea class="w45" rows="5" name="desc" cols="132"></textarea>
                        <div class="clear"></div>
                    
                    <div class="clear"></div>
                    </div>
                        </div>
                    <div class="clear"></div>
                    </div>
                    <div class="formRow" style="border-bottom:none;">
                        <p class="button"><input type="submit" value="ثبت سفارش" id="submit2" /></p>
        <div class="loading"></div>
                    </div>
                    
                            

                </form>
        <div class="done">
<b>Thank you !</b> We have received your message. 
</div>
      </div>

And here is my jquery code :

<script>
    $(document).ready(function() {
        
        //if submit button is clicked
        $('#submit2').click(function () {        
            
            //Get the data from all the fields
            var name = $('input[name=name]');
            var email = $('input[name=email]');
            var phone = $('input[name=phone]');
            var webcore = $('input[name=website_core]');
            var webtype = $('input[name=website_type]');
            var webservice = $("input[name='website_services[]']:checked");
            var vipservices = $('input[name=website_VIPservices]');
            var similar = $('input[name=similarWebsite]');
            var budjet = $('input[name=budjet]');
            var desc = $('textarea[name=desc]');

        if (name.val()=='') {
            name.addClass('error');
            return false;
        } else name.removeClass('error');
        
        if (email.val()=='') {
            email.addClass('error');
            return false;
        } else email.removeClass('error');
        
        if (phone.val()=='') {
            phone.addClass('error');
            return false;
        } else phone.removeClass('error');
        
        if (desc.val()=='') {
            desc.addClass('error');
            return false;
        } else desc.removeClass('error');
            
            //organize the data properly
            var data = 'name=' + name.val() + '&email=' + email.val() + '&phone='
            + phone.val() + '&webcore=' + webcore.val() + '&webtype=' + webtype.val() + '&webservice=' + webservice.val() + '&vipservices=' + vipservices.val() + '&similar=' + similar.val() + '&budjet=' + budjet.val() + '&desc='  + encodeURIComponent(desc.val());

            //disabled all the text fields
            $('.text').attr('disabled','true');
            
            //show the loading sign
            $('.loading').show();
            
            //start the ajax
            $.ajax({
                //this is the php file that processes the data and send mail
                url: "<?php echo get_template_directory_uri(); ?>/mailer.php",    
                
                //GET method is used
                type: "GET",
                //pass the data            
                data: data,        
                
                //Do not cache the page
                cache: false,
                
                //success
                success: function (html) {                
                    //if mailer.php returned 1/true (send mail success)
                    if (html==1) {                    
                        
                        //show the success message
                        $('.done').fadeIn('slow');
                        
                    //if process.php returned 0/false (send mail failed)
                    } else alert('Sorry, unexpected error. Please try again later.');                
                }        
            });
            
            //cancel the submit button default behaviours
            return false;
        });    
    });    
</script>

and this is my PHP :

    <?php
    //Retrieve form data. 
    //GET - user submitted data using AJAX
    //POST - in case user does not support javascript, we'll use POST instead
    $name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
    $email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
    $phone = ($_GET['phone']) ?$_GET['phone'] : $_POST['phone'];
    $webcore = ($_GET['website_core']) ?$_GET['website_core'] : $_POST['website_core'];
    $webtype = ($_GET['webtype']) ?$_GET['webtype'] : $_POST['webtype'];
    $webservice = ($_GET['webservice']) ?$_GET['webservice'] : $_POST['webservice'];
    $vipservices = ($_GET['vipservices']) ?$_GET['vipservices'] : $_POST['vipservices'];
    $similar = ($_GET['similar']) ?$_GET['similar'] : $_POST['similar'];
    $budjet = ($_GET['budjet']) ?$_GET['budjet'] : $_POST['budjet'];
    $desc = ($_GET['desc']) ?$_GET['desc'] : $_POST['desc'];
    //flag to indicate which method it uses. If POST set it to 1
    if ($_POST) $post=1;

if (!$name) $errors[count($errors)] = 'Please enter your name.';
if (!$email) $errors[count($errors)] = 'Please enter your email.'; 
if (!$phone) $errors[count($errors)] = 'Please enter your comment.'; 
if (!$desc) $errors[count($errors)] = 'Please enter your comment.'; 

    //if the errors array is empty, send the mail
    if (!$errors) {
        //recipient - change this to your name and email
        $to = 'saaaa@gmail.com';    
        //sender
        $from = $name . ' <' . $email . '>';
        
        //subject and the html message
        $subject = 'ارسال سفارش از ' . $name;    
        $message = '
        <!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></head>
        <body>
        <table>
            <tr><td>نام</td><td>' . $name . '</td></tr>
            <tr><td>ایمیل</td><td>' . $email . '</td></tr>
            <tr><td>تلفن</td><td>' . $phone . '</td></tr>
            <tr><td>هسته سایت</td><td>' . $webcore . '</td></tr>
            <tr><td>نوع سایت</td><td>' . $webtype . '</td></tr>
            <tr><td>خدمات</td><td>' . $webservice . '</td></tr>
            <tr><td>خدمات ویژه</td><td>' . $vipservices . '</td></tr>
            <tr><td>سایت مشابه</td><td>' . $similar . '</td></tr>
            <tr><td>بودجه</td><td>' . $budjet . '</td></tr>
            <tr><td>توضیحات</td><td>' . nl2br($desc) . '</td></tr>
        </table>
        </body>
        </html>';
        //send the mail
        $result = sendmail($to, $subject, $message, $from);
        
        //if POST was used, display the message straight away
        if ($_POST) {
            if ($result) echo 'Thank you! We have received your message.';
            else echo 'Sorry, unexpected error. Please try again later';
            
        //else if GET was used, return the boolean value so that 
        //ajax script can react accordingly
        //1 means success, 0 means failed
        } else {
            echo $result;    
        }
    //if the errors array has values
    } else {
        //display the errors message
        for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
        echo '<a href="form.php">Back</a>';
        exit;
    }
    //Simple mail function with HTML header
    function sendmail($to, $subject, $message, $from) {
        $headers = "MIME-Version: 1.0" . "
";
        $headers .= "Content-type:text/html;charset=iso-8859-1" . "
";
        $headers .= 'From: ' . $from . "
";
        
        $result = mail($to,$subject,$message,$headers);
        
        if ($result) return 1;
        else return 0;
    }
    ?>

Everything works fine , but if you check multiple checkboxes , the form will just send on of those. Not an array. (for example about input named website_services)

In other words , i will recieve this in my email "Website Services : b" instead of "Website Services : a,b,c,d"

Thanks

</div>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
dragon456101 2015-07-22 01:39
关注
https://jsfiddle.net/0k9xo44v/

You're not getting the values, you're getting the elements. Use .map() and .get() to push the values into an array.

var webservice = $("input[name='website_services[]']:checked").map(function() { return this.value; }).get();

You commented that you expect "a,b,c,d", in which case you should also use .join() to create that string from the array.

var webservice = $("input[name='website_services[]']:checked").map(function() { return this.value; }).get().join();

Aside:

it's useful (less confusing) to maintain the same variable name, so instead of

var webservice = $("input[name='website_services[]']:checked")...

you would use

var website_services = $("input[name='website_services[]']:checked")...
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(1条)

报告相同问题？

关注问题

通过Jquery AJAX复选框中的POST数组 ajax javascript jquery php
2017-07-18 04:35

回答 2 已采纳 HTML should be, instead of ID you must use class: <input type="checkbox" class="krs_id_kelas"
如何使用jQuery和AJAX处理多个复选框更改事件？ ajax jquery php
2019-07-04 16:59

回答 1 已采纳 Having multiple elements with the same ID is invalid HTML and jQuery will only select the first el
Ajax - 使用jQuery发送对象数组 ajax javascript jquery php
2017-08-23 12:07

回答 3 已采纳 The solution was a simple one, I wasn't providing a key for the post array - data: dataString s
html 多选框获取值数组,前端获取checkbox复选框的值通过数组形式传递
2021-06-13 14:27

参数化凯同学的博客 html代码：应用一组{% for peopel_1 in peopels_1 %}{{ peopel_1.name }} {% endfor %}应用二组{% for peopel_2 in peopels_2 %}{{ peopel_2.name }} {% ...提交js代码：1 获取已选中的名字并放到数组中var name_...
使用jQuery和Ajax发送输入数组 ajax javascript jquery php
2015-03-07 11:25

回答 2 已采纳 Your jQuery selector is looking for an input with name pimage... which doesn't exist. I haven't te
使用Ajax在PHP中检索数组 ajax javascript jquery php
2019-02-04 13:30

回答 3 已采纳 PHP reads your POST data into the $_POST array, so you can retrieve your original array by reading
使用AJAX的表单复选框始终显示使用php ajax jquery php
2013-04-10 05:44

回答 3 已采纳 Try this $('#notify').attr('checked') ? "True" : "False";
html复选框怎么向后端传值,前端获取checkbox复选框的值通过数组形式传递
2021-06-11 15:09

清幽梅的博客 html代码：应用一组{% for peopel_1 in peopels_1 %}{{ peopel_1.name }}{% endfor %}应用二组{% for peopel_2 in peopels_2 %}{{ peopel_2.name }}{% endfor %}提交js代码：1 获取已选中的名字并放到数组中var name...
通过jquery将复选框数组返回到php？ javascript jquery php
2011-09-13 19:14

回答 2 已采纳 you need to escape the [] var options = $("input:checkbox[name='option\\[\\]']");
ajax为什么不能在vue元素中使用 ajax php vue.js 有问必答
2021-04-30 15:42

回答 7 已采纳 div绑定了vue，div的代码就变成vue的模板，不能再用 btn.addEventListener('click', getServerTime); 绑定事件也不要 document.get
postman可以发送请求但是ajax却发送不过去请求？ ajax 前端
2023-02-16 17:24

回答 2 已采纳你可以看下这个问题的回答https://ask.csdn.net/questions/7579307你也可以参考下这篇文章：Ajax发送post请求以及跨域问题解决
使用ajax将复选框的值提交到后台
2017-11-01 20:15

布碗的博客在javaweb项目中，需要使用ajax将复选框的值的提交到后台，记录一下当时碰到的问题
无法使用jquery / ajax验证复选框值 ajax jquery php
2014-04-11 17:22

回答 2 已采纳 $_POST['terms'] will not be set if it's an unchecked checkbox. It should instead be: if (empty($
关于复选框传数组
2018-05-16 17:16

vincent-hj的博客 $.ajax({ type: "POST", dataType: "json", url:"massage_submit.jsp", traditional: true, data:{ "check_val":check_val}, success: function(data) { } }); } 第二步 1.用String arr[] =request....
jquery,ajax动态从数据库加载数据并自动选中复选框
2021-12-02 23:11

砖业手艺混子的博客上一篇讲了下拉框,现在说说复选框 先从简单的单选框说起 <tr> <td class="tableleft">状态</td> <td> <input type="radio" name="rState" value="0" checked/> 启用
没有解决我的问题, 去提问

悬赏问题

¥15 #MATLAB仿真#车辆换道路径规划
¥15 java 操作 elasticsearch 8.1 实现索引的重建
¥15 数据可视化Python
¥15 要给毕业设计添加扫码登录的功能！！有偿
¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
¥15 微信公众号自制会员卡没有收款渠道啊
¥15 stable diffusion
¥100 Jenkins自动化部署—悬赏100元
¥15 关于#python#的问题：求帮写python代码
¥20 MATLAB画图图形出现上下震荡的线条

不能'使用ajax发送复选框数组

2条回答 默认 最新

悬赏问题

2条回答默认最新