Send Button Value to Controller from Script

Question

Suppose there is a .NET Bootstrap form with multiple input buttons. When a User presses the Enter key, the default button value is sent to the Controller regardless of in which panel the User is modifying data. I think the code determines which panel is active and which button corresponds to that panel, but how does one send the correct panel's button value to the Controller? $closestButton.Submit(); did not work and I can't find the answer searching the questions here. Thanks in advance!

The Controller:

[HttpPost]
public ActionResult SaveData(SaveDataViewModel model, string buttonCommand)
{
    if (buttonCommand == "Save Basics")
    {
        //Do stuff
    }
    else if (buttonCommand == "Save Owner")
    {
        //Do other stuff
    }
    return View();
}

The View:

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default" id="basicsPanel">
            <div class="panel-heading">Basic Info</div>
            <div class="panel-body">
                <div class="row">
                    <!-- Text boxes and such -->
                </div>
                <div class="row">
                    <!-- This is the default button upon pressing Enter key, and its value is always sent to the Controller -->
                    <button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-info" id="ownerPanel">
            <div class="panel-heading">Owner</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-4">
                        <!-- Other text boxes and such -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 text-right">
                        <!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
                        <button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Finally, the script that detects which button was pressed, but can't set the value of "buttonCommand":

$(document).keypress(function (e) {
    if (e.which == 13) {
        var $activeElement = document.activeElement.id;
        var $closestPanel = $($activeElement).closest('panel');
        var $closestButton = $($closestPanel).children('input[type=submit]');
        //Got the intended button, now how to send its value?
    }
});

This should help you http://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button — jamiedanq, Apr 24 '16 at 22:05
@jamiedanq the button being "pressed" is known, since it's in effect always the default button. The button for the panel in which the User is working is also known via the script. What's needed is the ability to replace the default button that pressing Enter always sends to the Controller with the button in the script that the User intends to activate. Also, this default Enter key button would not be affected by changing button names, which is Method 1 in this link: http://www.dotnet-tricks.com/Tutorial/mvc/cM1X161112-Handling-multiple-submit-buttons-on-the-same-form---MVC-Razor.html — jle, Apr 24 '16 at 23:37

score 0 · Accepted Answer · answered Apr 25 '16 at 19:10

The answer here was: a) capture a keypress event and test whether it's the Enter key; b) if it is, call a function to prevent default behavior; c) get the active element; d) get the id attribute of the closest panel; e) check if the panel name equals one of the panel names of the page and call a .click() on that panel's button id.

Send Button Value to Controller from Script

1 Answers1