Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   При выборе чекбокса заносить его значение в массив (https://javascript.ru/forum/events/72595-pri-vybore-chekboksa-zanosit-ego-znachenie-v-massiv.html)

laimas 12.02.2018 12:00

А отправка формы асинхронная или естественная?

Batyabest 12.02.2018 12:02

Цитата:

Сообщение от laimas (Сообщение 477797)
А отправка формы асинхронная или естественная?

По нажатию кнопки "Отправить" идет ajax отправка формы на обработчик, который делает проверку правильности ответов.

laimas 12.02.2018 12:40

Ну может все таки так?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    $('input').change(function() {
        if(this.checked) $(this).closest('div').append('<input type=hidden name="'+$(this).data('group')+'[]" value='+this.value+'>');
        else $('[name^='+$(this).data('group')+'][value='+this.value+']').remove()
    })
    
    $('form').submit(function(e) {
        e.preventDefault();
        alert(JSON.stringify($(this).serializeArray()))
    })
});
</script>
</head>
<body>
<form autocomplete="off">
<div> Group 1
<label><input type="checkbox" data-group="a" value="1" /> A</label>
<label><input type="checkbox" data-group="a" value="2" /> B</label>
<label><input type="checkbox" data-group="a" value="3" /> C</label>
</div>
<div> Group 2
<label><input type="checkbox" data-group="b" value="1" /> A</label>
<label><input type="checkbox" data-group="b" value="2" /> B</label>
<label><input type="checkbox" data-group="b" value="3" /> C</label>
</div>
<input type="reset" />
<button>Send</button>
</form>
</body>
</html>

laimas 12.02.2018 13:16

Batyabest,
выполните на локальном сервере, по идее что и надо.

<?
if($_POST) {
    $a = [
        'a' => [1=>'A', 'B', 'C'],
        'b' => [1=>'D', 'E', 'F']
    ];

    exit(print_r(array_combine(array_keys($a), array_map(function($k, $v) use($a) {
        return array_replace(array_flip($v), array_intersect_key($a[$k], array_flip($v)));
    }, array_keys($_POST), $_POST)), 1));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    $('input').change(function() {
        if(this.checked) $(this).closest('div').append('<input type=hidden name="'+$(this).data('group')+'[]" value='+this.value+'>');
        else $('[name^='+$(this).data('group')+'][value='+this.value+']').remove()
    });
    
    $('form').submit(function(e) {
        e.preventDefault();
        $.post(location, $(this).serializeArray(), function(d) {
            alert(d)
        })
    })
});
</script>
</head>
<body>
<form autocomplete="off">
<div> Group 1
<label><input type="checkbox" data-group="a" value="1" /> A</label>
<label><input type="checkbox" data-group="a" value="2" /> B</label>
<label><input type="checkbox" data-group="a" value="3" /> C</label>
</div>
<div> Group 2
<label><input type="checkbox" data-group="b" value="1" /> D</label>
<label><input type="checkbox" data-group="b" value="2" /> E</label>
<label><input type="checkbox" data-group="b" value="3" /> F</label>
</div>
<input type="reset" />
<button>Send</button>
</form>
</body>
</html>

Batyabest 12.02.2018 13:27

laimas,
О, да)) так работает.


Часовой пояс GMT +3, время: 01:58.