Setting a value before the submit doesn't send it to the controller

Question

I have a view with multiples forms, each one submit should submit a hidden field with a specific value and all of the share the same model. From my controller I set the value before rendering the view, but that value I will need it for one of the "Post" methods, the others should submit the same hidden field but with a different value.

Here I am displaying just the second form of the view with the hiddenInput EventCommand

@using (Html.BeginForm("ContinueWithUpload", "Odometer", FormMethod.Post, new { id = "form2" }))
{   
    @Html.HiddenFor(m => m.EventCommand)
    <div>
        <button type="submit" name="upload-excel" value="upload-excel" id="excel-upload" class="btn btn-success">Continue Upload</button>
    </div>
}

so far I tried to set it in javascript but it doesn't work

$(function(){
    $("#excel-upload").on("click", function (e) {  
        $("#EventCommand").val("upload-excel");
    });
}

reading about how to do it, I found a solutions with the ViewData, but also with that workaround it doesn't work

@Html.HiddenFor(m => m.EventCommand)
ViewData["EventCommand"] = "upload-excel"

Any help will be appreciated

Are you saving the value? Try `var value = $("#EventCommand").val("upload-excel");` — nurdyguy, Jan 20 '17 at 22:29
Not clear what your trying to do here. Why do you need a script to set the value of the hidden input - just set the value of the `EventCommand` property in the controller before you pass the model to the view — , Jan 20 '17 at 22:29
I can't because I have for the same view multiples forms, and the same model, so for one of the sections, the EvenCommand has the value that comes from the controller, and for the other I need to submit a different one — Heinrich, Jan 20 '17 at 22:50
@Heinrich, Sorry, but that simply makes no sense. You need to provide more explanation in the question to explain what your trying to do here — , Jan 20 '17 at 23:18
What does debugger return to you for `$("#EventCommand")` in the click handler? — Jasen, Jan 20 '17 at 23:52
If you have multiple forms that are all the same as you have shown, then your generating invalid html (duplicate `id` attributes) and your script will only ever change the value of the first hidden input. Do you have multiple forms with `@Html.HiddenFor(m => m.EventCommand)`? — , Jan 20 '17 at 23:57
And what is the point of having multiple forms (you can only submit one at a time so it makes no sense and is just degrading performance by generating a lot of unnecessary html) — , Jan 20 '17 at 23:59
@StephenMuecke yes I have multiple forms with @Html.HiddenFor(m => m.EventCommand) the final html has the same values, that's why I am trying to change it via javascript before submitting them. It make sense to have them because I need different POST to the controllers from the same page, if not, I would need to handle all POST in javascript anyways. Is more clear to have it the html for me. — Heinrich, Jan 23 '17 at 17:14

score 1 · Answer 1 · answered Jan 21 '17 at 04:24

Looks like you have multiple hidden fileds with same id and your code unable to pick the right one when you click on the button. You should try to get the exact hidden field within the form in which the button is clicked:

$(function()
{    
    $("#excel-upload").on("click", function (e) {  
        $(this).parents("form #EventCommand").val("upload-excel");
        return true;
    });
}

score 0 · Answer 2 · answered Jan 23 '17 at 09:49

Use following code:

@using (Html.BeginForm("ContinueWithUpload", "Odometer", FormMethod.Post, new { id = "form2",onsubmit = "return myJsFunction(this)" }))
{   
    @Html.HiddenFor(m => m.EventCommand)
    <div>
        <button type="submit" name="upload-excel" value="upload-excel" id="excel-upload" class="btn btn-success">Continue Upload</button>
    </div>
}


Add following javascript function:

function myJsFunction(this)
{
$(this).find('#EventCommand').val("upload-excel");
        return true;
}

score 0 · Accepted Answer · answered Jan 23 '17 at 17:21

Because the html that Razor renders is the same for my HiddenInput using the same model. I put my hidden inputs in a Partial View "_HiddenFields" and before rendering it, I passed a value of ViewDataDictionary. With that it allowed me to put a restriction on the PartialView of which html I wanted to generate. Below is the idea:

@using (Html.BeginForm("ContinueWithUpload", "Odometer", FormMethod.Post, new { id = "form2" }))
{
    @Html.Partial("HiddenFields/_HiddenFields", Model, new ViewDataDictionary { { "EventCommand", "excel-upload"} })
}

and my partial view is like this

@if ((string)Html.ViewData["EventCommand"] == "excel-upload")
{
    @*@Html.HiddenFor(m => m.EventCommand)*@
    @*@Html.HiddenFor(m => m.EventCommand, new {@value = "excel-upload"})*@
    <input id="EventCommand" name="EventCommand" type="hidden" value="excel-upload" />
}
else
{
    @Html.HiddenFor(m => m.EventCommand)
}

if you see I commented the first two lines because both of them are not working even if the ViewData has the same key as the field EventCommand.

Setting a value before the submit doesn't send it to the controller

3 Answers3