Use Submit to submit a form, within modal, using bootstrap

Asked

Viewed 3,282 times

1

I’m trying to submit a form within a modal, only it’s not submitting what I’m sending in the tag .

My view:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Novo</button>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">Nova Área Responsável</h4>
                </div>
                <div class="modal-body">
                    @using (Html.BeginForm("Index", "AreaResponsavel", FormMethod.Post, new { enctype = "multipart/form-data", id = "form" }))
                    {
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary(true)

                        <fieldset>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">Descrição</label>
                                <input type="text" class="form-control" id="descricao">
                            </div>
                        </fieldset>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Salvar</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        </div>

                    }

                </div>
            </div>
        </div>
    </div>

My Controller:

public ActionResult Index()
    {
        var listaDeAreaResponsavel = appAreaResponsavel.ListarTodos();
        return View(listaDeAreaResponsavel);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index(AreaResponsavelDominio areaResponsavel)
    {
        if (ModelState.IsValid)
        {
            appAreaResponsavel.Salvar(areaResponsavel);
            return RedirectToAction("Index");
        }
        return View(areaResponsavel);
    }

My Model:

public class AreaResponsavelDominio
{
    [DisplayName("Código")]
    public int CodAreaResponsavel { get; set; }

    [DisplayName("Descrição")]
    public string Descricao { get; set; }
}

Debbuguei, and the values that are being:

inserir a descrição da imagem aqui

javascript html css html5 twitter-bootstrap
  • 1

    What’s happening? Don’t get to the Controller? Give us more information about what’s happening

  • This does not send to the controller. When I check the fields are null.

  • I added my Model if it helps you understand.

  • Ever tried to use <input type="submit" class="btn btn-primary" value="Salvar"> (instead of button)?

  • 1

    I think the input would work, but you can use the button anyway. The problem, according to this reply from Soen http://stackoverflow.com/questions/2825856/html-button-to-not-submit-form, is that type=submit button, but this is already the default. Try to do only <button type='button' class="btn btn-primary">Salvar</button>.

  • @gustavox I tried with input and did not solve the problem, tried with <button type='button' class="btn btn-Primary">Save</button>, and the form is not submitted. I put in the image that the values that are being passed to the controller, when I crash.

  • So, I had a similar problem but mine was the opposite (I didn’t want to submit the form) so I thought it could be something similar... But take a look at this link: http://www.bootply.com/88094 which has an example of submitting form by a modal with bootstrap, and it sends with <a href="#" id="btnYes" class="btn confirm">Yes</a> ...

  • Already in this other http://www.krizna.com/jquery/jquery-ajax-form-submit-using-twitter-bootstrapmodal/ he created a script and put only <button class="btn btn-success" id="submit">submit</button> in html. And it has tbm esta http://stackoverflow.com/questions/16154216/twitter-bootstrap-modal-form-submit Soen question with an example in ajax/jquery... I hope some will fit you. Hug.

  • Hello as @gustavox reported that what is wrong is to use the type="Submit" button, switch to input ok.

Show 4 more comments

2 answers

2

You need to add name to input

<input type="text" class="form-control" id="descricao" name="Descricao">

Binding is made from the name attribute of the tag.

  • 1

    Italo, and if possible try using the Helpers the framework provides. Html.Textboxfor, Html.Labelfor.

  • When you do that Gabriel spoke the name attribute is added automatically. In addition to being a better approach.

0

Here’s an example I use in a system and it works normally.

<div id="modal-control" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <form id="form" method="post" action="">
                <button type="submit" class="btn btn-success">Salvar</button>
            </form>
        </div>
    </div>
</div>

Browser other questions tagged javascript html css html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.