Submit-Button in Bootstrap 3 Nicht Modal Arbeiten

Ich soll das Formular zum Einreichen der gleichen Seite, so verließ ich die form action schwarz. Ich habe versucht, mit <button type="submit">, <input type="button"> und <input type="submit">. Hier ist der live-version für mehr Kontext. Wenn Sie klicken Sie auf "Hinzufügen Student," dann klicken Sie auf "Speichern" Schüler-Info" - Knopf, es tut sich noch nichts, aber der schließen-button funktioniert.

Hier ist der code für meine modal.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Add a new student</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" role="form" method="post" action="">
                <div class="form-group">

                    <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputID" placeholder="Student ID Number">
                    </div>
                 </div>

                <div class="form-group">
                     <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputLast" placeholder="Last Name">
                    </div>
                 </div>

                <div class="form-group">
                     <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputFirst" placeholder="First Name">
                    </div>
                </div>

                 <div class="form-group">
                     <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputAddress" placeholder="Street Address">
                    </div>
                </div>

                 <div class="form-group">
                     <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputCity" placeholder="City">
                    </div>
                </div>

                 <div class="form-group">
                     <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputState" placeholder="State">
                    </div>
                </div>

                  <div class="form-group">
                     <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputZip" placeholder="Zip">
                    </div>
                </div>

                <div class="form-group">
                     <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputBalance" placeholder="Current Balance">
                    </div>
                </div>

                 <div class="form-group">
                     <div class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputTerm" placeholder="First Term Attended">
                    </div>
                </div> 

            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input type="submit" value="Save Student Information" id="submit" name="submit" class="btn btn-primary">
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

Es ist in Ordnung. Welchen browser verwendest du?

InformationsquelleAutor evan | 2014-02-06

Ihre submit-button ist außerhalb der tag. Stellen Sie einfach die form wickeln Sie den gesamten modal-Fenster, wie dieser...

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
         <form class="form-horizontal" role="form" method="post" action="">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">Add a new student</h4>
            </div>
            <div class="modal-body">
                    <div class="form-group">

                        <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" class="form-control" id="inputID" placeholder="Student ID Number">
                        </div>
                     </div>

                    <div class="form-group">
                         <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" class="form-control" id="inputLast" placeholder="Last Name">
                        </div>
                     </div>

                    <div class="form-group">
                         <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" class="form-control" id="inputFirst" placeholder="First Name">
                        </div>
                    </div>

                     <div class="form-group">
                         <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" class="form-control" id="inputAddress" placeholder="Street Address">
                        </div>
                    </div>

                     <div class="form-group">
                         <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" class="form-control" id="inputCity" placeholder="City">
                        </div>
                    </div>

                     <div class="form-group">
                         <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" class="form-control" id="inputState" placeholder="State">
                        </div>
                    </div>

                      <div class="form-group">
                         <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" class="form-control" id="inputZip" placeholder="Zip">
                        </div>
                    </div>

                    <div class="form-group">
                         <div class="col-sm-offset-1 col-sm-10">
                            <input type="text" class="form-control" id="inputBalance" placeholder="Current Balance">
                        </div>
                    </div>

                     <div class="form-group">
                         <div 

class="col-sm-offset-1 col-sm-10">
                        <input type="text" class="form-control" id="inputTerm" placeholder="First Term Attended">
                    </div>
                </div> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input type="submit" value="Save Student Information" id="submit" name="submit" class="btn btn-primary">
        </div>
      </div><!-- /.modal-content -->
    </div>
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

InformationsquelleAutor ConnorLaCombe

7

können Sie auch eine Taste (oder input), die außerhalb des ein Formular, mit dem HTML5-Attribut : form

Beispiel von w3schools-website :
```
<form action="demo_form.asp" method="get" id="form1">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
</form>

<button type="submit" form="form1" value="Submit">Submit</button>
```
http://www.w3schools.com/tags/att_button_form.asp
- Dies ist die einzige Lösung, die nicht verlangen, dass Ihr markup zu und her geschoben! Es ist schade, das form-Attribut verwendet die Formular-id und nicht der name des Formulars, und anscheinend nicht unterstützt in IE und Edge, aber mal ehrlich, who cares... 😉
InformationsquelleAutor Tommy42

Entfernen Sie die atribute data-dismiss = "modal" im

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

InformationsquelleAutor Paulo

0

Weil der submit-button ist außerhalb des form-Elements.

Wickeln Sie das form-element um .modal-body -, die sicherstellen, dass alle Formularfelder aus-und Eingabe-Tasten sind in form vorgelegt werden.

Außerdem gelten einige styling der form mit 0-Polsterung und 0 margin wie kann es in die form drücken machen das modale unordentlich auszusehen.

Hoffe, es hilft, das ist, was ich sowieso tun und es funktioniert gut für mich.
- "Wickeln Sie das form-element um .modal-body -, die sicherstellen, dass alle Formularfelder aus-und Eingabe-Tasten sind in form vorgelegt werden." Das ist nicht wahr. Das senden und Abbrechen-button in der modal-footer. Wenn ich wickeln Sie das form-element um den modal-Körper geschieht nichts beim Klick auf den submit-button...
InformationsquelleAutor Mark Eriksson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.