How to change attribute of Html.Beginform() on form Submitting

javascript jquery asp.net-mvc

16,565

Simplified Answer.

You are using the incorrect overload. See the overloads list on MSDN for an idea of which to use.

Your current overloads expects routing information as the 3rd parameter. Any values that you provide will be matched against the routes defined for the site. If any parameters do not match it, they will be simply added as get parameters.

What you are trying to achieve is to assign an ID or another attribute to the form. This is done using an overload which allows for html attributes to be defined (see Overload on MSDN. eg,

@using(Html.BeginForm("Action", "Controller", FormMethod.POST, new {ID = "MyID"}))

Note: The order of parameters is Different.

Simply look at the html generated and you will get an idea of what is happening.

// Update

Use this

@using(Html.BeginForm("Action", "Controller", new {FU="bar"}, FormMethod.POST, new {ID = "MyID", onsubmit="return sayHello()"}))

This will generate html similar to

 <form action="/Controller/Action?FU=Hello" method="post" id="MyID" onsumbit="return sayHello()">

and combined with script

<script>
    function sayHello()
    {
        alert("Hello");
        return true;
    }
</script>

will give you alert, as well as sending FU to controller.

// Update This is how you can update the action attribute of a form.

<script>
  $('#MyID').submit(function() {
      var url = @Url.Action("Action","Controller");
      var fu = "newValueOfFU"; // New value for FU
      $('#MyID').prop('action', url + "?FU=" + fu;
      return true;
  });
</script>

16,565

Author by

Daniel Donev

Updated on June 05, 2022

Comments

Daniel Donev almost 2 years

I have this so far:

 <% foreach (Object object in Collection)
 {
     u<% using (Html.BeginForm("ActionName", "Controller", new { FU = "bar" }, FormMethod.Post, new { ID = "MyID"}))
      {%>
        <input type="submit" value="Submit" />
      <%}
 } %>

 $('#MyID').submit(function() {
     var url = Url.Action("ActionName", "ControllerName");
     var fu = "newValueOfFU"; // New value for FU
     $('#MyID').prop('action', url + "?FU=" + fu);
 });

I want to change the value of FU with the value from jQuery

Kami almost 11 years

@user2047644 updated. You are not using the correct overload, see the link for the full list.
Daniel Donev almost 11 years

I can reach the controller and the specified action and i can print the FU. This is not the problem.
Kami almost 11 years

@user2047644 Like I have tried to point out, the HTML generated is not what you are expecting. Edit your question to include the html and it will be obvious.
Daniel Donev almost 11 years

If i use the overloads that you proposed, i can`t reach FU in the controller
Kami almost 11 years

@user2047644 There are a whole bunch of overloads. The answer illustrates the use of a different overload. Use whichever is appropriate to your needs.
U.P almost 11 years

I think your BeginForm method is incorrect. See my answer for correct overload.
Daniel Donev almost 11 years

So the new HTML is posted in the question
Kami almost 11 years

@user2047644 I have updated for you the complete overload that should work. It will send FU to the server, and apply id attribute.
Daniel Donev almost 11 years

Ok that worked perfect. So now how to change the value of FU?
Kami almost 11 years

@user2047644 basic overview of how to change action attribute. Expand/Adapt to your needs.
Daniel Donev almost 11 years

The jQuery function that you provide in the Update does not change the FU Value
Graham almost 11 years

Change the "Action" attribute of the form in the jQuery function. Once the script exits, the post will fire to whatever the modified "Action" of the form is.
Daniel Donev almost 11 years

I changed Action and controller with my mvc names... Still nothing... I can reach my action in the controller but FU is not changed