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.
source to share
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
source to share