Как получить данные формы без кнопки submit?

Question

[error 404]

Есть такой код:

<select name="class" class="choose-class">
<option selected disabled>Класс</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>

Как получить значение class в php без нажатия на кнопку submit и без обновления страницы?

Comments

[Дмитрий]

change
ajax

Answer 1

[noeer]

Нужно выполнить ajax запрос.
Примерно так

var chooseСlass = $('.choose-class').val();
var url = '/'; // здесь указываем адрес PHP файла
var formData = new FormData();
formData.append('class', chooseСlass);

$.ajax({   // отправляем запрос
    url: url,
    type: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    data: formData
 });

Comments

[error 404]

Хорошо, а адрес php файла указывать тот же?

[noeer]

Артём Шупиков, ну я же не знаю где у вас обработчик находится..

[error 404]

Получился такой код:

<div class="text-center">
    <form method="POST">
        <select name="class" class="choose-class" onchange="send()">
            <option selected disabled>Выберите класс</option>
            <option value="5">5 класс</option>
            <option value="6">6 класс</option>
            <option value="7">7 класс</option>
            <option value="8">8 класс</option>
            <option value="9">9 класс</option>
        </select>
        <br>
    </form>
    <script type="text/javascript">
        function send() {
            var chooseСlass = $('.choose-class').val();
            var url = '<?php echo $_SERVER['
            DOCUMENT_ROOT ']."/index.php";?>';
            var formData = new FormData();
            formData.append('class', chooseСlass);
            $.ajax({
                url: url,
                type: 'POST',
                cache: !1,
                contentType: !1,
                processData: !1,
                data: formData
            })
        }
    </script>
    <?php
				if (!empty($_POST)){
					echo $_POST['class'];
				}
				?>
</div>

Не работает

[noeer]

Отслеживайте событие change для селекта

$('.choose-class').on('change', function(){
	// здесь получаете текущее значение селекта и выполняете запрос
});

var url = '<?php echo $_SERVER['
            DOCUMENT_ROOT ']."/index.php";?>';

уберите $_SERVER['DOCUMENT_ROOT ']

[error 404]

Все еще ничего не работает
Вот код:

<form method="POST">
					<select name="class" class="choose-class">
						<option selected disabled>Выберите класс</option>
						<option value="5">5 класс</option>
						<option value="6">6 класс</option>
						<option value="7">7 класс</option>
						<option value="8">8 класс</option>
						<option value="9">9 класс</option>
					</select>
					<br>
				</form>
				<script type = "text/javascript">
    $('.choose-class').on('change', function() {
        var chooseСlass = $('.choose-class').val();
        var url = '/1.php'; // здесь указываем адрес PHP файла
        var formData = new FormData();
        formData.append('class', chooseСlass);

        $.ajax({ // отправляем запрос
            url: url,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            data: formData
        });
    }); </script>

[noeer]

У вас jQuery подключен?

[error 404]

<script src="/js/jquery-3.3.1.js"></script>
<script type = "text/javascript">
	$('.choose-class').on('change', function() {
		var chooseСlass = $('.choose-class').val();
        var url = '/1.php'; // здесь указываем адрес PHP файла
        var formData = new FormData();
        formData.append('class', chooseСlass);
        $.ajax({ // отправляем запрос
        	url: url,
        	type: 'POST',
        	cache: false,
        	contentType: false,
        	processData: false,
        	data: formData
        });
    }); 
</script>

[noeer]

Все еще ничего не работает

А как вы это проверяли? Что должно произойти?

[error 404]

noeer, в файле 1.php

<?php
if (!empty($_POST)){
	echo $_POST['class'];
}
?>

[noeer]

Ну так на экран ничего и не выведется.
Вы же сами хотели отправлять

без обновления страницы

Запрос выполнен асинхронно. Пользователь ничего не увидит.

[Виталий Ананьев]

noeer, да почему то не работает я не шарю особо JS но прописал то же самое только класс поменял и url, форма выпадающий список.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type = "text/javascript">
$('.form-select').on('change', function() {
    var form-select = $('.form-select').val();
    var url = '{% url 'base' %}'; // здесь указываем адрес PHP файла
    var formData = new FormData();
    formData.append('class', form-select);

    $.ajax({   // отправляем запрос
        url: url,
        type: 'POST',
        cache: false,
        contentType: false,
        processData: false,
        data: formData
    });
});
</script>
{% crispy game_sorted_form %}

Answer 2

[Анатолий Куликов]

Отследить изменения и передать AJAX'ом

Answer 3

[Андрей Юрчук]

Ajax... on change