6
votes

Comment faire un formulaire Soumettre sur Div Cliquez sur Utiliser JQuery?

J'ai déjà essayé cela dans un fichier PHP unique, mais je ne fonctionne pas, j'ai donc essayé maintenant dans deux fichiers PHP distincts un pour le formulaire et un autre pour le processus.

Comment soumettre le formulaire sur un div ou un lien Cliquez sur? p>

Code J'ai essayé P>

<?php
if(isset($_POST['f1'])){
    echo $_POST['f1'];
} ?>


0 commentaires

6 Réponses :


3
votes

Vous pouvez déclencher le bouton Soumettre cliquer sur.

<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>

<div class="web">click</div>



 $(document).ready(function(){
       jQuery('.web').click(function () {
        $("#f_submit").trigger( "click" );
          alert('alert');
    });
  });


5 commentaires

Merci +1. Cela marche. Ce serait utile pour moi si je connais la raison pour laquelle il ne fonctionnait pas


Je ne sais pas exactement, devinez que ce serait à cause du nom (soumettre) de l'entrée Soumettre. Utilisez un autre nom et essayez.


Oui. Il est sûrement lié à ce domaine de saisie, car de la renommer (voir @senthilmurugan réponse) ou de le retirer (voir ma réponse) Cela commence à fonctionner.


@Rrram: Oui c'était le problème du nom du bouton.


Consultez ma réponse sur la raison pour laquelle cela se produit, lorsque vous utilisez un nom de propriété de formulaire comme nom de l'élément, il écrase la propriété du formulaire avec ce nom



-1
votes
$(".web").live('click', DivClick);

function DivClick(){
    $("#g_form").submit();
}

0 commentaires

1
votes

Modifiez le nom de la soumission et essayez, xxx


2 commentaires

Pas sûr de la raison.


Merci pour votre aide. + 1



1
votes

Supprimer la soumission du formulaire et réessayez:

<form action="http://test.com" id="g_form" method="GET">
    <input type="text" name="f1" value=""/>
</form>

<div class="web">click</div>


1 commentaires

Merci pour votre aide. + 1



5
votes

.Submit () docs

Les formulaires et leurs éléments enfants ne doivent pas utiliser de noms d'entrée ou d'ID qui conflit avec des propriétés d'un formulaire, tels que Soumettre, longueur ou méthode. Les conflits de noms peuvent causer des échecs déroutants. Pour une liste complète de règles et vérifier votre balisage pour ces problèmes, voir Domlint . em> p> blockQuote>

Vous donnez à votre bouton d'envoi un nom de Soumettre, que le passage ci-dessus indique que vous causerez des «défaillances déroutantes» p>

donc si vous avez accédé à l'élément DOM et examiné le .Submit code> Propriété Vous verrez que, puisque vous nommez le bouton Soumettre au lieu de .Submit code> être une fonction sa référence à la touche DOM ELEMENT P>

HTML P >

var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] } 


5 commentaires

Merci +1. Est-ce que ceci est [0] pour former en JS?


@Rram, puisque JQuery renvoie un tableau lorsque vous sélectionnez Éléments, cela obtient simplement l'objet DOM sous-jacent de l'objet JQuery. c'est un raccourci au lieu de devoir faire $ ("# g_form"). Obtenez (0);


@Rram, tous les sélecteurs JQuery sont également des tableaux. Même si c'est un élément, c'est toujours un tableau. Ainsi, document.getElementyID ("myid") est le résultat identique que $ ("# myid") [0] .


Désolé de poser des questions, alors pourquoi les gens disent par exemple $ ('. Graphique'). Quelque chose d'objet JQuery et de sélecteurs au lieu de tableaux @AlexanderMP


@Rram, parce que cela fait plus qu'un tableau. Vous pouvez $ $ ('...'). Fadeout () Par exemple. Vous ne pouvez pas faire cela avec des tableaux. Cette fonctionnalité est fournie par JQuery. Ceci est un objet jQuery.



2
votes

HTML (fournissez un nom pour le formulaire, enlèverez le nom du nom de l'envoi): XXX PRE>

JavaScript P>

//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
    //use on(), as it's the recommended method
    $('.web').on('click', function () {
        //use plain JavaScript. Forms are easily accessed with plain JavaScript.
        document.g_form.submit();
        alert('alert');
    });
});


1 commentaires

Merci +1 pour la nouvelle façon document.g_form.submit ();