pass the dropdown value into controller with Ajax

Question

I have search many time in google but i did not find my a answers. I have one Select html tag that it have 3 option tag . i want pass these select value with Jquery Ajax but I cant .

This is my Html tag

     <select id="discount" onchange="discountPostback()" title="">
        <option value=""></option>
        <option value="0">نمایش کل </option>
        <option value="1">نمایش افراد با تخفیف</option>
        <option value="2">نمایش افراد بدون تخفیف</option>


    </select>

javascript

   function discountPostback() {
            debugger;


                $.ajax({
                    url: '@Url.Action("Index","Report")',
                    type: 'POST',
                    data: { type: $('discount').val },
                    success: function () {

                    },
                    error: function () {
                        alert("error");
                    }
                });
                return false;
        }

MVC Controller

public ActionResult Index(short? type)

How can i just pass the value ? nothing more

Answer 1

There is only a couple of things wrong with your code. See the working example below.

$(document).ready(function() {
  $('#discount').on('change', function() {
    alert($('#discount').val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select id="discount" onchange="discountPostback()" title="">
  <option value=""></option>
  <option value="0">نمایش کل</option>
  <option value="1">نمایش افراد با تخفیف</option>
  <option value="2">نمایش افراد بدون تخفیف</option>
</select>

You need to select the select using the ID which requires the # in your selector, and val() is the jQuery method to get the select's value and nothing else as shown below.

Fix

$('#discount').val()

Further Reading

jQuery .val()

jQuery ID selector