Getting multiple PHP variables into a Javascript array

Question

In my form, I have a lot of input type="radio" fields, which are generated by PHP looping codes. Each has its own name, which is an array. The values of these input fields are processed via AJAX. The problem is I'm not sure how to read the values of these input fields in Javascript or jQuery.

Here's my code for the form (simplified).

<form id="_user_roles_form" method="post" class="form-horizontal">

    <p><strong>Manager</strong></p>

    <div class="form-group row">
        <label class="col-lg-6 control-label">Register Companies</label>
        <div class="col-lg-6">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default active">
                    <input type="radio" name="_data[Manager][publish_companies]" value="1"/> True
                </label>
                <label class="btn btn-default ">
                    <input type="radio" name="_data[Manager][publish_companies]" value="0"/> False
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-lg-6 control-label">Edit Companies</label>
        <div class="col-lg-6">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default active">
                    <input type="radio" name="_data[Manager][edit_companies]" value="1"/> True
                </label>
                <label class="btn btn-default ">
                    <input type="radio" name="_data[Manager][edit_companies]" value="0"/> False
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-lg-6 control-label">Edit Others Companies</label>
        <div class="col-lg-6">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default active">
                    <input type="radio" name="_data[Manager][edit_others_companies]" value="1"/> True
                </label>
                <label class="btn btn-default ">
                    <input type="radio" name="_data[Manager][edit_others_companies]" value="0"/> False
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-lg-6 control-label">Edit Customers</label>
        <div class="col-lg-6">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default ">
                    <input type="radio" name="_data[Employee][edit_customers]" value="1"/> True
                </label>
                <label class="btn btn-default active">
                    <input type="radio" name="_data[Employee][edit_customers]" value="0"/> False
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-lg-6 control-label">Edit Others Customers</label>
        <div class="col-lg-6">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default ">
                    <input type="radio" name="_data[Employee][edit_others_customers]" value="1"/> True
                </label>
                <label class="btn btn-default active">
                    <input type="radio" name="_data[Employee][edit_others_customers]" value="0"/> False
                </label>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-lg-6 control-label">Delete Customers</label>
        <div class="col-lg-6">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-default ">
                    <input type="radio" name="_data[Employee][delete_customers]" value="1"/> True
                </label>
                <label class="btn btn-default active">
                    <input type="radio" name="_data[Employee][delete_customers]" value="0"/> False
                </label>
            </div>
        </div>
    </div>

     <div class="form-group">
         <div class="col-lg-12">
             <button type="submit" class="btn btn-default">Confirm</button>
         </div>
     </div>

</form>

In PHP, I can use _data[][] as an array variable, but I need to read this into a javascript variable so that I can pass it to AJAX. Usually I do it by jQuery('#_ID').val(), but in this case it doesn't work. I feel that I need to declare a javascript array variable, find all (and each) of the HTML elements with type="radio" & name="_data-*", and push each of the found element's name and value into the array. I'm not sure how I can solve this out.

Your help is highly appreciated. Thank you.

Answer 1

If you are sending all values, use the serializeArray() function.

var formData = jQuery('#_user_roles_form').serializeArray();

If you're using WordPress, you probably also need:

formData.push({name: 'action', value: 'yourAjaxAction'}); 
// if you have set yourself up to use nonce
// formData.push({name: 'nonce_data', value: yourNonceValue });

jQuery.ajax({
     url         : ajaxUrl, // global ajax url
     type        : 'post',
     data        : formData,
     success     : function(data, textStatus, jqXHR) {
// etc etc