Comment soumettre un formulaire avec JavaScript en cliquant sur un lien?
au lieu d'un bouton Soumettre, j'ai un lien:
<form>
<a href="#"> submit </a>
</form>
puis-je lui faire soumettre le formulaire quand il est cliqué?
8 réponses
La meilleure façon
la meilleure façon est d'insérer une étiquette d'entrée appropriée:
<input type="submit" value="submit" />
Le meilleur JS façon
<form id="form-id">
<button id="your-id">submit</button>
</form>
var form = document.getElementById("form-id");
document.getElementById("your-id").addEventListener("click", function () {
form.submit();
});
entoure ce dernier code JavaScript par un événement DOMContentLoaded
(choisissez seulement load
pour compatibilité ascendante ) si vous ne l'avez pas déjà fait:
window.addEventListener("DOMContentLoaded", function () {
var form = document.... // copy the last code block!
});
facile, pas recommandable (l'ancien la réponse)
Ajouter un attribut onclick
au lien et un id
au formulaire:
<form id="form-id">
<a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>
</form>
Tous les moyens
quelle que soit la manière que vous choisissez, vous avez appelé formObject.submit()
éventuellement (où formObject
est L'objet DOM de la balise <form>
).
vous devez également lier un tel gestionnaire d'événements, qui appelle formObject.submit()
, de sorte qu'il est appelé lorsque l'Utilisateur a cliqué sur un lien spécifique ou bouton. Il y a deux façons:
-
recommandé: lier un écouteur d'événement à L'objet DOM.
// 1. Acquire a reference to our <form>. // This can also be done by setting <form name="blub">: // var form = document.forms.blub; var form = document.getElementById("form-id"); // 2. Get a reference to our preferred element (link/button, see below) and // add an event listener for the "click" event. document.getElementById("your-id").addEventListener("click", function () { form.submit(); });
-
Non recommandé: insérer JavaScript en ligne. Il y a plusieurs raisons pourquoi cette technique n'est pas recommandable. Un argument majeur est que vous mélangez le markup (HTML) avec les scripts (JS). Le code devient désorganisé et plutôt difficile à maintenir.
<a href="#" onclick="document.getElementById('form-id').submit();">submit</a> <button onclick="document.getElementById('form-id').submit();">submit</button>
maintenant, nous arrivons au point où vous devez décider pour L'élément UI qui déclenche l'appel submit ().
-
Un bouton
<button>submit</button>
-
Un lien
<a href="#">submit</a>
Appliquer les techniques susmentionnées afin d'ajouter un écouteur d'événement.
si vous utilisez jQuery et que vous avez besoin d'une solution en ligne, cela fonctionnerait très bien;
<a href="#" onclick="$(this).closest('form').submit();">submit form</a>
aussi, vous pourriez vouloir remplacer
<a href="#">text</a>
avec
<a href="javascript:void(0);">text</a>
afin que l'utilisateur ne faites défiler vers le haut de votre page en cliquant sur le lien.
vous pouvez donner le formulaire et le lien quelques ID et ensuite vous abonner pour l'événement onclick
du lien et submit
le formulaire:
<form id="myform" action="" method="POST">
<a href="#" id="mylink"> submit </a>
</form>
et ensuite:
window.onload = function() {
document.getElementById('mylink').onclick = function() {
document.getElementById('myform').submit();
return false;
};
};
je vous recommande d'utiliser un bouton Soumettre pour soumettre des formulaires car il respecte la sémantique de balisage et il fonctionnera même pour les utilisateurs avec Javascript désactivé.
HTML & CSS - pas de Solution Javascript
faites apparaître votre bouton comme un lien Bootstrap
HTML:
<form>
<button class="btn-link">Submit</button>
</form>
CSS:
.btn-link {
background: none;
border: none;
padding: 0px;
color: #3097D1;
font: inherit;
}
.btn-link:hover {
color: #216a94;
text-decoration: underline;
}
cela fonctionne bien sans fonction spéciale nécessaire. Beaucoup plus facile d'écrire avec php. <input onclick="this.form.submit()"/>
document.getElementById("theForm").submit();
ça marche parfaitement dans mon cas.
vous pouvez l'utiliser dans la fonction aussi comme,
function submitForm()
{
document.getElementById("theForm").submit();
}
définissez "le formulaire" comme votre ID de formulaire. C'est fait.
voici la meilleure solution à votre question: dans le formulaire, vous avez ce code:
<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>
dans le fichier CSS, faites ceci:
button{
display: none;
}
en JS pour ce faire:
$("a").click(function(){
$("button").trigger("click");
})
voilà.
<form id="mailajob" method="post" action="emailthijob.php">
<input type="hidden" name="action" value="emailjob" />
<input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>
<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>