CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Daniel Donev
Daniel Donev

Reputation: 284

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

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

Upvotes: 2

Views: 17275

Answers (4)

Kami
Kami

Reputation: 19407

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>

Upvotes: 5

U.P
U.P

Reputation: 7442

You can use the following jQuery code

$('form').submit(function(){
   $(this).attr('ID', newVal);
});

Or you can assign an ID to your form like 

using (Html.BeginForm("ActionName", "Controller", FormMethod.Post, new { @id = "myForm", FU = "Hello" }))

and use it to hook an event on submit

$('#myForm').submit(function(){
       $(this).attr('ID', newVal);
    });

Upvotes: 0

Iv&#225;n Ramos Jim&#233;nez
Iv&#225;n Ramos Jim&#233;nez

Reputation: 1

<script type="text/javascript">
$(document).ready(function () {

    $('#formID').submit(function (e) {
        e.preventDefault();
         $('#yourOtherID').attr(newValue);
    });

});
</script>

Upvotes: 0

Xmindz
Xmindz

Reputation: 1282

You can add an onSubmit event handler in the HTMLAttributes and change the ID in that.

<% using (Html.BeginForm("ActionName", "Controller", new { ID = "Hello", onsubmit = "return changeID();"  }, FormMethod.Post))
           {%>
        <input type="submit" value="Submit" />
        <%} %>

And add the following script somewhere in your page.

<script type="text/javascript">
    function changeID() {
           document.getElementById('Hello').id  = 'Your_New_Value';         

           return true;
    }
</script>

Upvotes: 0

Related Questions