it-swarm.com.de

Senden Sie die Formulardaten sowohl beim Klicken auf die Eingabetaste als auch beim Klicken auf die Schaltfläche zum Senden in einem modifizierten Bootstrap-Fenster

Hier ist mein Formular in meinem modalen Fenster:

Ich habe keine Schließen-Schaltfläche und ich habe das Fenster beim Drücken von esc deaktiviert. Ich möchte die Formulardaten abschicken können, wenn Sie auf "Senden" oder auf die Eingabetaste drücken. 

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-header">
        <h3 id="myModalLabel">Enter your Credentials</h3>
    </div>
    <div class="modal-body">
        <form id="login-form" class="form-horizontal" accept-charset="UTF-8"  data-remote="true"">
            <div class="control-group">
                <label class="control-label" for="inputEmail">Email</label>
                <div class="controls">
                    <input type="email" id="email" name="email" value=""  placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                    <input type="password" id="passwd" name="passwd" value="" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                    <input type="submit"  id="login" value="Login"class="btn btn-primary" />

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

Hier ist das Skript, das ich verwende:

$(document).ready(function(){
    $('#myModal').modal('show');
});

function submitLogin() {
    $.ajax({
        url:"login_mysql.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
        //do something
    });
}

$('#passwd').keypress(function(e) {
    if (e.which == '13') {
        submitLogin();
    }
});

$('#login').click(function(){
    submitLogin();
});

Wenn Sie nach dem Eingeben meines Passworts die Eingabetaste drücken oder auf die Schaltfläche "Senden" klicken, wird die gleiche Seite erneut geladen, und das ajax-Skript wird nicht ausgeführt. Könnte mir jemand sagen, ob mein Skript mit den Standardeinstellungen meines modalen Fensters kollidiert? 

24
Anon

Hören Sie sich das Formular submit an - es wird durch Eingabe- und Klickereignisse ausgelöst.

Markup

<form id="yourForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Submit">
</form>

JS

$('#yourForm').submit(function(event){

  // prevent default browser behaviour
  event.preventDefault();

  //do stuff with your form here
  ...

});
31
moonwave99

Ich habe das getan, wo sich das Übermittlungsformular in einem modalen Dialogfeld öffnet und anschließend den gesamten Eintrag in die Felder einfügt. Wenn Sie auf die Schaltfläche "Senden" klicken, wird die Eingabe in die Datenbank vorgenommen, und die Seite wird sofort mit neuen Daten auf dieselbe Seite umgeleitet. Es ist nicht erforderlich, die Daten zu aktualisieren, um die zuletzt eingegebenen Daten anzuzeigen.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">ADD CONTENT</button>
<!-- 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" id="myModalLabel">Please Add Content</h4>
        </div>
      <div class="modal-body">
        <form role="form" action="" method="POST">
          <!-- YOUR HTML FORM GOES HERE--->
        <button type="submit" name="submit" class="btn btn-primary btn-lg"id="sub" onclick="SUBMISSION()" >Submit </button>
        </fieldset>
        </form>
<?php
  if(isset($_POST['submit']))
  {
    SUBMISSION();
  }
  function SUBMISSION()
  {
    // UR CONNECTION ESTABLISHMENT CODE GOES HERE
    // SQL QUERY FOR INSERTION IN FIELDS

    echo"<script type=\"text/javascript\">
      document.location.href='http://localhost/dict/pages/YOURPAGE.php';
    </script>";

    $conn->CLOSE();
  }
?>

        </div>                      
       </div>
     <!-- /.modal-content -->
     </div>
   <!-- /.modal-dialog -->
   <!-- /.panel-body -->
   </div>
   <!-- /.panel -->
 </div>
 <!-- /.col-lg-12 -->

 

0
gopal-kashy
  1. Ändern Sie type = "submit" von Ihrem Login-Button in type = "button".

BEARBEITEN: 2. Entfernen Sie data-keyboard = "false".

0
om_deshpande