Hidden value not being set by jQuery?

Question

I'm following along with an example from a Pluralsight class on Single Page in MVC and the instructor is using a hidden field to hold the "mode" the page is in. When the user click's the Add button it should set the "EventCommand" using some jQuery. However, I can't get mine to set.

Looking in the dev tools I don't see any errors. When I set some alerts inside the jQuery they will fire off so I know the jQuery is being called. When I veiw the page source I can see and input field with an a name of "EventCommand". It looks like it should be setup correctly but it's not setting the hidden field.

Anyone have an idea why this wouldn't be working?

ViewModel showing the properties as well as the HanndleRequest() which looks at the EventCommand to decide what to do but is NULL when the add button is clicked.

  public string Mode { get; set; }
    public string EventCommand { get; set; }
    public string EventArgument { get; set; }

 public void HandleRequest()
        {
            switch (EventCommand.ToLower())
            {
                case "list":
                    GetCalls();
                    break;

                case "add":
                    Add();
                    break;

                case "edit":
                    IsValid = true;
                    Edit();
                    break;
            }
        }

Top of View that has the HiddenFor and the Add button.

@using (Html.BeginForm())
{
     <!-- BEGIN HIDDEN FIELDS AREA -->
        @Html.HiddenFor(m => m.EventCommand)
        @Html.HiddenFor(m => m.Mode)
        @Html.HiddenFor(m => m.EventArgument)
      <!-- END HIDDEN FIELDS AREA -->

    <button id="btnAdd" class="btn btn-sm btn-success" data-cpp-action="add">
        <i class="glyphicon glyphicon-plus"></i> &nbsp;Create New
    </button>

jQuery that is at the bottom of the View. I get the alert that the click event happened but the alert with the data-cpp-action says undefined.

@section scripts {

    <script>
        $(document).ready(function () {

      $("[data-cpp-action]").on("click", function (e) {
          e.preventDefault();

          alert("in click");
          alert("action: " + $(this).data("data-cpp-action"));

        $("#EventCommand").val(
          $(this).data("data-cpp-action"));

        $("#EventArgument").val(
          $(this).attr("data-cpp-val"));

        $("form").submit();
      });
    });
    </script>
}

ThomasDB · Accepted Answer · 2016-06-07T17:30:07.877

2

No need for the "data" in the data function. Only use "cpp-action":

<script>
    $(document).ready(function() {
        $("[data-cpp-action]").on("click", function(e) {
            e.preventDefault();

            alert("in click");
            alert("action: " + $(this).data("cpp-action"));

            $("#EventCommand").val($(this).data("cpp-action"));
            $("#EventArgument").val($(this).attr("cpp-val"));

            $("form").submit();
        });
    });
</script>

Also see the jQuery documentation: https://api.jquery.com/data/

edited Jun 07 '16 at 17:30

answered Jun 07 '16 at 17:18

ThomasDB

81
5

Actually both this answer and @CarlosFiguerao's answers work. However, since the example I'm working off of is using data and not attr I'm going to stick with this as my answer. Removing the "data-" in the jQuery worked for me. – Caverman Jun 07 '16 at 18:08

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

Change

$(this).data("data-cpp-action"));

for

$(this).attr("data-cpp-action"));

This is why: jQuery Data vs Attr?

edited May 23 '17 at 10:29

Community

1
1

answered Jun 07 '16 at 17:20

Carlos Figueroa

1,743
2
14
15

This works as well and looking at the link I think I can get away with using the .attr but since the example I'm working off of is using .data instead of .attr I'm going to stick with the above answer for my scenario. – Caverman Jun 07 '16 at 18:09

Hidden value not being set by jQuery?

2 Answers2