[РЕШЕНО][JavaScript] AJAX отправка данных из формы из выпадающего списка select - JavaScript, Ajax

MalerBrash · 11.11.2019, 15:04

Решение: https://programmersforum.ru/showpost...9&postcount=10

Доброго времени, форумчане! Помогите разобраться, я в тупике, как отменить отправку формы при выборе формы select, чтобы отправить массив по Ajax на обработчик php? В инете и на форуме нашел только варианты с кнопкой submit и button, но это здесь не подходит, мне нужно отправить форму выбором из меню значения с ID. Пробовал различные события, остановку отправки return false, event, но страница все равно перезагружается.
Заранее, благодарю за ответ.

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Калькулятор</title>
    <script type="text/javascript" src="JS/jquery.js"></script>
    <script type="text/javascript" src="JS/form.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   </head>
<body>
  <div class="container">
   <h1>Калькулятор</h1>
       <form action="/form1.php" method="post" id="form">
       <label>Число 1</label>
        <input type="text" name="int1" placeholder="Введите первое число" class="form-control"> <br>
        <label>Число 2</label>
        <input type="text" name="int2" placeholder="Введите второе число" class="form-control"> <br>
        <label>Операция</label>
        <select name="userselect" id="userselect" onchange="this.form.submit ()" class="form-control">
        <option value="1">Умножение</option>
        <option value="2">Сложение</option>
        <option value="3">Остаток от деления</option>
        </select> <br>
        <label>Результат</label>
       <input type="text" name="result" id="result" disabled class="form-control">
        </form>  
         
    </div>
        
</div>
 </body>
</html>

JS

Код:

$(document).ready(function(){  
    $('#form').change(function () {
    return false;
        
    var data = $('#form').serializeArray();
    $.ajax({
  /*here url is in your plugin directory created file to which you sent data*/   
        url : $(this).attr('.../form1.php'), 
        type : $(this),'post',
       /* data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : test
        }, incorrect. Should be folowing*/
        data:$('form#filter').serialize(), //server will unserialize automatic
        success : function( response ) {
        alert ('Server say :' + response ); //!important for url debuging purpose   
        }
    }); 
    });
 });

Вадим Мошев · 11.11.2019, 15:11

Код, который стоит после return, выполняться не будет.

попробуйте вот так:

Код:

event.preventDefault();

у вас event должен быть передан как аргумент обработчика

MalerBrash · 11.11.2019, 15:31

Спасибо за ответ! Но я уже так писал, но страница все равно перезапускается. Пробывал подставить свою функцию в onchange, тоже не получилось. Может быть есть другие варианты?

Вадим Мошев · 11.11.2019, 15:39

Возможно, проблема ещё в этом, смотрите:

Код:

        url : $(this).attr('.../form1.php'),

Обратите внимание на три точки. Если вы хотите подняться на уровень выше в файловой системе, то вам надо писать две точки, а не три:

Код:

../form1.php

после того, как исправите, попробуйте выше указанные советы с preventDefault и так далее.

Вадим Мошев · 11.11.2019, 15:41

возможно проблема ещё в том, что у вас метод сабмит прописан прямо в аттрибуте onchange. Уберите его и пишите обработчик в коде

MalerBrash · 11.11.2019, 16:02

Отправка должна прерываться на return false или event.preventDefault(), но видать
onchange="this.form.submit ()" не связан с функциями change и submit, и напрямую отправляет массив в обработчик. Может быть как то решить по другому, привязать какое-то другое событие например?

Вадим Мошев · 11.11.2019, 17:41

У вас в ХТМЛ коде явно написано, что при изменении выпадающего списка select у вас отправляется форма. Зачем вы его там написали? Лучше уберите его и в коде напишите так:

Код:

// чтобы была отправка формы при изменении селект
select.addEventListener('change', function() {
  // отправить серверному скрипту данные формы через ajax
  // никакого submit не надо
});

// чтобы страница не перезагружалась, если отправили форму
form.addEventListener('submit', function(aEvent) {
  aEvent.preventDefault()
});

MalerBrash · 11.11.2019, 20:30

Вадим Мошев, большое спасибо за уделенное время! чет я уцепился за идею отмены отправки формы, надо было сразу обработчик на JS писать. Значит неудивительно, что инете решения не нашел, получается нельзя onchange отправку формы отменить. Ухватился за пример с ютуба по отмене нажатия submit. Но опыт надо как то получать.

Вадим Мошев · 11.11.2019, 20:47

У вас всё получилось? всё работает?

MalerBrash · 11.11.2019, 21:16

✔ Этот пост помечен как решение ✔

Да, спасибо за наставление, работает! Выложу код может кому пригодится.
html

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Калькулятор</title>
    <script type="text/javascript" src="JS/jquery.js"></script>
    <script type="text/javascript" src="JS/form.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   </head>
<body>
  <div class="container">
   <h1>Калькулятор</h1>
       <form action="form1.php" method="post" id="form">
        <label>Число 1</label>
        <input type="text" name="int1" placeholder="Введите первое число" class="form-control"> <br>
        <label>Число 2</label>
        <input type="text" name="int2" placeholder="Введите второе число" class="form-control"> <br>
        <label>Операция</label>
        <select name="userselect" id="userselect" class="form-control">
            <option value="1">Умножение</option>
            <option value="2">Сложение</option>
            <option value="3">Остаток от деления</option>
        </select> <br>
        <label>Результат</label>
        <input type="text" name="result" id="result" disabled class="form-control">
    </form>
            </div>
        
</div>
 </body>
</html>

JS

Код:

$(document).ready(function () {
     $('#userselect').change(function () {
         var url = 'form1.php'; // URL обработчика POST-запроса
         $.ajax(url, {
             method: 'POST'
             , data: $('form').serialize()
             , success: function (data) {
                 $('#result').val(data);
             }
             , error: function (data) {
                 $('#result').val(data);
             }
         });
     });
 });

11.11.2019, 15:11	#2
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	Код, который стоит после return, выполняться не будет. попробуйте вот так: Код: `event.preventDefault();` у вас event должен быть передан как аргумент обработчика

11.11.2019, 15:39	#4
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	Возможно, проблема ещё в этом, смотрите: Код: `url : $(this).attr('.../form1.php'),` Обратите внимание на три точки. Если вы хотите подняться на уровень выше в файловой системе, то вам надо писать две точки, а не три: Код: `../form1.php` после того, как исправите, попробуйте выше указанные советы с preventDefault и так далее.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Отправка option из формы select по почте	dzhn	PHP	1	29.08.2018 09:48
Отправка данных на сервер при выборе пункта выпадающего списка	Дима1888	PHP	9	20.04.2016 22:06
[РЕШЕНО] Как передать значение из <select> в action формы	polluxstar	HTML и CSS	8	15.04.2016 11:38
Отправка данных формы AJAX`ом?	Jopses	JavaScript, Ajax	4	19.02.2013 15:16
JQuery плагин для замены выпадающего списка (select)	Linel	JavaScript, Ajax	1	22.06.2011 17:46

11.11.2019, 15:31	#3
MalerBrash Новичок Пользователь Регистрация: 11.11.2019 Сообщений: 10	Спасибо за ответ! Но я уже так писал, но страница все равно перезапускается. Пробывал подставить свою функцию в onchange, тоже не получилось. Может быть есть другие варианты?

11.11.2019, 15:41	#5
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	возможно проблема ещё в том, что у вас метод сабмит прописан прямо в аттрибуте onchange. Уберите его и пишите обработчик в коде

11.11.2019, 16:02	#6
MalerBrash Новичок Пользователь Регистрация: 11.11.2019 Сообщений: 10	Отправка должна прерываться на return false или event.preventDefault(), но видать onchange="this.form.submit ()" не связан с функциями change и submit, и напрямую отправляет массив в обработчик. Может быть как то решить по другому, привязать какое-то другое событие например?

11.11.2019, 20:30	#8
MalerBrash Новичок Пользователь Регистрация: 11.11.2019 Сообщений: 10	Вадим Мошев, большое спасибо за уделенное время! чет я уцепился за идею отмены отправки формы, надо было сразу обработчик на JS писать. Значит неудивительно, что инете решения не нашел, получается нельзя onchange отправку формы отменить. Ухватился за пример с ютуба по отмене нажатия submit. Но опыт надо как то получать.

11.11.2019, 20:47	#9
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	У вас всё получилось? всё работает?