Prévenir modal bootstrap à partir de la fermeture après l'soumettre le formulaire

J'ai cherché partout sur le net et a trouvé des solutions, mais ils ont tous utilisé JS ou AJAX et a contribué à une certaine mesure seulement. Je suis nouveau en PHP et n'ont aucune idée de l'AJAX, donc si quelqu'un ici pouvait m'apporter une solution à l'aide de PHP & HTML ou tout au plus de JS.

J'ai une question très simple formulaire d'abonnement à l'intérieur d'un bootstrap 3 modale dans la section pied de page de mon site du client. Le PHP pour qu'il vérifie que le souscripteur est à l'aide de leurs officiels ou de l'entreprise adresse de courriel pour vous abonner et d'autres/de plus simple, les validations.

Le formulaire fonctionne très bien mais le problème c'est que dès que la personne clique sur " soumettre le modal se ferme et l'utilisateur n'a pas la chance de voir le succès ou l'échec de message jusqu'à ce qu'ils rouvrir le modal à partir du bouton de déclenchement. Je veux que le modal à rester ouverte même après que l'utilisateur soumet le formulaire et afficher si le formulaire de soumission a été un succès ou non. J'espère que j'ai été en mesure d'expliquer mon problème correctement. Voici mon HTML & PHP pour votre référence:

HTML:

  <div id="footer">   
    <div class="container">
      <div class="col-md-6">
        <div id="SubscribeModal" class="modal fade" 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">✕</button>
              </div>
              <div class="modal-body">
                <?php include('subscribe.php') ?>
              </div>
              <div class="modal-footer"></div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dalog -->
        </div><!-- /.modal -->
        <a data-toggle="modal" href="#SubscribeModal" class="text-muted">Subscribe</a>
      </div>
    </div>
  </div>

PHP:

<?php
if(isset($_POST['subscribe'])){ 
/* Configuration */
$subject = 'Please subscribe me to your Risk Alerts. Thank you.'; //Set email subject    line here
$mailto  = '[email protected]'; //Email address to send form submission to
/* END Configuration */
if(empty($_POST['firstname'])){
$error = "Please add your first name";
}elseif(empty($_POST['lastname'])){
$error = "Please add your last name";
}elseif(empty($_POST['email'])){
$error = "Please add your business email";    
}else{ 
$firstname      = $_POST['firstname'];
$lastname       = $_POST['lastname'];
$email          = $_POST['email'];
//HTML for email to send submission details
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>Name</b>: $firstname $lastname<br>
<b>Email</b>: $email<br>
";
$headers = "From: $firstname $lastname <$email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";
//build list of not allowed providers as lowercase
$NotAllowedClients = array("aol","applemail","comcast","entourage","gmail","hotmail","outlook");
preg_match_all('/\@(.*?)\./',$email,$clientarr);            
$client = strtolower($clientarr[1][0]);            
if(in_array($client,$NotAllowedClients)){
//Failed
$notice = "<div class=\"row-fluid\">
<div class=\"span12\">
<h3>Subscription Failed!</h3>
<p>Please use an official/company email address to subscribe.  <a href=\"?\">Try again</a></p>
</div>
</div>"; 
}else{
//Passed
//echo $message;
mail($mailto, $subject, $message, $headers);
$notice = "<div class=\"row-fluid\">
<div class=\"span12\">
<h3>Subscription successful!</h3>
<p>Thank you for taking the time to subscribe to our weekly Risk Alerts.</p>
</div>
</div>";
}
}
} 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Risk Alerts</title>
</head>
<body>
<?php
if(isset($notice)){
echo $notice;
}else{
//Show error for missing field
if(isset($error)){echo $error;}
?>
<div class="thumbnail center well well-small text-center">
<form id="subscription" method="post" action="" class="validate" novalidate>
<div class="row">
<div class="col-xs-6 col-md-6">
<input type="text" name="firstname" value="" class="form-control input-md" placeholder="your first name"  />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" name="lastname" value="" class="form-control input-md" placeholder="your last name"  />
</div>
</div><p></p>
<input type="text" value="" name="email" class="form-control" placeholder="your email address" required /><br />
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" class="btn btn-md btn-primary button" />
</div>
</form>
</div> 
<?php
}
?>
</body>
</html>

Je suis assez sûr que la raison pour laquelle le modal est la fermeture est à cause de cette ... data-toggle="modal" dans votre bouton soumettre. Prendre cela et essayer de nouveau et il doit rester ouvert. Je n'ai pas testé.
Sinon la caisse ce lien .... groups.google.com/forum/#!topic/twitter bootstrap-stackoverflow/... ..... si cela ne fonctionne pas, vous pouvez utiliser le jquery à partir de ce lien stackoverflow.com/questions/15279716/....
Salut, merci pour la réponse. Mais si je supprime data-toggle="modal", puis le modal n'est pas ouvert à tous!! Je suis nouveau en PHP et Javascript ensemble. De toute façon j'ai essayé de mettre le JS fourni dans le lien par vous....juste avant la balise de fermeture body dans mon PHP, mais alors la forme ne fonctionne pas! 🙁 Je ne sais pas comment résoudre ce problème!

OriginalL'auteur user3463636 | 2014-03-27

Je n'ai pas vérifier votre véritable PHP, mais en supposant que cela fonctionne, je voudrais soumettre le formulaire avec ajax et traiter la réponse.

Donc, essayez les solutions suivantes:
Ajouter un ID à votre modal contenu:

          <div class="modal-body" id="modal_content">
<?php include('subscribe.php') ?>
</div>

Puis changer votre bouton envoyer pour cela :

<a href="javascript:void(0)" class="text-muted" id ="submit_button">Subscribe</a>

Puis ajouter cette jquery vers le bas de votre page de formulaire (remplacer DIRECT_URL_TO_SUBSCRIBE avec la bonne url):

jQuery(function ($){
$('#submit_button').click(function(){
var post_url = 'DIRECT_URL_TO_SUBSCRIBE.php';
$.ajax({
type : 'POST',
url : post_url,
data: $('#subscription').serialize(), //ID of your form
dataType : 'html',
async: true,
beforeSend:function(){
//add a loading gif so the broswer can see that something is happening
$('#modal_content').html('<div class="loading"><img scr="loading.gif"></div>');
},
success : function(data){
$('#modal_content').html(data);
},
error : function() {
$('#modal_content').html('<p class="error">Error in submit</p>');
}
});
})           
});

OriginalL'auteur david.philip

1

J'ai été à essayer de comprendre un problème similaire, donc je vais laisser pour l'avenir de google.

Ajouter à PHP:
```
    <?php
$keepOpen="";
if(isset($notice)){
$keepOpen="<script> $('#SubscribeModal').modal('show'); </script>";
```
Ajouter à HTML:
```
<?php echo $keepOpen; ?>
```
OriginalL'auteur Morgazm12345

Salut cela fonctionne,

    **data-backdrop="static"**

ajouter que pour l'amorçage de classe modale. Cela devrait résoudre le problème pour vous.

    <button type="button" data-backdrop="static" data-toggle="modal" 
data- target="#yourID">Subscribe</button>

Lire la suite de lien

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.