web-dev-qa-db-fra.com

Soumettez les données de formulaire en cliquant sur entrer et en cliquant sur le bouton d'envoi dans une fenêtre modale Bootstrap.

Voici mon formulaire qui est dans ma fenêtre modale:

Je n'ai pas de bouton de fermeture et j'ai désactivé la fenêtre en appuyant sur esc. Je souhaite pouvoir soumettre les données du formulaire en appuyant sur Soumettre ou en appuyant sur la touche Entrée. 

<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>

Voici le script que j'utilise:

$(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();
});

En appuyant sur Entrée après avoir entré mon mot de passe ou cliqué sur le bouton d'envoi, la même page est rechargée et le script ajax ne s'exécute pas. Quelqu'un pourrait-il me dire si mon script entre en conflit avec les paramètres par défaut de ma fenêtre modale? 

javascriptjqueryajaxformstwitter-bootstrap
24
Anon

Listen to form submit event - il est déclenché par les événements enter et click.

Balisage 

<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

J'ai fait cela où le formulaire de soumission s'ouvrirait dans la boîte de dialogue modale et, après cela, soumettrait l'entrée entière dans les champs. Si vous cliquez sur le bouton Soumettre, la base de données serait saisie et la page est instantanément redirigée vers la même page contenant de nouvelles données. Il n'est pas nécessaire d'actualiser pour voir les dernières données saisies .

<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. Changez le type = "submit" de votre bouton de connexion en type = "button".

EDIT: 2. Essayez de supprimer data-keyboard = "false".

0
om_deshpande