Я пытаюсь остановить страницу обновления при нажатии на опцию выбора, но когда я перестаю обновлять страницу, данные не могут получить.
здесь код
echo "<form name='frmtopdevotees' method='post' action='topuser_load.php'> <h4>select month <select id='seldrp' name='themonth' OnChange ='document.frmtopdevotees.submit()'> $optionsmonths </select> <select name='topdevotees' id='seldrp' OnChange ='document.frmtopdevotees.submit()'> <option value=10 $M10>Top 10</option> <option value=20 $M20>Top 20</option> <option value=50 $M50>Top 50</option> <option value=100 $M100>Top 100</option> </select> </h4> </form>"; ?> <script> $('frmtopdevotees').submit(function (e) { e.preventDefault(); return false; }); $('themonth').onchange(function () { $.ajax({ var value = $('themonth').val(); type: 'post', data: { topdevotees: topdevotees, themonth: themonth }, url: "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth, success: function (response) { $('themonth').append(response); } }); }); </script> когда я удаляю Onchange = 'document.frmtopdevotees.submit (), затем останавливается страница, чтобы обновить, но не изменить данные.
Из вашего кода я могу понять, что вы хотите вызвать вызов сервера, не обновляя страницу (AJAX) всякий раз, когда ваш вариант выбора изменяется.
В отправленном коде есть ошибки. Следующее – мое наблюдение –
На всей странице может быть только один ID. Вы использовали «seldrp» в нескольких местах.
Если вы хотите функциональность AJAX, вам следует избегать вызова функции submit () формы.
Синтаксис AJAX неверен, что должно быть следующим:
$.ajax({ url : "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth, method: "post", data: { topdevotees: topdevotees, themonth: themonth }, // can even put this in variable and JSON stringify it success: function (response) { $('themonth').append(response); } });
Теперь приступим к его части решения: я сделаю это следующим образом: 1. Будет просто прослушивать выбранное изменение в JQUERY 2. После того, как будет произведено выборочное изменение, вызывается AJAX-вызов и возвращает ответ. Измененный код –
<script> $('select').on('change', function (e) { var month = $('#seldrp1').val(); var topdevotee = $('#seldrp2').val(); // call ajax here - $.ajax({ url: "topuser_load.php?topdevotees=" + topdevotee + "&themonth=" + month, method: "post", data : JSON.stringify({ topdevotees: topdevotee, themonth: month }), success : function(response){ $('themonth').append(response); }, error : function(err){ // handle error here } }); }); </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> echo "<form name='frmtopdevotees'> <h4>select month <select id='seldrp1' name='themonth'> $optionsmonths </select> <select name='topdevotees' id='seldrp2'> <option value=10 $M10>Top 10</option> <option value=20 $M20>Top 20</option> <option value=50 $M50>Top 50</option> <option value=100 $M100>Top 100</option> </select> </h4> </form>"; ?>
Измените name на id в ajax,
$('#seldrp').onchange(function(){ ^ ^ // ajax here });
И у вас есть синтаксические ошибки в ajax.
var themonth = $('#seldrp').val(); var topdevotee = $('#topdevotees').val();//topdevotess should be the id of 2nd select box. $.ajax({ type: 'post', data: { topdevotees: topdevotees, themonth: themonth }, async:false,// this line for waiting for the ajax response. url: "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth, success: function (response) { $('themonth').append(response); $('#frmtopdevotees').submit(); } });