salar
salar

Reputation: 709

pass the dropdown value into controller with Ajax

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

Upvotes: 3

Views: 25062

Answers (4)

kalai
kalai

Reputation: 186

Try This

 function discountPostback() {
            debugger;


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

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

Upvotes: 1

Nɪsʜᴀɴᴛʜ ॐ
Nɪsʜᴀɴᴛʜ ॐ

Reputation: 2914

From jQuery Ajax add the below line

$('#discount option:selected').val();

You can print those values from the selected drop-down list by adding these below lines above the Ajax i.e, from JavaScript

var discount = $('#discount option:selected').val();
console.log(discount);

Upvotes: 1

Karim BENHDECH
Karim BENHDECH

Reputation: 381

$("#discount").val()

return the value of selected option

$("#discount").text()

return the text of selected option

I think that you want

Upvotes: 1

MattSizzle
MattSizzle

Reputation: 3175

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

Upvotes: 2

Related Questions