Javascript passing checkbox values to PHP

[funstad]

Hello,

 

I have created a java-script file which needs to see which check-boxes are checked and pass it to PHP

 

Testing platform:

Url: https://crezzur.com/test/backoffice/
Login: test@w3schools.com
Pass: w3school

 

When logged in go to the name " height " then next the "view" button click on the arrow and select "edit".

there you will see a checkbox tree called "Available categories".

So i need to find whats the issue for my JavaScript code not working.

When you select a checkbox for example "Women" it should pass the variable to my php code when pressing on the save button.

 

PHP code:

        if (Tools::isSubmit('activeOnCats')) {
            require_once(_PS_MODULE_DIR_.'featuresincategory/featuresincategory.php');
            $fcat = new FeaturesInCategory();
            $fcat->setFeatureCategories(Tools::getValue('activeOnCats'), Tools::getValue('id_feature'));
        }

Anyone with some JavaScript knowledge could take a look at my issue?

[Ingolme]

The first issue I'm finding is a browser security issue. It's refusing to load jQuery because you're using http instead of https, but it looks like there's another jQuery library already loaded on the page, so it's most likely a good thing that jQuery 1.7 isn't loading.

 

The save button redirects to another page, so it doesn't look like there's any time for the Javascript to run. Can you show your Javascript code?

[funstad]

The first issue I'm finding is a browser security issue. It's refusing to load jQuery because you're using http instead of https, but it looks like there's another jQuery library already loaded on the page, so it's most likely a good thing that jQuery 1.7 isn't loading.

 

The save button redirects to another page, so it doesn't look like there's any time for the Javascript to run. Can you show your Javascript code?

 

hello, this is my javascript file:

fcat = {
    initCatSelection: function () {
        $('#feature_form_submit_btn').on('click', fcat.overrideSubmit);
        $('.restoreButton > a').on({
            mouseenter: fcat.switchRestore,
            mouseleave: fcat.switchRestore,
            click: fcat.restoreActiveCategories,
        });
        fcat.selectActiveCategories();
    },
    selectActiveCategories: function () {
        var iniCat = $('#activeCategories').attr('initial_categories');
        
        if (iniCat !== '' && iniCat !== null) {
            var catArr = iniCat.split(',');
            for (var a in catArr) $('input[type=checkbox][value="CAT'+catArr[a]+'"]').prop('checked',true);
        }
    },

    overrideSubmit: function (e) {
        var cats = fcat.extractActives();
        
        if (cats.length > 0) {
            cats.sort();
            
            var str = cats.join(',');
            $('<input>').attr({
                type: 'text',
                value: str,
                style: 'display: none',
                name: 'activeOnCats',
            }).insertAfter($('#activeCategories'));
        }
        
        else {
                alert('Error: You have to select atleast 1 category.');
                e.preventDefault();
                return false;
        }
        
        //Continue normal Submit
    },
    extractActives: function () {
        var categs = [];
        $('input[name="option"]:checked').each(function() {
            if($(this).is(':checked'))
                categs.push(fcat.getCatID($(this).attr('value')));
        });
        return categs;
    },
    getCatID: function (mix) {
        return parseInt(mix.replace('CAT', ''));
    },
    switchRestore: function () {
        $('i', $(this)).toggleClass('icon-spin');
    },
    select: function (option, bool) {
        $(option)[0].selected = bool;
    },
    unselect: function () {
        fcat.select(this, false);
    },
};

$(document).ready(fcat.initCatSelection);

      jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            if (checkbox.prop("checked"))
                checkbox.parent().addClass("aangeduid");
                checkbox.click(function() {
                if (checkbox.prop("checked"))
                    checkbox.parent().addClass("aangeduid");
                else
                    checkbox.parent().removeClass("aangeduid");
            });
        });
    });
};

Edited November 26, 2016 by funstad

[Ingolme]

Rather than using the click event of the button, I would use the submit event of the form.

$('#feature_form').on('submit', fcat.overrideSubmit);

But why is Javascript necessary? PHP should be able to pick up the form inputs without the need for Javascript.

 

The network tools tell me that activeOnCats is being sent to the server side, so debugging needs to be done on the PHP side. I'd start by printing out the values that are being received:

echo Tools::getValue('activeOnCats'); exit;

[funstad]

 

Rather than using the click event of the button, I would use the submit event of the form.

$('#feature_form').on('submit', fcat.overrideSubmit);

But why is Javascript necessary? PHP should be able to pick up the form inputs without the need for Javascript.

 

The network tools tell me that activeOnCats is being sent to the server side, so debugging needs to be done on the PHP side. I'd start by printing out the values that are being received:

echo Tools::getValue('activeOnCats'); exit;

 

I need the JavaScript part because i need to use a override controller on prestashop.

 

I think my activeOnCats values are not send from JavaScript to PHP.

 

[Ingolme]

I just checked and they are getting sent. In most browsers you can open developer tools using F12. In the "net" or "network" tab it shows what is being sent to the servers. If there's a "persist" button you should click on it, since it clears the console when a new page is loaded and the server-side code is redirecting after the POST request is received.