Question posted in
You can find the official documentation here.

Make ajax request with Select option – Jquery ajax

This is my html 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> 

 <div class="input-group mb-3">
          <div class="input-group-prepend">
            <label class="input-group-text" for="stores">select</label>
          </div>
          <select class="custom-select" id="stores">
            <option selected>choose...</option>
            <option value="1">Option 1 </option>
            <option value="2">Option 2</option>
          </select>

My question is hot to make the ajax request and send the selected option to backend and return the result?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Made a simple solution <select class="custom-select" id="stores" name='myfield' onchange='this.form.submit()'> I also solved the ajax response sending the get request to the same page and validate the inputs.

    I added the select inside a form tag and used this script selected onchange='this.form.submit()' If somebody has a better and more improved solution please share.


  2. 0 
    <html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#stores').on('change', function(event) {
                event.preventDefault();
                $.ajax({
                    url: 'http://localhost/sample-json.json',
                    data: {
                        var1: $(this).val()
                    },
                    success: function(data) {
                        console.log(data);
                        // your code
                    },
                    type: 'GET'
                });
            });
        });
    </script>
</head>

<body>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <label class="input-group-text" for="stores">select</label>
        </div>
        <select class="custom-select" id="stores">
            <option selected>choose...</option>
            <option value="1">Option 1 </option>
            <option value="2">Option 2</option>
        </select>
    </div>
</body>
</html>

    For extra ref :

    https://www.sitepoint.com/use-jquerys-ajax-function/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search