bouton submit inactif
Bonjour,
J'ai un problème avec mon code, j'ai une page principale qui fais appel a 2 fenêtres modales : une avec un formulaire : reinitialiser et l'autre inscriptionForm.
Je n'ai aucun problème avec le premier par contre le second ne fais aucune action lorsque je clique sur le bouton submit
voici le code de ma fenêtre modale contenant inscriptionForm
<center>
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Inscription C@STOR</h4>
</div>
<div class="modal-body">
<form id="inscriptionForm" method="post" action="Controler/controler_inscription.php">
<div class="alert">
<div id="reponse"></div>
</div>
<div class="clearfix row">
<div class="form-group form-inline" id="nniuse">
<label for="Login" class="control-label col-md-offset-2 col-md-4"> NNI : </label>
<input type="text" class="form-control col-md-4" name="login" id="login" onblur="checknni()"placeholder="NNI" required>
<p class="help-block col-md-offset-4 col-md-8" id="nnioccupe"style="display:none">Ce NNI est déjà utilisé</p>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline" id="nnigrp">
<label for="Login" class="control-label col-md-offset-2 col-md-4">Confirmation du NNI : </label>
<input type="text" class="form-control col-md-4"name="login" id="confirmLogin" onblur="checknni()" placeholder="NNI" required>
<p class="help-block col-md-offset-4 col-md-8" id="nnihelp"style="display:none">Les NNI sont différents</p>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="Nom" class="control-label col-md-offset-2 col-md-4"> Nom : </label>
<input type="text" class="form-control col-md-4"name="Nom" id="nom" placeholder="Nom" required>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="prenom" class="control-label col-md-offset-2 col-md-4"> Prénom : </label>
<input type="text" class="form-control col-md-4"name="prenom" id="prenom" placeholder="Prénom" required>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="password"class="control-label col-md-offset-2 col-md-4"> Mot de passe: </label>
<input type="password" class="form-control col-md-4"name="password" id="motdepasse" onblur="checkmdp()"placeholder="mot de passe" required>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline" id="mdpgrp">
<label for="password"class="control-label col-md-offset-2 col-md-4">Confirmation Mot de passe: </label>
<input type="password" class="form-control col-md-4"name="password" id="confirmPassword" onblur="checkmdp()"placeholder="mot de passe" required>
<p class="help-block col-md-offset-4 col-md-8" id="mdphelp"style="display:none">Les mots de passes sont différents</p>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline" id="mailgrp">
<label for="mail" class="control-label col-md-offset-2 col-md-4"> Mail : </label>
<input text name="mail" class="form-control col-md-4"id="mail" placeholder="Mail" onblur="isEmail()" required />
<p class="help-block col-md-offset-4 col-md-8" id="mailhelp"style="display:none">Saisissez une adresse mail valide</p>
</div>
</div>
<div class="form-group form-inline" id="telfixe">
<label for="fixe" class="control-label col-md-offset-2 col-md-4"> Téléphone fixe : </label>
<input text name="fixe"class="form-control col-md-4" id="fixe" onblur="checkTel()" placeholder="Téléphone" maxlength="10" required />
<p class="help-block col-md-offset-4 col-md-8" id="telhelp"style="display:none">Entrer un numéro valide (10 chiffres)</p>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline" id="telmobile">
<label for="mobile" class="control-label col-md-offset-2 col-md-4"> Téléphone Mobile : </label>
<input text name="mobile"class="form-control col-md-4" id="mobile" onblur="checkMobile()" placeholder="Portable" maxlength="10" />
<p class="help-block col-md-offset-4 col-md-8" id="mobilehelp"style="display:none">Entrer un numéro valide (10 chiffres)</p>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="region" class="control-label col-md-offset-2 col-md-4"> Région : </label>
<select id="region" class="form-control selectpicker col-md-4" onchange="loadGuichet(this.value)">
<option value='' selected>Choisissez une région</option>
</select>
</div>
</div>
<div class="clearfix row">
<div class="form-group form-inline">
<label for="guichet" class="control-label col-md-offset-2 col-md-4"> Guichet : </label>
<select id="guichet" class="form-control selectpicker col-md-4" data-live-search="true">
<option value='' selected>Choisissez un guichet</option>
</select>
</div>
</div>
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option data-subtext="Rep California">Tom Foolery</option>
<option data-subtext="Sen California">Bill Gordon</option>
<option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
<option data-subtext="Rep Alabama">Mario Flores</option>
<option data-subtext="Rep Alaska">Don Young</option>
<option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
</select>
</br>
<button type="submit" id="inscriptionsubmit" class="btn btn-primary">S'inscrire</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal">Fermer</button>
</div>
</center>
```et voici le code js
$(document).ready(function () {
$('#reinitialiser').submit(function (e) {
e.preventDefault();
$.ajax(
{
url: $(this).attr('action'),
type: $(this).attr('method'),
data : $(this).serialize(),
dataType: 'json', //JSON
success:function(json)
{
console.log(json);
document.getElementById("reponse").innerHTML= json.reponse;
if (json.erreur==true)
{
if ($("div.alert").hasClass("alert-success"))
{
$("div.alert").removeClass("alert-success");
}
$("div.alert").addClass("alert-danger");
}
else
{
if ($("div.alert").hasClass("alert-danger"))
{
$("div.alert").removeClass("alert-danger");
}
$("div.alert").addClass("alert-success");
}
},
error:function(json)
{
console.log(json);
alert(json.reponse);
}
})
});
$('#inscriptionForm').submit(function (e) {
e.preventDefault();
console.log("yo");
$.ajax(
{
url: $(this).attr('action'),
type: $(this).attr('method'),
data : $(this).serialize(),
dataType: 'json', //JSON
success:function(json)
{
console.log(json);
},
error:function(json)
{
console.log(json);
}
})
});
$('#inscription').on('loaded.bs.modal',function(){
$.ajax(
{
url: "Script/loadInscription.php",
type: "POST",
dataType:'json',
success:function(json)
{
var myselect = document.getElementById('region');
for (var region of json)
{
var option = document.createElement("option");
option.text=region.nom;
option.value=region.id;
myselect.add(option);
}
}
})
});
6 réponses
problème résolu, j'avais un </div> mon formulaire se soumet maintenant mais ne passe pas par le script js j'ai l'impression
Hello,
A première vue tu charge le formulaire en Ajax.
Donc, ton selecteur $("#monForm"), n'existe pas au chargement de la page.
Il faut donc faire
$(document).on('submit', '#monForm', function(event){
event.preventDefault();
});je charge le formulaire avec :
<div class="row">
<div class="col-md-offset-5 col-md-3">
<button data-toggle="modal" id='reinitialisermdp' href="Vue/vue_reinitialisation_mot_de_passe.php" data-target="#infos" data-backdrop="false" class="btn btn-warning btn-block">
Réinitialiser le mot de passe
</button>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-3">
<button data-toggle="modal" href="Vue/vue_inscription.php" data-target="#inscription" data-backdrop="false" class="btn btn-success btn-block">
S'inscrire sur C@STOR
</button>
</div>
</div>
donc de la même manière pour reinitialiser que inscriptionForm, je comprend donc pas pourquoi cela fonctionne avec l'un et non avec l'autre
même avec le morceau de code que tu m'a passé, j'ai rajouté un console.log("yo"); pour voir si cela fonctionnait mais je n'ai toujours rien lorsque je clique sur le bouton submit.
j'ai trouvé un élement assez bizarre au moment ou j'inspecte la page de ma fenêtre modale, celle-ci indique la fin de mon <form>
juste après mon champs téléphone fixe, cela expliquerait pourquoi le bouton ne fonctionne pas, cependant dans le code, il n'y a bien qu'une fin de form et uniquement après le bouton submit, une idée?
