В моей форме у меня есть много полей input type = "radio" , которые генерируются кодами PHP-циклов. Каждый из них имеет собственное имя, которое представляет собой массив. Значения этих полей ввода обрабатываются через AJAX. Проблема в том, что я не уверен, как читать значения этих полей ввода в Javascript или jQuery.
Здесь мой код для формы (упрощенный).
<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>
В PHP я могу использовать _data [] [] как переменную массива, но мне нужно прочитать это в переменной javascript, чтобы я мог передать ее AJAX. Обычно я делаю это с помощью jQuery ('#_ ID'). Val(), но в этом случае он не работает. Я чувствую, что мне нужно объявить переменную массива javascript, найти все (и каждый) из HTML-элементов с помощью type = "radio" и name= "_ data - *" и нажать каждую из найденное имя элемента и значение в массиве. Я не уверен, как я могу это решить.
Ваша помощь очень ценится. Спасибо.
Если вы отправляете все значения, используйте функцию serializeArray().
var formData = jQuery('#_user_roles_form').serializeArray();
Если вы используете WordPress, вам, вероятно, также понадобится:
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