web-dev-qa-db-fra.com

Soumettre un formulaire html sans avoir de bouton d'envoi?

Puis-je soumettre un <form> html avec <div> au lieu de <input type="submit">?

Comme ça:

<form method="post" action="" id="myForm">
<textarea name="reply">text</textarea>
</form>

<div>Submit the form by clicking this</div>
jqueryhtmlforms
13
Richard Rodriguez

Assez facile;

document.getElementById("myForm").submit();

Et si vous voulez le faire style jQuery (qui je ne recommande pas pour une tâche aussi simple );

$("#myForm").submit();
34
japrescott

Oui, c'est assez simple. Il suffit d'utiliser la submit[documentation jQuery] méthode à l'intérieur d'une fonction de gestionnaire click.

$("#myDiv").click(function() {
 $("#myForm").submit();
});

Si vous préférez, vous pouvez le faire avec Javascript Javascript:

document.getElementById("myDiv").onclick = function() {
  document.getElementById("myForm").submit();
};
7
Peter Olson

Lier l'événement de clic div.

$("div").click(function(){ $("form#myForm").submit(); });

3
Dvir Azulay
$('#myDiv').click(function() {  
    $('#myForm').submit();
});
3
Sparky

En utilisant jquery:

$('#myForm').submit();
2
Samich

Si vous souhaitez utiliser inutilement JavaScript, vous pouvez…

jQuery('div').click(function () { jQuery('form').submit(); });

… Cependant, vous devez utiliser un code HTML sémantique qui fonctionne sans la présence de JS. Utilisez donc un véritable bouton de soumission et appliquez CSS pour que celui-ci se présente comme vous le souhaitez.

2
Quentin

Pour une meilleure sémantique et une dégradation gracieuse, je vous suggère de faire ceci:

$(document).ready(function(){
    $('form input[type="submit"]').replaceWith('<div class="submit">Submit the form by clicking this</div>'); // replace submit button with div

    $('.submit').live('click', function() {  
        $(this).closest('form').submit();
    });
});

De cette façon, votre formulaire reste utilisable pour les clients sans JS.

Cela étant dit: stylez simplement vos entrées de manière à ce que vous le fassiez avec CSS;)

2
vzwick

pourquoi ne pas simplement appeler un bouton pour ressembler à une div régulière? :)

button{
    border:none;
    background:none;
    padding:0;
    text-align:left; 
}
0
Andy
<?php
if(isset($_POST['text']) && !empty($_POST['text']))
{
   echo $text_val = $_POST['text'];
}

?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
        <form method="post" action="Enter your action">
        <p><label>Enter your Text : </label>
        <input type="text" name="text" id="text" onmouseover="this.form.submit();"></input>
        </p>
        </form>
</body>
</html>
0
user2956239

Seulement en utilisant JavaScript, vous utiliserez généralement jQuery et lierez l’événement click de la div à l’événement submit du formulaire.

Voir: http://api.jquery.com/submit/

L'exemple ci-dessous montre même ce scénario exact.

0
simbolo

Que dis-tu de ça:

 $(document).ready(function() {
     $('#submitDiv').click(function() {
        $('#myForm').submit();
     });

}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" id="myForm">
<textarea name="reply">text</textarea>
</form>

<div id="submitDiv">Submit the form by clicking this</div>

0
Piotr Perak