2009-02-12 15 views
2

Il y a des questions similaires à SO, mais aucune qui semble répondre à cela.jquery form plugin & programatic submit

Voici une variante très simplifiée de ma situation. Drupal/PHP site - J'ai un formulaire avec le bouton submit que j'utilise jquery.form plugin pour soumettre ajax-ly. Cela fonctionne très bien si j'utilise le bouton submit (#submit).

Maintenant, je veux programmer ce bouton en utilisant un autre bouton (# submit2) en dehors du formulaire. Je peux le faire en utilisant la fonction jquery click(), mais le contenu qui revient ne va pas à la cible ajax comme je m'y attendais.

Je n'ai pas beaucoup de liberté pour réorganiser ce code, sinon je le ferais.

(Notez que j'ai essayé de rendre ce code facile pour vous d'exécuter par jquery src-ing et le plug-in sous forme de mon site Web.)

Idées? Merci!

<?php 
if ($_REQUEST['submit'] == 'Submit') { 
    print 'ajax returns ... ' . $_REQUEST['text']; 
    exit; 
} 
?> 
<html> 
<head> 
    <script type="text/javascript" src="http://enjoy3d.com/scripts/jquery-1.2.6.js"></script> 
    <script type="text/javascript" src="http://enjoy3d.com/scripts/jquery.form.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#form').ajaxForm({ target: $('#span') }); 
      $('#submit2').click(function() { $('#submit').click(); }); 
     }); 
    </script> 
</head> 
<body> 
    <span id='span'>target span</span> 
    <form method='post' id='form'> 
     <input type='text' name='text' size='50' /> 
     <input type='submit' id='submit' name='submit' value='Submit'/> 
    </form> 
    <input type='submit' id='submit2' name='submit2' value='Submit Too?' /> 
</body> 
</html> 

Répondre

0

Vous devrez peut-être return false immédiatement après le déclenchement de la forme du bouton d'envoi du bouton de soumission non-formulaire, cliquez code d'événement. Par exemple:

<script type="text/javascript"> 
    $(function() { 
    $('#form').ajaxForm({ target: $('#span') }); 
    $('#submit2').click(function() { $('#submit').click(); return false; }); 
    }); 
</script> 

Cela fonctionne pour moi. Est-ce ce que vous cherchez?

+0

vraiment, cela a fonctionné pour vous? N'a fait aucune différence quand j'ai essayé votre suggestion. Cliquer sur submit2 a provoqué le rechargement de la page en affichant uniquement le contenu du résultat ajax (le champ de saisie disparaît) –

0

Avez-vous essayé de donner un nom à la forme, et au lieu de

$('#submit2').click(function() { $('#submit').click(); }); 

faire

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

Cela devrait faire la même chose que d'avoir le bouton d'envoi cliqué si le formulaire a été ajaxified .

+0

le plugin jquery.form lie la fonctionnalité à l'événement click du bouton submit, donc l'envoi direct du formulaire ne fonctionne pas –

1

J'ai réussi à résoudre une situation similaire à la vôtre. Si le seul objectif de la simulation d'un clic sur submit1 est de soumettre le formulaire, vous pouvez essayer:

$('#submit2').click(function() { 
    $('#form').trigger('submit'); 
});