Search code examples
javascriptphpjqueryajaxajaxform

Prevent page from reloading after onchange a select menu


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!


Solution

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