How to set two buttons inline if they are in different forms

Question

User363780071 posted

Hi there,

I have two button in different forms and I would like to put them inline. Because a security requirement they can't be in the same form.

So now they appear in different lines.

This is the code:

<div style="display:inline">
    @using (Html.BeginForm("x", "x", new { style = "display:inline" }))
    {
        <input type="submit" value="Get Policy Value" class="btn btn-primary min-width-115" style="display:inline" />
    }
    @using (Html.BeginForm("x", "x", FormMethod.Post, new { x= Model.x, style = "display:inline" }))
    {
        <button class="btn btn-orange min-width-115" type="submit">Cancel</button>
    }
</div>

Answer 1

User-474980206 posted

override the browsers style for forms:

<style> form {display: inline} </style>

Answer 2

User-775646050 posted

I'm not sure if your question is to place two forms inline or to have 2 forms and the button outside of the form. If the latter, a button does not have to reside in the form. It can handle the form from outside. For example: <button type="submit" form="form1">Submit</button>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Answer 3

User-719153870 posted

Hi aivalo20,

In addition to @bruce's reply, you can add System.Web.Mvc.FormMethod method in your first Html.BeginForm() to complete it so that its style can be implemented.

Please check Add attributes to Html.BeginForm in MVC.

<div>
    @using (Html.BeginForm("x", "x", FormMethod.Post, new { style = "display:inline" }))
    {
        <input type="submit" value="Get Policy Value" class="btn btn-primary min-width-115" style="display:inline" />
    }
    @using (Html.BeginForm("x", "x", FormMethod.Post, new { x= Model.x, style = "display:inline" }))
    {
        <button class="btn btn-orange min-width-115" type="submit">Cancel</button>
    }
</div>

Best Regard,

Yang Shen

Answer 4

User363780071 posted

Thanks everybody! I'm so happy now