Вставьте значения флажков в базу данных, используя Ajax и PHP в WordPress

Question

Я пытаюсь вставить значения всех отмеченных флажков в базу данных wordpress, используя ajax.У меня есть несколько вопросов с несколькими вариантами.

Answer 1

Вот как вы могли бы сделать это, используя простой JavaScript.

//add an eventListener to your submit button
document.getElementById( "submitBtn" ).addEventListener( "click", function( event ){
    event.preventDefault(); //prevent default behavior of the submit button

    //get values of only checked checkboxes and then push them onto an array
    let checkboxArr = array();
    let checkboxNodeList = document.querySelectorAll( "input[type=checkbox]:checked" );
    for ( let i = 0; i < checkboxNodeList.length; i++ ) {
        checkboxArr.push( checkboxNodeList.value );
    }
    //prepare array to be sent
    checkboxArr = encodeURIComponent( JSON.stringify( checkboxArr ) );

    //parameters to send in the request
    let parameters = "action=your_php_function_name&checkboxArr=" + checkboxArr;

    //then you would create an XHMLHttpRequest object and send the data
    let xhr = new XMLHttpRequest();
    //set request ( method, wordpress ajax_url, asynchronous )
    xhr.open( "POST", your_wp_localize_script_variable.ajax_url, true );

    //set request header to allow key/value pairs being sent via URL
    xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded;" );

    //on success
    xhr.onload = function(){
       //status OK
       if ( this.status == 200 ) {
          console.log( "response->" + JSON.parse( this.responseText );
       }
    }

    //if an error occurs
    xhr.onerror = function(){
        console.log( this.responseText );
    }

    //send the request
    xhr.send( parameters );

});

Затем на стороне PHP в функции, которой вы отправили запрос, вы можете получить массив значений флажков, подобных этому.

//have to decode and strip slashes
$checkboxArr = json_decode( stripslashes( $_POST[ 'checkboxArr' ] ) );

Затем вы можете записать данные в базу данных по своему усмотрению.

Надеюсь, вы найдете это полезным.

Answer 2

Вот код для ввода значения флажка с использованием ajax.Надеюсь, вы найдете ответ.

<input id="" name="checkbox_id[]" type="checkbox" value="" > // Checkbox

$('#submitButton').click(function(){
    var checkboxValue = new Array();
    $.each($("input[name='checkbox_id[]']:checked"), function() { //Checkbox by its name
          checkboxValue.push($(this).val());
          // or you can do something to the actual checked checkboxes by working directly with  'this'
          // something like $(this).hide() (only something useful, probably) :P
    });
    $.ajax({
        type: "POST",
        url: "submitUrl",
        data: {'checkboxValue':checkboxValue},
        success: function(data){
          console.log(data);
        }
    });
});