Comment POST les données d'une forme modale de bootstrap?
J'ai une page utilisant un modal pour obtenir l'email des utilisateurs et je veux l'ajouter à une liste d'abonnés (qui est un Django). Voici le code modal pour ça:
<div id="notifications" class="modal hide fade" role="dialog" ara-labelledby="Notification" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4>Subscribe to Status Notifications</h4>
</div>
<form>
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your plivo service.</p>
</div>
<div class="modal-footer">
<input type="submit" value="SUBMIT" class="btn"/>
</div>
</form>
</div>
J'ai essayé de regarder dans le document Twitter Bootstrap Mais c'est vraiment minime. Je veux POST les données dans un Django view Qui écoute POST requests.
C'est l'essentiel. J'utilise regex pour comparer le format de l'e-mail avant de stocker l'identifiant de l'e-mail. Ainsi, si l'e-mail does not Correspond au regex, la vue renvoie un Invalid Email. Je voudrais donc informer l'utilisateur à ce sujet dans le modal lui-même. Mais je n'ai vraiment aucune idée de la façon de procéder. Quelqu'un, s'il vous plaît, aidez-moi.
MISE À JOUR:
J'ai essayé cela sur la base de la réponse de Karthikr:
<form id="subscribe-email-form" action="/notifications/subscribe/" method="post">
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your service.</p>
</div>
<div class="modal-footer">
<input id="subscribe-email-submit" type="submit" value="SUBMIT" class="btn" />
</div>
</form>
<script>
$(function(){
$('subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: "/notifications/subscribe/",
type: "POST",
data: $("subscribe-email-form").serialize(),
success: function(data){
alert("Successfully submitted.")
}
});
});
});
</script>
Il y a quelque chose qui me déroute. Qu'en est-il de l'événement onclick du modal button?
J? ai compris! J'ai ajouté name="Email" Dans la ligne <input type="email" placeholder="email"/>
Le champ Django recherche le Email Field. Donc dans mon Django vue le code est:
request.POST.get("Email", '') il est donc utile de spécifier le nom du champ.
Mais cela m'amène à l'URL où je poste. Je veux qu'il affiche une alerte sur la même page.
MISE À JOUR 2:
La partie 1 fonctionne donc. Comme dans les postes fonctionnent. Maintenant, je dois montrer un modal pour le succès ou l'échec. Voici ce que j'essaie:
J'ai donc créé ce modal avec un textarea:
<div id="subscription-confirm" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<label id="responsestatus"></label>
</div>
</div>
Et le javascript:
<script>
$(function(){
$('#subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: 'notifications/subscribe/',
type: 'POST',
data: $('#subscribe-email-form').serialize(),
success: function(data){
$('#responsestatus').val(data);
$('#subscription-confirm').modal('show');
}
});
});
});
</script>
Le modal apparaît donc. mais les données ne sont pas set dans le champ label du modal.
Vous devez le gérer via ajax submit.
Quelque chose comme ça:
$(function(){
$('#subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: url, //this is the submit URL
type: 'GET', //or POST
data: $('#subscribe-email-form').serialize(),
success: function(data){
alert('successfully submitted')
}
});
});
});
Une meilleure façon serait d'utiliser un formulaire Django, puis de rendre l'extrait de code suivant:
<form>
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your plivo service.</p>
</div>
<div class="modal-footer">
<input type="submit" value="SUBMIT" class="btn"/>
</div>
</form>
via le contexte - exemple: {{form}}.
J'étais confronté au même problème, je ne pouvais pas poster de formulaire sans ajax. mais j'ai trouvé une solution, j'espère que cela peut aider et le temps de quelqu'un.
<form name="paymentitrform" id="paymentitrform" class="payment"
method="post"
action="abc.php">
<input name="email" value="" placeholder="email" />
<input type="hidden" name="planamount" id="planamount" value="0">
<input type="submit" onclick="form_submit() " value="Continue Payment" class="action"
name="planform">
</form>
Vous pouvez soumettre un formulaire de publication, à partir de bootstrap modal en utilisant le code javascript/jquery ci-dessous: appelez la fonction ci-dessous en cliquant sur le bouton de soumission d'entrée
function form_submit() {
document.getElementById("paymentitrform").submit();
}
Vous POUVEZ inclure un modal dans un formulaire. Dans la documentation Bootstrap, il recommande que le modal soit un élément de "haut niveau", mais il fonctionne toujours dans un formulaire.
Vous créez un formulaire, puis le bouton "enregistrer" du modal sera un bouton de type = "soumettre" pour soumettre le formulaire à partir du modal.
<form asp-action="AddUsersToRole" method="POST" class="mb-3">
@await Html.PartialAsync("~/Views/Users/_SelectList.cshtml", Model.Users)
<div class="modal fade" id="role-select-modal" tabindex="-1" role="dialog" aria-labelledby="role-select-modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Select a Role</h5>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add Users to Role</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
Vous pouvez publier (ou OBTENIR) vos données de formulaire sur n'importe quelle URL. Par défaut, il s'agit de l'URL de la page de diffusion, mais vous pouvez la modifier en définissant le formulaire action. Vous n'avez pas besoin d'utiliser ajax.