web-dev-qa-db-fra.com

Comment exécuter le code après la réinitialisation du formulaire html avec jquery?

Après avoir cliqué sur un bouton de réinitialisation html,

<input type="reset" />

Je voudrais exécuter du code. Comment puis-je faire cela et m'assurer que le formulaire a été réinitialisé avant de le faire?

javascripthtmljquery
37
Brian David Berman

L'utilisation de setTimeout comme Ben le fait ici est préférable: https://stackoverflow.com/a/21641295/144665

$("input[type='text']").val('Hello Everybody!');

$("input[type='reset']").closest('form').on('reset', function(event) {

  // executes before the form has been reset
  console.log('before reset: ' + $("input[type='text']").val());

  setTimeout(function() {
    // executes after the form has been reset
    console.log('after reset: ' + $("input[type='text']").val());
  }, 1);

});

Vous voudrez peut-être restreindre ce sélecteur de formulaire au formulaire spécifique concerné, éventuellement avec un identifiant.

Fiddle Proof: http://jsfiddle.net/iambriansreed/Zh5cd/

44
iambriansreed

Je n'aime pas particulièrement l'idée de lier l'événement de réinitialisation au bouton de réinitialisation au lieu du formulaire. Un formulaire peut être réinitialisé par d'autres moyens et dans ces cas, votre événement ne se déclenchera pas.

Liez plutôt la fonction à l'événement reset, mais placez-la dans un setTimeout instantané. Cela permettra de s'assurer que le formulaire est réellement réinitialisé avant d'appeler la fonction.

$('form').on('reset', function(e)
{
    setTimeout(function() { /* ... */ });
});
130
Ben Fleming

Mise à jour: utilisez preventDefault au lieu de return false.

$('input[type="reset"]').click(function(evt) {
    // Prevent the reset button from firing the form's reset event again
    evt.preventDefault();
    $(this).closest('form').get(0).reset();
    // At this point your form's inputs should have their values reset
});

http://jsfiddle.net/EYqrX/1/

2
Mike Mertsock

La suggestion est qu'au lieu d'utiliser <input type='Reset'>, utilisez <input type = "button"> de cette façon, vous n'avez pas à arrêter le comportement par défaut du bouton reset. Vous devez simplement ajouter l'attribut onclick au bouton et dans la fonction, vous pouvez appeler la méthode de réinitialisation du formulaire à tout moment et contrôler le comportement à votre guise. Le code suivant illustre cela

HTML: 

<input type="button" value="Limpiar" onclick="resetForm(this);"/>

JavaScript: 

function resetForm(element) {
    //Do what you need before reset the form
    element.form.reset(); //Reset manually the form
    //Do what you need after reset the form
}
1
IgniteCoders

Voici un exemple d'utilisation de l'événement onreset similaire à l'utilisation habituelle de l'événement onsubmit de l'élément de formulaire pour intercepter de cliquer sur un bouton d'envoi L’exemple onsubmit est ajouté à des fins de clarification.

Dans votre script:

function submitForm(form){
    var xhr = new XMLHttpRequest(),
        data = new FormData(form);

    xhr.open("POST", url, true);
    xhr.onload = function(event) {
        switch (event.target.status){
            case 200:
                onSuccess(event);
                break;
            default:
                onError(event);
        }
    };
    xhr.send(data);
    return false;
}

function resetForm(form){
    var elements = form.elements;
    // set some initial values to those form elements
    return false;
}

Dans votre html:

<form onsubmit="return submitForm(this);" onreset="return resetForm(this);">
    <button type="submit">Save</button>
    <button type="reset">Reset</button>
</form>
0
Wilt

Réinitialisez le contenu de l'affichage lorsque vous cliquez sur le bouton de réinitialisation.

$('.custom-file-input').on('change', function(){
    const $label = $(this).next('.custom-file-label');
    const fileName = $(this).val().split('\\').pop(); 
    $label.data('default', $label.html());
    $label.addClass('selected').html(fileName);
});

$('form').on('reset', function(){
    $('.custom-file-input').each(function(){
        const $label = $(this).next('.custom-file-label');
        $label.html($label.data('default'));
    });
});
0
Logue

essayer

$('your-form').bind('reset', function() {
  alert('hi');
});
0
Dominic