How can I trigger Html.BeginForm by clicking a button?

Question

Here is my Html.BeginForm code. I want to pass 2 values to the Action CheckOutProduct.
How can I trigger Html.BeginForm by clicking a button?

@Html.BeginForm("CheckOutProduct", "CheckOut")
{
    <input type="hidden" id="productCodeForCheckout" value="" />
    <input type="hidden" id="productQtyForCheckout" value="0" />
}

<button class="btn" id="checkout"><span>add to cart</span></button>

score 3 · Accepted Answer · answered Jun 10 '14 at 12:21

3

Just place a submit button inside your form

@Html.BeginForm("CheckOutProduct", "CheckOut")
{
    <input type="hidden" id="productCodeForCheckout" value="" />
    <input type="hidden" id="productQtyForCheckout" value="0" />

    <input type="submit" class="btn" id="checkout" title="Add to Cart" />
}

If you prefer to stick to button instead of input, just set the type to submit

<button type="submit" class="btn" id="checkout">...</button>

answered Jun 10 '14 at 12:21

James

80,725
18
167
237

now i see `System.Web.Mvc.Html.MvcForm { }` around my button. Do you know why? – jkl Jun 10 '14 at 12:46
how do i add a confirm alert before delete to this – Boateng Ampomah Frederick Mar 23 '21 at 09:28

score 2 · Answer 2 · answered Jun 10 '14 at 12:22

You should add a submit button to the form

@Html.BeginForm("CheckOutProduct", "CheckOut")
{
 <input type="hidden" id="productCodeForCheckout" value="" />
 <input type="hidden" id="productQtyForCheckout" value="0" />
 <input type="submit">Add to cart</button>
}

score 0 · Answer 3 · answered Nov 10 '16 at 01:47

You can also add FormMethod.Post, a HTTP method for processing the form, either in a form of GET or POST, which in your case is POST method. This will make sure that your method in your controller will fire after Post:

@Html.BeginForm("CheckOutProduct", "CheckOut", FormMethod.Post)
{
  <input type="hidden" id="productCodeForCheckout" value="" />
  <input type="hidden" id="productQtyForCheckout" value="0" />

  <input type="submit" class="btn" id="checkout" title="Add to Cart" />
}

The default is `FormMethod.Post` so adding that parameter is not required. — , Nov 10 '16 at 02:09

How can I trigger Html.BeginForm by clicking a button?

3 Answers3