Prevent page from reloading after onchange a select menu

Question

I apologize if this is a very simple question, however I am not able to find any answers or don't know what I am doing wrong here.Also I am new to ajax and jquery. Thanks for helping in advance!

I have a select menu which I want to submit to the page on change I have the following:

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

and

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

and to check if it has submitted

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

The form is submitted fine, however the page is still reloading on change, is there a way to stop the reloading of the page? Any help would be appreciated!

`option` is the `name` of the element not `id` and moreover you are serializing the `element` with `class` name within `form` as `$("form.option")` which doesn't exist.. — Guruprasad J Rao, Jun 14 '17 at 11:02
there is no submit in the code you've posted. Unclear what you're asking for. — hakre, Jun 14 '17 at 11:06
@hakre.. Oh, But that doesn't respond to **[jquery selectors](https://jsfiddle.net/Guruprasad_Rao/fffhmfq8/)** as per your statement.. Correct me if am wrong.. — Guruprasad J Rao, Jun 14 '17 at 11:07
And also with `url: "",` where you are posting the `form` to? — Guruprasad J Rao, Jun 14 '17 at 11:09
@Ria, [`
`](https://stackoverflow.com/questions/35037069/what-is-the-meaning-of-onsubmit-return-false-javascript-jquery). — Pyromonk, Jun 14 '17 at 11:14
@RiggsFolly I want to resubmit the value to the current page I am on — Ria, Jun 14 '17 at 11:14

score 1 · Answer 1 · answered Jun 14 '17 at 12:49

try this code

<?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>

your output will be in div tag which option is submit the form

you can also display in alert

alert(result);

or using console in developer tool

console.log(result);

Deepak M · Accepted Answer · 2017-06-14T12:02:45.847

0

Try this

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

And your jquery should be

<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>

Simple Example :

<?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>

edited Jun 14 '17 at 12:02

answered Jun 14 '17 at 11:29

Deepak M

849
8
17

Thanks for looking, however when checking for the value that is submitted noting is echoed back out in the php function – Ria Jun 14 '17 at 11:39
May be you have to set the `url: "",` to `url: "url_where_u_want_to_send",` . If you leave `url: "",` the ajax call will request to current page url. – Deepak M Jun 14 '17 at 11:41
I do want it to submit the value to the current url, but I wasn't sure if this is the correct way when using java. Is it? – Ria Jun 14 '17 at 11:49
Can you tell me where did you write this code? `The ' . $_POST['option'] . ' submit button was pressed
'; } ?>` I mean, in the same page ? – Deepak M Jun 14 '17 at 11:52
Yes it was written in the same page – Ria Jun 14 '17 at 11:55
I am so sorry however, noting seems to be happening, would have expected the page to just stop after echoing out the $_POST['option'], as it was placed in before the . It seems like the value is not submitted – Ria Jun 14 '17 at 12:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146656/discussion-between-m-deepak-and-ria). – Deepak M Jun 14 '17 at 12:24

Prevent page from reloading after onchange a select menu

2 Answers2