无法使用ajax将复选框值保存到数据库中

时间:2018-05-23 10:19:05

标签: jquery html ajax

我正在尝试使用ajax将数据从模态保存到数据库。 模态中的数据包含许多我想要保存到数据库的复选框。 我尝试保存到数据库的数据中的所有字段都保存,不包括已选中的复选框。 ajax运行后,所有列都保存了相应的数据,但保存复选框值的列变为空。

这是我的复选框代码:

$(document).ready(function() {
    $('#saveRoute').click(function(){
        var myCat = [];
        var categories;
        $.each($("input[name='categories']:checked"), function(){        
            myCat.push($(this).val());
            categories =  myCat.join(", ");                
        });
        alert("My categories are: " +  categories);
        console.log(myCat);
    });
  }); 

这是我的ajax代码:

function saveRoute(){
        var active = "";
        var from_location = $('#from_location').val();
        var to_location = $('#to_location').val();
        var categories = categories;
        var leaving_date = $('#leaving_date').val();
        var return_job = $('#return_job').val();
        var route_name = $('#route_name').val();
        var expires = "";
        var user_id = <?php echo $my_id; ?>;
        var type_of_vehicle = $('#type_of_vehicle').val();

        $.ajax({
            url:'<?php echo site_url('router/add_route');?>',
            method:'POST',
            data:{
                active : 'Yes',
                from_location : from_location,
                to_location : to_location,
                categories : categories,
                leaving_date : leaving_date,
                return_job : return_job,
                route_name : route_name,
                expires : '2018-05-15',
                user_id : user_id,
            },
              success: function(data) {
                alert(categories);
                console.log(data);
                $('#routeModal').modal('hide');
                alert('Route has been successfully added');

                location.reload();
      }
        });
    }

这是我的模态代码:

<div >
    <label for="categories">Select Categories</label>
    <ul>
        <li><input type="checkbox" class="" id="categories_1" name="categories" value="Furniture & Appliances">Furniture & Appliances</li>
        <li><input type="checkbox" class="" id="categories_2" name="categories" value="Home Removals">Home Removals</li>
        <li><input type="checkbox" class="" id="categories_3" name="categories" value="Specialist & Antiques">Specialist & Antiques</li>
        <li><input type="checkbox" class="" id="categories_4" name="categories" value="Cars & Vehicles">Cars & Vehicles</li>
        <li><input type="checkbox" class="" id="categories_5" name="categories" value="Boats">Boats</li>
        <li><input type="checkbox" class="" id="categories_6" name="categories" value="Freight">Freight</li>
        <li><input type="checkbox" class="" id="categories_7" name="categories" value="Industrial">Industrial</li>
        <li><input type="checkbox" class="" id="categories_8" name="categories" value="Livestock">Livestock</li>
        <li><input type="checkbox" class="" id="categories_9" name="categories" value="Piano">Piano</li>

        <li></li><input type="checkbox" class="" id="categories_10" name="categories" value="Office Removals">Office Removals
        <li></li><input type="checkbox" class="" id="categories_11" name="categories" value="Packaged Items & Parcels">Packaged Items & Parcels
        <li></li><input type="checkbox" class="" id="categories_12" name="categories" value="Man Power Only">Man Power Only
        <li></li><input type="checkbox" class="" id="categories_13" name="categories" value="Other">Other
        <li></li><input type="checkbox" class="" id="categories_14" name="categories" value="Hourly Rate">Hourly Rate
        <li></li><input type="checkbox" class="" id="categories_15" name="categories" value="Ebay">Ebay
        <li></li><input type="checkbox" class="" id="categories_16" name="categories" value="Motorbikes">Motorbikes
        <li></li><input type="checkbox" class="" id="categories_17" name="categories" value="Vehicle Parts">Vehicle Parts
        <li></li><input type="checkbox" class="" id="categories_18" name="categories" value="Clearance">Clearance 
        <input type="text" class="form-control" id="Cat" name="Cat" valeu="">
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

您的saveRoute onClick函数似乎可以正确生成类别列表myCat []和字符串类别。但这些是该函数的局部变量,一旦函数完成执行就会丢失。

另外,在function saveRoute()中,您声明var categories = categories;,这会将类别设置为未定义。

您需要将第一次操作的结果传递给第二次操作。快速而肮脏的方法是将onClick代码移动到saveRoute函数中,并在需要时生成类别变量。

还有其他方法可以实现这一点:全局变量(不是首选),将范围添加到其他全局变量的模块模式,或者从onClick处理程序中删除类别代码并使其自己的函数返回myCat []。这些方法的细节超出了这个问题的范围。