web-dev-qa-db-fra.com

Comment puis-je faire un bouton "div" soumettre le formulaire sa place dans?

J'ai du code ASP.Net générant le HTML de mon bouton pour moi en utilisant des divs pour le faire ressembler et se comporter comme je veux. Cette question concerne le HTML produit par le code ASP.Net.

Un bouton standard est facile, il suffit de définir l'événement onClick de la div pour changer l'emplacement de la page:

<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>

Cela fonctionne très bien, cependant, si je veux qu'un bouton comme celui-ci soumette le formulaire dans lequel il réside, j'aurais imaginé quelque chose comme ci-dessous:

<form action="whatever.html" method="post">
    <div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
    Button Text
    </div>
</form>

Cependant, cela ne fonctionne pas :( Quelqu'un at-il des idées étincelantes?

htmlasp.netformssubmit
29
Jimbo
onClick="javascript:this.form.submit();">

this dans div onclick n'ont pas d'attribut form, vous pouvez essayer this.parentNode.submit() ou document.forms[0].submit() fera l'affaire

De plus, onClick, devrait être onclick, certains navigateurs ne fonctionnent pas avec onClick

36
YOU

Êtes-vous au courant de <button> éléments? <button> les éléments peuvent être stylisés comme <div> éléments et peut avoir type="submit" afin qu'ils soumettent le formulaire sans javascript:

<form action="whatever.html" method="post">  
    <button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">  
    Button Text
    </button>  
</form>

Utilisant un <button> est également plus sémantique, tandis que <div> est très générique. Vous bénéficiez gratuitement des avantages suivants:

  • JavaScript n'est pas nécessaire pour soumettre le formulaire
  • Outils d'accessibilité, par ex. les lecteurs d'écran, le traiteront (correctement) comme un bouton et ne feront pas partie du flux de texte normal
  • <button type="submit"> devient un bouton "par défaut", ce qui signifie que la touche de retour soumettra automatiquement le formulaire. Vous ne pouvez pas faire cela avec un <div>, vous devez ajouter un gestionnaire séparé keydown au <form> élément.

Il y a une (non) mise en garde: un <button> ne peut avoir que formulation du conten , bien qu'il soit peu probable que quiconque ait besoin d'un autre type de contenu lors de l'utilisation de l'élément pour soumettre un formulaire.

38
Andy E

Pour conserver les scripts au même endroit plutôt que d'utiliser onClick dans la balise HTML, ajoutez le code suivant à votre bloc de script:

$('#id-of-the-button').click(function() {document.forms[0].submit()});

Ce qui suppose que vous n'avez qu'un seul formulaire sur la page.

4
R Tobin

Pourquoi tout le monde doit-il compliquer les choses? Utilisez simplement jQuery!

<script type="text/javascript">
  $(document).ready(function() {
    $('#divID').click(function(){
      $('#formID').submit();
    )};
    $('#submitID').hide();
  )};
</script>

<form name="whatever" method="post" action="somefile.php" id="formID">
  <input type="hidden" name="test" value="somevalue" />
  <input type="submit" name="submit" value="Submit" id="submitID" />
</form>

<div id="divID">Click Me to Submit</div>

Le div n'a même pas besoin d'être dans le formulaire pour le soumettre. La seule chose qui manque ici est l'inclusion de jquery.js.

En outre, il existe un bouton Soumettre qui est masqué par jQuery, donc si un navigateur non compatible est utilisé, le bouton Soumettre s'affichera et permettra à l'utilisateur de soumettre le formulaire.

0
DarkLotus

Quelques points à noter:

  1. Les clients non compatibles JavaScript ne pourront pas envoyer votre formulaire
  2. La spécification w3c n'autorise pas les formulaires imbriqués en HTML - vous constaterez potentiellement que les balises d'action et de méthode sont ignorées pour ce formulaire dans les navigateurs modernes, et que d'autres contrôles ASP.NET ne post-back plus correctement (car leur formulaire a été fermé).

Si vous voulez qu'il soit traité comme une publication ASP.NET appropriée, vous pouvez appeler les méthodes fournies par le framework, à savoir __doPostBack(eventTarget, eventArgument):

<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
     onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
  Button Text
</div>
0
Zhaph - Ben Duguid