Modifier la forme ajax soumettre la valeur et l'état onClick

J'ai une forme ajax que j'utilise pour traiter des données sans actualiser la page. Tout fonctionne, sauf que le bouton de soumission n'est pas animé, ce qui est un problème si vous utilisez ajax.Modifier la forme ajax soumettre la valeur et l'état onClick

J'ai essayé plusieurs suggestions de méthodes ici pour l'animer mais pas de chance.

Mon script pour l'ajax est;

$(document).ready(function() { 
     $('#submitform').ajaxForm({ 
      target: '#error', 
      success: function() { 
      $('#error').fadeIn('slow'); 
      } 
     }); 
    });

processus.php ressemble à ceci;

<?php 

if((strlen($_POST['fname']) < 1)){ 

    if(strlen($_POST['amount']) < 1){ 
     $emailerror .= '<span>Kindly enter full name</span>'; 
    } 

} else { ?> 
<span>Thank You</span> 
<?php } ?> 

<?php echo $emailerror; ?>

Et la forme est une forme simple;

<form id="submitform" action="process.php" method="post"> 
<input type="text" name="fname" placeholder="Full Name" /> 
<select name="values"><option value="1">Value 1</option></select> 
<input type="submit" value="Send" /> 
</form>

Lorsque je clique sur soumettre, le formulaire est envoyé à process.php et après une validation réussie, la forme est traitée et une page de remerciement est affiché sinon une erreur est affiché. Ce que je veux faire est, lorsque l'utilisateur clique sur soumettre, la valeur du bouton de soumission devrait changer pour «traitement ...» et devenir désactivé. Si la validation renvoie une erreur, le bouton de soumission doit revenir à l'état normal.

Mise à jour: Lorsque j'ajoute une entrée select au formulaire, le script ci-dessous cesse de fonctionner.

Source

2017-08-29 Jay Smoke

La seule chose dont vous avez besoin est de modifier le bouton lui-même, essayez cette

$(document).ready(function() { 
    var btnSubmit = $('#submitform'); 
    btnSubmit.ajaxForm({ 
    target: '#error', 
    success: function() { 
     $('#error').fadeIn('slow'); 
     btnSubmit.text("Send form"); // put your normal text 
     btnSubmit.removeAttr("disabled"); 
    }, 
    error: function() { 
     // enable and put the normal text in case of error 
     btnSubmit.text("Send form"); // put your normal text 
     btnSubmit.removeAttr("disabled"); 
    }, 
    beforeSend: function(){ 
     btnSubmit.text("Proccesing..."); 
     btnSubmit.attr("disabled", "disabled"); 
    } 
    }); 
});

ÉDITÉE

Désolé pour mauvais post, je ne vois pas vos balises HTML, afin d'avoir votre code HTML, s'il vous plaît modifier vos balises un peu, il suffit d'ajouter une carte d'identité à votre bouton d'envoi, comme celui-ci

<form id="submitform" action="process.php" method="post"> 
<input type="text" name="fname" placeholder="Full Name" /> 
<input id="submitterButton" type="submit" value="Send" /> 
</form>

et vous pouvez utiliser dans la partie JS.

donc beforeSend s'exécutera avant l'exécution d'ajax.

Espérons qu'il peut résoudre votre problème.

Source

2017-08-29 17:01:36

hey Johuder, thanxxx pour le Mehn effort, mais quand je clique sur le bouton soumettre, toute la forme disparaît et seul le « Envoyer le formulaire " est montré. –

Quand vous dites modifier le bouton lui-même, que voulez-vous dire? @Johuder –

@JaySmoke désolé d'avoir répondu en retard, j'ai fait une erreur en postant mon exemple, je n'ai pas cherché les balises HTML que vous nous avez données, c'est le cas, laissez-moi éditer mon post pour mieux répondre, quand je me réfère à modifier le bouton de soumission lui-même, je veux dire que vous devez modifier le texte et l'état désactivé du bouton Soumettre. –

l'extrait fait ci-dessous l'astuce

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
<form id="submitform" action="process.php" method="post"> 
 
<input type="text" name="fname" placeholder="Full Name" /> 
 
<input type="submit" value="Send" disabled="disabled" /> 
 
</form> 
 

 
<script 
 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
    crossorigin="anonymous"></script> 
 

 
<script type="text/javascript"> 
 
\t $(document).ready(function() { 
 
\t \t 
 
\t \t $('#submitform').submit(function (event) { 
 
\t \t \t event.preventDefault(); 
 
\t \t \t $('input[type="submit"]').val('Processing...'); 
 
\t \t \t $('input[type="submit"]').attr('disabled', true); //assuming that you have a CSS to do that. 
 

 
\t \t \t $.ajax({ 
 
\t \t \t \t type: 'POST', 
 
\t \t \t \t data: $('submit').serialize(), 
 
\t \t \t \t url: $('submit').attr('action') 
 
\t \t \t }).done(function (result) { 
 
\t \t \t \t $('input[type="submit"]').val('Send'); 
 
\t \t \t \t $('input[type="submit"]').attr('disabled', false); 
 
\t \t \t }).fail(function (argument) { 
 
\t \t \t \t // handle faillure 
 
\t \t \t }) 
 

 
\t \t }); 
 

 
\t }); 
 
</script> 
 

 
</body> 
 
</html>

Source

2017-08-29 17:06:58

Salut Luiz, merci pour l'effort, mais quand je clique sur soumettre, ça change en Traitement ... et c'est tout. Le formulaire n'est pas traité. –

Je ne connais pas PHP, en fait, alors peut-être qu'il y a une erreur sur le côté serveur. Avez-vous implémenté la fonction de gestionnaire d'échec? Les outils de développement ont-ils montré quelque chose? –

Et je ne suis pas vraiment familier avec javascripting hehe, qu'est-ce que vous mettez dans le gestionnaire d'échec? –

Modifier la forme ajax soumettre la valeur et l'état onClick

Répondre

Questions connexes