How to pass textbox input value and dropdownlist selected value as input parameters to Controller in mvc4 using jquery?

Question

I need to pass textbox input value and dropdownlist selected value to Controller in MVC4 ????????? For Eg : I have a Form with Textbox and Dropdownlist and a ( PartialView For Webgrid) . When i give datetime input to Textbox and Selected the "DoctorName" in Dropdown . Then i need to pass textbox input value and dropdownlist values as parameters to the controller ??????? My Controller is used to bind the webgrid in PartialView... The Code i tried which is not working......#doctortype is dropdownlist,#AppointmentDate is Textbox input datetime.

jquery:

   <script type="text/javascript">
    $(document).ready(function () {

        $('#doctorType').change(function (e) {
            e.preventDefault();
            var url = '@Url.Action("Filter")';
            $.get(url, { doctorname: $(this).val() }, { AppointmentDate: $('#AppointmentDate').val() }, function (result) {

                $('#FilterWebgrid').html(result);
            });
        });
    });
</script>

Are you using @Html.Dropdownlistfor ? Textbox and dropdown value binded to model ? — Sakthivel, Nov 21 '13 at 12:36

score 1 · Accepted Answer · answered Nov 21 '13 at 12:37

is not

$.get(url, `{ doctorname: $(this).val() }, { AppointmentDate: $('#AppointmentDate').val() }`, function (result) {

                $('#FilterWebgrid').html(result);
            });

You are sending two object. You have to send a single object like this:

  $.get(url, { doctorname: $(this).val(), AppointmentDate: $('#AppointmentDate').val() }, function (result) {

                $('#FilterWebgrid').html(result);
            });

2) check the console and network tab and check if there is any error.

3) The value you are passing must be the same type as the parameter expected in the Action

score 0 · Answer 2 · edited May 23 '17 at 12:19

This is just simple method to post data. If your controller returns data back to view, try $.getJSon();

<input type="text" value="doctor name" id="txtDoctor"/>
<select id="ddlDoctor"><option>SomeSelectedData</option></select>

<script>
 $(document).ready(function() {
   var txtValue = $('#txtDoctor').val();  
   var ddlValue = $('#ddlDoctor').val();

   $.ajax({
       url: '/controller/action',
       data: { doc: txtValue, name: ddlValue },
       traditional: true,
       success: function(result) {
       alert(result.status);
   }
 });
 });
</script>

to know more about getJSon and JSON Result, check these links.

GetJson with parameters

JSON result in view

How to pass textbox input value and dropdownlist selected value as input parameters to Controller in mvc4 using jquery?

2 Answers2