web-dev-qa-db-fra.com

Arrêter la page d'actualisation du formulaire lors de l'envoi

Comment pourrais-je empêcher la page d'actualiser en appuyant sur le bouton d'envoi sans aucune donnée dans les champs?

La validation fonctionne correctement, tous les champs sont rouges, mais la page est immédiatement actualisée. Ma connaissance de JS est relativement basique.

En particulier, je pense que la fonction processForm() en bas est "mauvaise".

HTML

<form id="prospects_form" method="post">
    <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" />
    <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" />
    <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" />
    <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>

    <button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button>
    <div id="form_validation">
        <span class="form_captcha_code"></span>
        <input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" />
    </div>
    <div class="clearfix"></div>
</form>

JS

$(document).ready(function() { 

// Add active class to inputs
$("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); });
$("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); });
// Remove active class from inputs (if empty)
$("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } });
$("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } });



///////////////////
// START VALIDATION
$("#prospects_form").ready(function() {

    // DEFINE GLOBAL VARIABLES
    var valName = $('#form_name'),
        valEmail = $("#form_email"),
        valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        valMsg = $('#form_message'),
        valCaptcha = $('#form_captcha'),
        valCaptchaCode = $('.form_captcha_code');



    // Generate captcha
    function randomgen() {
        var rannumber = "";
        // Iterate through 1 to 9, 4 times
        for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); }
        // Apply captcha to element
        valCaptchaCode.html(rannumber);
    }
    randomgen();


    // CAPTCHA VALIDATION
    valCaptcha.blur(function() {
        function formCaptcha() {
            if ( valCaptcha.val() == valCaptchaCode.html() ) {
                // Incorrect
                valCaptcha.parent().addClass("invalid");
                return false;
            } else {
                // Correct
                valCaptcha.parent().removeClass("invalid");
                return true;
            }
        }
        formCaptcha();
    });

    // Remove invalid class from captcha if typing
    valCaptcha.keypress(function() {
        valCaptcha.parent().removeClass("invalid");
    });


    // EMAIL VALIDATION (BLUR)
    valEmail.blur(function() {
        function formEmail() {
            if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmail();
    });

    // Remove invalid class from email if typing
    valEmail.keypress(function() {
        valEmail.removeClass("invalid");
    });


    // VALIDATION ON SUBMIT
    $('#prospects_form').submit(function() {
        console.log('user hit send button');

        // EMAIL VALIDATION (SUBMIT)
        function formEmailSubmit() {
            if (!valEmailFormat.test(valEmail.val())) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmailSubmit();

        // Validate captcha
        function formCaptchaSubmit() {
            if( valCaptcha.val() === valCaptchaCode.html() ) {
                // Captcha is correct
            } else {
                // Captcha is incorrect
                valCaptcha.parent().addClass("invalid");
                randomgen();
            }
        }
        formCaptchaSubmit();


        // If NAME field is empty
        function formNameSubmit() {
            if ( valName.val() === "" ) {
                // Name is empty
                valName.addClass("invalid");
            } else {
                valName.removeClass("invalid");
            }
        }
        formNameSubmit();


        // If MESSAGE field is empty
        function formMessageSubmit() {
            if ( valMsg.val() === "" ) {
                // Name is empty
                valMsg.addClass("invalid");
            } else {
                valMsg.removeClass("invalid");
            }
        }
        formMessageSubmit();


        // Submit form (if all good)
        function processForm() {
            if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) {
                $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
                $("#form_send").attr("type", "submit");
                return true;
            } else if( !formEmailSubmit() ) {
                valEmail.addClass("invalid");
                return false;
            } else if ( !formCaptchaSubmit() ) {
                valCaptcha.parent().addClass("invalid");
                return false;
            } else if ( !formNameSubmit() ) {
                valName.addClass("invalid");
                    return false;
                } else if ( !formMessageSubmit() ) {
                    valMsg.addClass("invalid");
                    return false;
                } else {
                    return false;
                }
            }
        });
    });
    // END VALIDATION
    /////////////////
});
javascriptjqueryhtmlforms
86
M_Willett

Vous pouvez empêcher le formulaire de soumettre avec

$("#prospects_form").submit(function(e) {
    e.preventDefault();
});

Bien sûr, dans la fonction, vous pouvez rechercher des champs vides, et si quelque chose ne va pas, e.preventDefault() arrêtera la soumission.

117
Overcode

Remplacez le type de bouton par button:

<button type="button">My Cool Button</button>
60
Vicky Gonsalves

Ajoutez ce code onsubmit = "return false":

<form name="formname" onsubmit="return false">

Cela a réglé le problème pour moi. Il continuera d'exécuter la fonction onClick que vous spécifiez

51
user3413723

Vous pouvez utiliser ce code pour la soumission de formulaire sans actualisation de page. Je l'ai fait dans mon projet.

$(function () {
    $('#myFormName').on('submit',function (e) {

              $.ajax({
                type: 'post',
                url: 'myPageName.php',
                data: $('#myFormName').serialize(),
                success: function () {
                 alert("Email has been sent!");
                }
              });
          e.preventDefault();
        });
});
11
safeer008

Ce problème devient plus complexe lorsque vous donnez à l'utilisateur 2 possibilités pour soumettre le formulaire:

  1. en cliquant sur un bouton ad hoc
  2. en appuyant sur la touche Entrée

Dans un tel cas, vous aurez besoin d'une fonction qui détecte la touche enfoncée dans laquelle vous allez soumettre le formulaire si la touche Entrée a été frappée.

Et maintenant vient le problème avec IE (en tout cas la version 11) Remarque: Ce problème n'existe ni avec Chrome ni avec FireFox!

  • Lorsque vous cliquez sur le bouton d'envoi, le formulaire est soumis une fois. bien.
  • Lorsque vous appuyez sur Enter, le formulaire est soumis deux fois ... et votre servlet sera exécuté deux fois. Si vous n'avez pas d'architecture PRG (post redirect get) sur les serveurs, le résultat peut être inattendu.

Même si la solution semble banale, il m'a fallu de nombreuses heures pour résoudre ce problème. J'espère donc que cela pourrait être utile pour d'autres personnes. Cette solution a été testée avec succès, entre autres, sur IE (v 11.0.9600.18426), FF (v 40.03) & Chrome (v 53.02785.143 m 64 bit)

Le code source HTML & js se trouve dans l'extrait de code. Le principe est décrit ici . Attention:

Vous ne pouvez pas le tester dans l'extrait, car l'action post n'est pas défini et en appuyant sur Entrée peut interférer avec stackoverflow.

Si vous rencontrez ce problème, il vous suffit de copier/coller du code js dans votre environnement et de l’adapter à votre contexte.

/*
 * inForm points to the form
 */
var inForm = document.getElementById('idGetUserFrm');
/*
 * IE submits the form twice
 * To avoid this the boolean isSumbitted is:
 *  1) initialized to false when the form is displayed 4 the first time
 * Remark: it is not the same event as "body load"
 */
var isSumbitted = false;

function checkEnter(e) {
  if (e && e.keyCode == 13) {
    inForm.submit();
    /*
      * 2) set to true after the form submission was invoked
      */
    isSumbitted = true;
  }
}
function onSubmit () {
  if (isSumbitted) {
    /*
    * 3) reset to false after the form submission executed
    */
    isSumbitted = false;
    return false;
  }
}
<!DOCTYPE html>
<html>
<body>

<form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()">
   First name:<br>
   <input type="text" name="firstname" value="Mickey">
   <input type="submit" value="Submit">
</form>

</body>
</html>

5
Mathias Zaja

La plupart des gens empêcheraient l'envoi du formulaire en appelant la fonction event.preventDefault() . 

Un autre moyen consiste à supprimer l'attribut onclick du bouton et à obtenir le code dans processForm() dans .submit(function() { car return false; empêche le formulaire de se soumettre. De plus, les fonctions formBlaSubmit() doivent être renvoyées sous forme de valeur booléenne, en fonction de leur validité, pour être utilisées dans processForm();.

La réponse de katsh est la même, mais plus facile à digérer. 

(Au fait, je suis nouveau sur stackoverflow, donnez-moi des conseils s'il vous plaît.)

4
ambrosechua

Personnellement, j'aime bien valider le formulaire lors de l'envoi et s'il y a des erreurs, il suffit de renvoyer faux.

$('form').submit(function() {

    var error;

   if ( !$('input').val() ) {
        error = true
    }

    if (error) {
         alert('there are errors')
         return false
    }

});

http://jsfiddle.net/dfyXY/

3
sqram

Un moyen efficace d'éviter de recharger la page lors de la soumission à l'aide d'un formulaire consiste à ajouter return false avec votre attribut onsubmit.

<form action="#" onsubmit="yourJsFunction();return false">
    <input type="text"/>
    <input type="submit"/>
</form>
2
user3828543

En Javascript pur, utilisez: e.preventDefault()

e.preventDefault() est utilisé dans jquery mais fonctionne en javascript.

document.querySelector(".buttonclick").addEventListener("click", 
function(e){

  //some code

  e.preventDefault();
})
2
Deke

Si vous voulez utiliser Pure Javascript, l'extrait suivant sera meilleur que tout le reste.

Suppose que:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Form Without Submiting With Pure JS</title>
        <script type="text/javascript">
            window.onload = function(){
                /**
                 * Just Make sure to return false so that your request will not go the server script
                 */
                document.getElementById('simple_form').onsubmit = function(){
                    // After doing your logic that you want to do 

                    return false 
                }
            }
        </script>
    </head>
    <body>

    </body>
</html>
<form id="simple_form" method="post">
    <!-- Your Inputs will go here  -->
    <input type="submit" value="Submit Me!!" />
</form>

J'espère que cela fonctionne pour vous !!

1
Mr. Suryaa Jha
 $("#buttonID").click(function (e) {
          e.preventDefault();
         //some logic here
 }
1
Alex

Je viens de trouver une solution très simple mais qui fonctionne, en supprimant <form></form> de la section que je voulais empêcher de publier et d’actualiser. 

<select id="youId" name="yourName">
<select> 
<option value="1</option>
<option value="2</option>
<option value="3</option>
</select>
<input id="formStockVal1" type="number"><br><br>
<form> 
<button type="reset" id="stockCancel">Cancel</button>
<button type="reset" id="stockConfirm">Add</button>
</form>

Ici, seuls les boutons sont envoyés comme ils le devraient. 

0
John_FistaH

Utilisez simplement "javascript:" dans votre attribut d'action de forme si vous n'utilisez pas d'action.

0
Kailash Kaswan
function ajax_form(selector, obj)
{

    var form = document.querySelectorAll(selector);

    if(obj)
    {

        var before = obj.before ? obj.before : function(){return true;};

        var $success = obj.success ? obj.success: function(){return true;};

        for (var i = 0; i < form.length; i++)
        {

            var url = form[i].hasAttribute('action') ? form[i].getAttribute('action') : window.location;

            var $form = form[i];

            form[i].submit = function()
            {

                var xhttp = new XMLHttpRequest();

                xhttp.open("POST", url, true);

                var FD = new FormData($form);

                /** prevent submiting twice */
                if($form.disable === true)

                    return this;

                $form.disable = true;

                if(before() === false)

                    return;

                xhttp.addEventListener('load', function()
                {

                    $form.disable = false;

                    return $success(JSON.parse(this.response));

                });

                xhttp.send(FD);

            }
        }
    }

    return form;
}

Je n'ai pas vérifié comment ça marche. Vous pouvez également lier (this) pour que cela fonctionne comme jquery ajaxForm

utilisez-le comme:

ajax_form('form',
{
    before: function()
    {
        alert('submiting form');
        // if return false form shouldn't be submitted
    },
    success:function(data)
    {
        console.log(data)
    }
}
)[0].submit();

il retourne des nœuds afin que vous puissiez faire quelque chose comme submit i ci-dessus, par exemple

si loin de la perfection mais que cela suppose de fonctionner, vous devez ajouter la gestion des erreurs ou supprimer la condition de désactivation

0
Łukasz Szpak