Adding additional parameter to form submit

Question

I have a form declaration in my Razor view

<form method="post" action="/Lot/LotList?auctionEventId=@auctionEventId" id="filterForm">

(Incidentally, I chose to write it out like this rather than use Html.BeginFrom because I needed to give it an id and didn't know how to do that with Html.BeginFrom - but that is not the issue here)

Outside of this form I have a button which submits this form (there is also a submit button in the form)

<input type="button" onclick="$('#filterForm').submit();" value="Show all" />

Now, the issue is that if this button is used to submit the form I want the action in the form to change to

action="/Lot/LotList?auctionEventId=@auctionEventId&showAll=true"

How do I alter the action and pass this additional parameter? Is there a totally better way of doing all this?

Solution 1

Appending query string parameters onto the form action, and trying to change that at runtime is tricky (but not impossible). Far easier is to use hidden fields:

<form method="post" action="/Lot/LotList" id="filterForm">
  <input type="hidden" name="auctionEventId" value="@auctionEventId" />
  ...

So now all you have to do is add another hidden field for "showAll"

<form method="post" action="/Lot/LotList" id="filterForm">
  <input type="hidden" name="auctionEventId" value="@auctionEventId" />
  <input type="hidden" name="showAll" value="false" id="showAllField" />
  ...

And just hook up a jquery event on your showAll button:

<input id="showAllButton" type="button"/>

jQuery:

$('#showAllButton').click(function(){
     $('#showAllField').val("true");
     $('#filterForm').submit();
});

Solution 2

I know you said this is not the issue but you can add attributes to Html.BeginForm like this:

 @using (Html.BeginForm("ActionName","ControllerName", FormMethod.Post, new { id = "filterform" })){

Solution 3

how about putting a hidden input

<form method="post" action="/Lot/LotList?auctionEventId=@auctionEventId" id="filterForm">

<input type="hidden" id="showAll" name="showAll" value=""/>

on your button

<input type="button" onclick="submitForm()" value="Show all" />

on your script somewhere

function submitForm(){
$('#showAll').val('true');
$('#filterForm').submit();

}

Solution 4

If you are within a form you can add the route to a button element. You can override the native action of the form by using formAction and formMethod. You can also have multiple buttons with other formActions and formMethods

<form action="/somewhere" method="get">
    <input type="type" name="name" value=" " />


    <button formaction="/Lot/LotList?auctionEventId=@auctionEventId&showAll=true" formmethod="post">Show All</button>
</form>

View more solutions

Comments

[Diego Venâncio]

This is exactly same solution gived for @yardpenalty in this question... Copy and paste? stackoverflow.com/a/20623003/4654957