Предотвратить перезагрузку страницы после изменения меню выбора

Прошу прощения, если это очень простой вопрос, однако я не могу найти ответы или не знаю, что я здесь делаю неправильно. Также я новичок в ajax и jquery. Спасибо за помощь заранее!

У меня есть меню выбора, которое я хочу отправить на страницу при изменении. У меня есть следующее:

<from action="" method="post">
<select name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select></form>

а также

<script type="text/javascript" >
$('#option').change, (function(e)  
{ 
   e.preventDefault();
   $.ajax({
        type: 'post',
        url: "",
        data: $("form.option").serialize(),
        success: function() {     
        }
    });
    return false;
});
</script>

и проверить, отправлено ли оно

<?php
if (isset($_POST['option'])) {
    echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
}
?>

Форма отправляется нормально, однако страница по-прежнему перезагружается при изменении, есть ли способ остановить перезагрузку страницы? Любая помощь будет оценена по достоинству!


javascript php jquery ajax ajaxform
person Ria    schedule 14.06.2017    source источник
comment
option является name элемента, а не id, и, кроме того, вы сериализуете element с именем class в form как $("form.option"), которого не существует..   -  person Guruprasad J Rao    schedule 14.06.2017
comment
@Pyromonk, куда это пойдет? извините за незнание   -  person Ria    schedule 14.06.2017
comment
в коде, который вы разместили, нет отправки. Непонятно, что вы просите.   -  person hakre    schedule 14.06.2017
comment
@hakre.. О, но это не отвечает селекторам jquery в соответствии с вашим утверждением.. Поправьте меня, если я не прав..   -  person Guruprasad J Rao    schedule 14.06.2017
comment
А также с url: "",, куда вы отправляете form?   -  person Guruprasad J Rao    schedule 14.06.2017
comment
Я хочу отправить значение обратно на текущую страницу   -  person Ria    schedule 14.06.2017
comment
<from action="" method="post"> ОТ?? Конечно, это должно быть <form....>   -  person RiggsFolly    schedule 14.06.2017
comment
@Ria, <form onsubmit="javascript: return false;"></form>.   -  person Pyromonk    schedule 14.06.2017
comment
@RiggsFolly Я хочу повторно отправить значение на текущую страницу, на которой я нахожусь   -  person Ria    schedule 14.06.2017

Ответы (2)


arrow_upward
0
arrow_downward

Попробуй это

<select id="option" name="option">
<option value="a">a </option>
<option value"b">b </option>
<option value"c">c</option>
</select>

И ваш jquery должен быть

<script type="text/javascript" >
  $('#option').change(function()  
  { 
      var option_val = $(this).val();
      $.ajax({
        type: 'post',
        url: "",
        data: "option="+option_val,
        success: function(res) 
        {  
            alert(res)   
        }
      });
  });
</script>

Простой пример:

<?php
if (isset($_POST['option'])) {
    echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
    die;
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>temporary test</title>
</head>
<body>
<select id="option">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $('#option').change(function(){
        var option_val = $(this).val();
        $.ajax({
        type: 'post',
        url: "",
        data: "option="+option_val,
        success: function(res) 
        {  
            alert(res)   
        }
        });
    });
</script>
</html>
person Deepak M    schedule 14.06.2017
comment
Спасибо за просмотр, однако при проверке отправленного значения отметка возвращается обратно в функцию php - person Ria; 14.06.2017
comment
Возможно, вам нужно установить url: "", на url: "url_where_u_want_to_send", . Если вы оставите url: "",, вызов ajax будет запрашивать URL-адрес текущей страницы. - person Deepak M; 14.06.2017
comment
Я хочу, чтобы он отправлял значение текущему URL-адресу, но я не был уверен, что это правильный способ при использовании java. Это? - person Ria; 14.06.2017
comment
Не подскажете, где вы написали этот код? <?php if (isset($_POST['option'])) { echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />'; } ?> В смысле, на той же странице? - person Deepak M; 14.06.2017
comment
Да, это было написано на той же странице - person Ria; 14.06.2017
comment
Мне очень жаль, однако, заметив, что, похоже, это происходит, я ожидал, что страница просто остановится после повторения $_POST['option'], поскольку она была помещена перед ‹/head›. Кажется, что значение не представлено - person Ria; 14.06.2017
comment
Давайте продолжим это обсуждение в чате. - person Deepak M; 14.06.2017

arrow_upward
1
arrow_downward

попробуйте этот код

<?php
if (isset($_POST['option'])) {
    echo '<br />The ' . $_POST['option'] . ' submit button was pressed<br />';
    exit;
}

?>    
<form action="" method="post">
    <select name="option" id="option">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </select>
</form>
<div id="msg">
</div>
<script type="text/javascript" src="../library/jquery-3.2.1.min.js"></script>
<script type="text/javascript" >
$('#option').change(function(e)  
{ 
    e.preventDefault();  
    var data=""; 
    data=$("#option").val();

   $.ajax({

        type: 'post',
        url: "",
        data: {option:data},
        success: function(result) {
            $('#msg').html(result);
        }
    });
    return false;

});

</script>

ваш вывод будет в теге div, который option отправляет form

вы также можете отобразить в alert

alert(result);

или с помощью консоли в инструменте разработчика

console.log(result);
person Bhargav Chudasama    schedule 14.06.2017