Getting multiple PHP variables into a Javascript array

In my form, I have a lot of input type = "radio" fields that are generated by PHP loop codes. Each of them has its own name , which is an array. The values โ€‹โ€‹of these input fields are processed via AJAX. The problem is I am 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 that into a javascript variable so that I can pass it to AJAX. I usually do this with jQuery ('#_ ID'). Val () , but it doesn't work in this case. I feel like I need to declare a javascript array variable, find all (and each) of the HTML elements with type = "radio" and name = "_ data - *", and click each of the found element name and value in the array. I am not sure how I can solve this.

Your help is greatly appreciated. Thank.

+3


source to share


1 answer


If you are sending all values โ€‹โ€‹use serializeArray () function.

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

      



If you are using WordPress, you will 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

      

+1


source







All Articles