Отримання ключів і значень форми з допомогою jQuery
Щоб отримати значення з форми без перезавантаження сторінки, слід використовувати скрипти javascript або jQuery):
$(document).ready(function(){
$(“input.my-class”).on(“click”, function(e) {
var val = [];
$(“input:checked”).each( function(){
val.push( $(this).val() );
});
$(“#log”).html(“Обрано:” + val.join( “, ” ) + “<br><br>”);
});
});
Створимо масив:
var val = [];
Потім кожен (each) вибраний пункт (“input:checked”) з допомогою функції push запишемо в масив val():
$(“input:checked”).each( function(){
val.push( $(this).val() );
});
Зміст масиву val() будемо відображати на сторінці, для чого додамо об’єкт html
<div id=”log”></div>
jQuery:
$(“#log”).html(“Обрано:” + val.join( “, ” ) + “<br><br>”);
Дізнатися, якщо checkbox html був обраний, можна з допомогою .is(“:checked”).prop(“checked”).
Отримаємо значення(val) кожного зазначеного прапорця і виведемо його через alert():
if ( $(this).is(‘:checked’) ) alert($(this).val());
Те ж саме зробимо для отримання ідентифікатора (id) з допомогою .prop (“checked”):
if ( $(this).prop(‘checked’) ) alert($(this).attr(“id”));
Висновок ключів і значень через alert() тут тільки для прикладу, для роботи форми вони не потрібні, тому їх слід видалити з коду.
Зробимо кнопку відправки форми недоступною (“disabled”), якщо ні один прапорець не встановлений:
<input type=”submit” id =”submitButton” disabled value=”Submit”>
$(‘#submitButton’).prop(“disabled”, !$(this).prop(“checked”));
Зверніть увагу на двокрапка: .is (“:checked”) працює коректно з двокрапкою, а .prop(“checked”) спрацьовує без двокрапки!!!
Додамо можливість відзначати відразу всі пункти.
<input type=”checkbox” name=”ALL” id=”checkAll” value=”ALL” class=”my-class” ><label for=”checkALL”>Виділити все</label>
if($(“#checkAll”).prop(“checked”) ) $(‘input.my-class’).not(this).prop(‘checked’, this.checked);
Весь код.
HTML:
<p>Необхідні навички:</p>
<form action=”” method=”POST”>
<input type=”checkbox” name=”ALL” id=”checkAll” value=”ALL” class=”my-class” ><label for=”checkAll”> Виділити все </label><br><br>
<input type=”checkbox” name=”HTML_name” id=”HTML_label” value=”HTML” class=”my-class” ><label for=”HTML_label”> HTML </label><br><br>
<input type=”checkbox” name=”CSS_name” id=”CSS_label” value=”CSS” class=”my-class” ><label for=”CSS_label”> CSS </label><br><br>
<input type=”checkbox” name=”javascript_name” id=”javascript_label” value=”Javascript” class=”my-class” ><label for=”javascript_label”>Javascript</label><br><br>
<input type=”checkbox” name=”jQuery_name” id=”jQuery_label” value=”jQuery” class=”my-class” ><label for=”jQuery_label”> jQuery </label><br><br>
<input type=”checkbox” name=”PHP_name” id=”PHP_label” value=”PHP” class=”my-class” ><label for=”PHP_label”> PHP </label><br><br>
<input type=”checkbox” name=”MySQL_name” id=”MySQL_label” value=”MySQL” class=”my-class” ><label for=”MySQL_label”> MySQL </label><br><br>
<input type=”checkbox” name=”ajax_name” id=”ajax_label” value=”Ajax” class=”my-class” ><label for=”ajax_label”> Ajax </label><br><br>
<div id=”log”></div>
<input type=”submit” id =”submitButton” disabled value=”Submit”>
</form>
jQuery:
$(document).ready(function(){
$(“input.my-class”).on(“click”, function(e) {
var val = [];
if ( $(this).is(‘:checked’) ) alert($(this).val());
if ( $(this).prop(‘checked’) ) alert($(this).attr(“id”));
$(‘#submitButton’).prop(“disabled”, !$(this).prop(“checked”));
if($(“#checkAll”).prop(“checked”) ) $(‘input.my-class’).not(this).prop(‘checked’, this.checked);
$(“input:checked”).each( function(){
val.push( $(this).val() );
});
if($(“#checkAll”).prop(“checked”) ){
$(“#log”).html(“Обрано: ALL<br><br>”);
}else{
$(“#log”).html(“Обрано:” + val.join( “, ” ) + “<br><br>”);
}
});
});
PHP:
if(isset($_POST[“ALL”])){
echo “Мої навички: всі перераховані”;
}else{
echo “<br><br>Мої навики: “.implode( ‘, ‘, $_POST );
}
if( isset( $_POST[“ajax”] ) ){
$ajax = $_POST[“ajax”];
}
if( isset( $ajax ) ){
echo “<br><br>Мінлива $ajax встановлена”;
}
echo “<pre>”;
var_dump($_POST);
echo “</pre>”;
