Get value from select tag inside form MVC

Question

My HTML (inside a Form):

@using (Ajax.BeginForm("ShowDetail", "Calculation", new AjaxOptions
                    {
                        InsertionMode = InsertionMode.Replace,
                        UpdateTargetId = "CalcDetail",
                        LoadingElementId = "Loader",
                    }))
                    {
                       <div class="calculateBox">
                            <label for="calcOption">Choose value to calculate:</label>
                            <select form="FormCalcInput" id="calcOption" title="Choose what value you want to calculate">
                                <option value="anPMT">Payment (PMT)</option>
                                <option value="anI">Interest (I)</option>
                                <option value="anFV">Future value (FV)</option>
                                <option value="anPV">Present value (PV)</option>
                            </select>
                        </div>
                        <div class="calculateBox" background-color="#777777">
                            @Html.Label("Present value (PV)")
                            @Html.TextBox("PresentValue")
                            @Html.Label("Future value")
                            @Html.TextBox("FutureValue")
                            @Html.Label("Interest rate")
                            @Html.TextBox("InterestRate") <br />
                            <input type="radio" name="advanceOrArrears" id="inAdvance" value="inAdvance" /> In advance<br />
                            <input type="radio" name="advanceOrArrears" id="inArrears" value="inArrears" /> In arrears
                        </div>
                        <div class="calculateBox">
                            <label for="startDate">Start date:</label>
                            <input type="date" id="StartDate" name="startdate" title="Choose start date for your calculation" /><br />
                            @Html.Label("Payment frequency")
                            <select form="FormCalcInput" id="PmtFreq" name="pmtFreq" title="Choose the payment frequency, for example: Every month">
                                <option value="Monthly">Monthly</option>
                                <option value="Quarterly">Quarterly</option>
                                <option value="Yearly">Yearly</option>
                            </select><br /><br />
                            @Html.Label("No of payment periods")
                            @Html.TextBox("PaymentPeriods")
                            @Html.Label("Date time convention")
                            <select form="FormCalcInput" id="anDTC" title="Choose your Date time convention">
                                <option value="360360">360/360</option>
                                <option value="365365">365/365</option>
                            </select><br /><br />
                            <input type="submit" id="CalcBtn" class="calcBtn" name="SubmitBtn" value="Calculate" title="Calculate your calculation" />
                        </div>
                    }

And in my controller:

[HttpPost]
public ActionResult ShowDetail(FormCollection form)
{
var PmtFreq = form["pmtFreq"];
}

Why is the variable in my controller not containing the selected value in my combobox?

I have tried using a @Html.DropDownList but thought this was easier..

@krillezzz see my answer below and try changing accordingly.http://stackoverflow.com/questions/22476730/get-value-from-select-tag-inside-form-mvc/22477182#22477182 — Ashwini Verma, Mar 18 '14 at 12:01

Ashwini Verma · Accepted Answer · 2014-03-18T11:59:39.443

1

I have tested the code and problem is form="FormCalcInput" attribute for select, just remove this. That should solve your problem.

<select id="PmtFreq" name="pmtFreq" title="Choose the payment frequency, for example: Every month">
    <option value="Monthly">Monthly</option>
    <option value="Quarterly">Quarterly</option>
    <option value="Yearly">Yearly</option>
</select>

edited Mar 18 '14 at 11:59

answered Mar 18 '14 at 10:53

Ashwini Verma

7,477
6
36
56

He should not need to do that. He can get the selected value of the input from FormCollection directly. – David Hirst Mar 18 '14 at 11:02
@DavidHirst not in case with Dropdown. see here http://stackoverflow.com/questions/15881575/get-the-selected-value-of-a-dropdownlist-asp-net-mvc and http://stackoverflow.com/questions/3004788/get-the-selected-drop-down-list-value-from-a-formcollection-in-mvc – Ashwini Verma Mar 18 '14 at 11:04
Ok... neither of those support what you suggest. In fact one of them supports what I already said, you can get the selected value directly from formCollection by doing var myvalue = formCollection["myinput"]; And again http://stackoverflow.com/questions/21303236/mvc-razor-get-option-value-from-select-with-formcollection?rq=1 – David Hirst Mar 18 '14 at 11:08

score 1 · Answer 2 · answered Mar 18 '14 at 11:12

1

Add form id FormCalcInput in Ajax.BeginForm

@using (Ajax.BeginForm("ShowDetail", "Calculation", 
         new AjaxOptions {
         InsertionMode = InsertionMode.Replace,
         UpdateTargetId = "CalcDetail",LoadingElementId = "Loader" }, 
         new { id ="FormCalcInput" })) // add from id
{


}

answered Mar 18 '14 at 11:12

Sender

6,660
12
47
66

That will probably work as well but I prefered Ashwinis answer – MrProgram Mar 18 '14 at 12:04

score 0 · Answer 3 · answered Mar 18 '14 at 10:42

0

Try using data-bound value in your action method:

public ActionResult ShowDetail(string pmtFreq)
{
    // ...
}

answered Mar 18 '14 at 10:42

Michał Dudak

4,923
2
21
28

But I have a lot of other values going from the form. That will change my whole method. tried to keep it simple like this – MrProgram Mar 18 '14 at 10:44
3

Then why not build a viewmodel? – David Hirst Mar 18 '14 at 10:45
I have a viewmodel, but not for that simple value – MrProgram Mar 18 '14 at 10:47
If you have a lot of values coming in to your action method, you should wrap them in a view model. However, going back to your original question, it should be also possible to use `FormCollection`. I'm not sure yet why it doesn't work. – Michał Dudak Mar 18 '14 at 10:49
I would post your view in its totality so we can see what's actually going on. I have no idea why you would want to use FormCollection in this instance. – David Hirst Mar 18 '14 at 10:51
Have edited my question now. The only value I'm having trouble with is the pmtfreq – MrProgram Mar 18 '14 at 11:05

score 0 · Answer 4 · answered Mar 18 '14 at 10:49

If you want to capture the data from your form, my suggestion would be to use a strongly typed viewmodel.

For example:

public class MyViewModel() {
    public string pmtFreq {get; set;}
    /* add more properties for each html input */
}

Then on your controller:

[HttpPost]
public ActionResult ShowDetail(MyViewModel model)
{
    var PmtFreq = model.pmtFreq;
}

On your view add at the top a declaration for the viewmodel.

score 0 · Answer 5 · answered Mar 18 '14 at 11:57

0

use like var PmtFreq = Request.Form["pmtFreq"];

answered Mar 18 '14 at 11:57

RohannG

669
7
12

score 0 · Answer 6 · answered Mar 18 '14 at 11:57

0

just Remove 'form="FormCalcInput"' from select then it will ok.

answered Mar 18 '14 at 11:57

Lineesh

106
1
1
6

Get value from select tag inside form MVC

6 Answers6