模态中的引导表单不提交答案

【问题标题】：Bootstrap form in modal doesn't submit模态中的引导表单不提交
【发布时间】：2017-11-09 20:53:54
【问题描述】：

单击“提交”时，表单没有响应（并且没有任何内容发送到服务器）。我暂时将表单的值设置为从随机网站获取。关闭按钮正确关闭模式。我在this example工作了

   html 
        body
            #editModal.modal.fade(tabindex="-1", role="dialog", aria-labelledby="myModalLabel", aria-hidden="true")
                .modal-dialog
                    .modal-content
                        // Modal Header
                        .modal-header
                            button.close(type="button", data-dismiss="modal")
                                span(aria-hidden="true") ×
                                span.sr-only Close
                            h4#myModalLabel.modal-title
                                | Edit Resource
                        // Modal Body
                        .modal-body
                            #editForm.form(role='form' method='GET' action='https://www.google.com/') // CHANGE THIS!
                                div.form-group
                                    label(for='name') Name:
                                    input#name.form-control(type='text', name='name', required='')
                                div.form-group
                                    label(for='address') Address:
                                    input#address.form-control(type='text', name='address')
                                div.form-group
                                    label(for='phone') Phone:
                                    input#phone.form-control(type='text', name='phone')
                                div.form-group
                                    label(for='website') Website:
                                    input#website.form-control(type='text' name='website')
                                div.form-group
                                    label(for='email') Email:
                                    input#email.form-control(type='email' name='email')
                                div.form-group
                                    label(for='description') Description:
                                    textarea#description.form-control(type='text', name='description', rows = '5')
                                button.btn.btn-primary(type="submit", name="asdf") Submit
                                button.btn.btn-default(type="button", data-dismiss="modal")
                                    | Close

【问题讨论】：

试试：form(method='GET' action='google.com/') ，可能会再次恢复到 POST 测试
不，点击按钮仍然没有响应:(
从“#editForm.form”更改为只有“form”并且似乎有效，看看这个codepen：codepen.io/SitePoint/pen/eJXoQK - 提交按钮正在生效
你是对的！正确的语法是 form#formId(role="form")。我最终只是编写了一个提交函数来发出 POST 请求。非常感谢！
太棒了。我把这个作为答案，让更多人看到并最终帮助他人。如果可以，请出于同样的原因接受它。

标签： twitter-bootstrap pug bootstrap-modal

【解决方案1】：

从“#editForm.form”更改为仅“form”并且似乎有效，看看这段代码，也在codepen：

body
  p test
  .modal-dialog
    .modal-content
      // Modal Header
      .modal-header
        button.close(type="button", data-dismiss="modal")
          span(aria-hidden="true") ×
          span.sr-only Close
        h4#myModalLabel.modal-title
          | Edit Resource
      // Modal Body
      .modal-body
        //#editForm.form(role='form' method='GET' action='https://www.google.com/')
        form(role='form' method='GET' action='https://www.google.com/')
          div.form-group
            label(for='name') Name:
            input#name.form-control(type='text', placeholder='name' name='name')
          div.form-group
            label(for='email') Email:
            input#email.form-control(type='email', placeholder='name@email.com' name='email')
          button.btn.btn-primary(type="submit", name="asdf") Submit
          button.btn.btn-default(type="button", data-dismiss="modal")
            | Close

【讨论】：