risposta-alla-domanda-sullo-sviluppo-web-bd.com

Interrompi la pagina di aggiornamento del modulo su invia

Come potrei fare per evitare che la pagina si aggiorni quando si preme il pulsante di invio senza dati nei campi?

La convalida è configurata correttamente, tutti i campi diventano rossi, ma la pagina viene immediatamente aggiornata. La mia conoscenza di JS è relativamente semplice.

In particolare, penso che la funzione processForm() in basso sia "cattiva".

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 = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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

È possibile impedire al modulo di inoltrare con

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

Naturalmente, nella funzione, puoi controllare i campi vuoti, e se qualcosa non sembra giusto, e.preventDefault() interromperà l'invio.

117
Overcode

Sostituisci il tipo di pulsante in button:

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

Aggiungi questo codice onsubmit = "return false":

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

Questo lo ha risolto per me. Continuerà a eseguire la funzione onClick specificata

51
user3413723

È possibile utilizzare questo codice per l'invio di moduli senza un aggiornamento della pagina. L'ho fatto nel mio progetto.

$(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

Questo problema diventa più complesso quando si danno all'utente 2 possibilità di inviare il modulo:

  1. facendo clic su un pulsante ad hoc
  2. premendo il tasto Invio

In tal caso avrai bisogno di una funzione che rilevi il tasto premuto in cui invierai il modulo se è stato premuto il tasto Invio.

E ora arriva il problema con IE (in ogni caso versione 11) Nota: Questo problema non esiste con Chrome né con FireFox!

  • Quando fai clic sul pulsante di invio, il modulo viene inviato una volta; bene.
  • Quando premi Invio, il modulo viene inviato due volte ... e il tuo servlet verrà eseguito due volte. Se non si dispone di server di architettura PRG (post reindirizzamento), il risultato potrebbe essere inaspettato.

Anche se la soluzione sembra banale, mi ci sono volute molte ore per risolvere questo problema, quindi spero che possa essere utile per gli altri. Questa soluzione è stata testata con successo, tra gli altri, su IE (v 11.0.9600.18426), FF (v 40.03) e Chrome (v 53.02785.143 m 64 bit)

Il codice sorgente HTML e js si trovano nello snippet. Il principio è descritto qui . Avvertenza:

Non puoi testarlo nello snippet perché l'azione post non è definito e premendo Invio potrebbe interferire con StackOverflow.

Se hai affrontato questo problema, copia e incolla il codice js nel tuo ambiente e adattalo al tuo contesto.

/*
 * 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 maggior parte delle persone impedirebbe l'invio del modulo chiamando la funzione event.preventDefault() . 

Un altro mezzo è rimuovere l'attributo onclick del pulsante e ottenere il codice in processForm() in .submit(function() { come return false; causa la mancata presentazione del modulo. Inoltre, rendere le funzioni formBlaSubmit() restituiscono Boolean in base alla validità, da utilizzare in processForm();

katsh La risposta è la stessa, solo più facile da digerire. 

(A proposito, sono nuovo nello stackoverflow, dammi una guida per favore.)

4
ambrosechua

Personalmente mi piace convalidare il modulo su submit e se ci sono errori, basta restituire false.

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

    var error;

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

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

});

http://jsfiddle.net/dfyXY/

3
sqram

In puro Javascript, utilizzare: e.preventDefault()

e.preventDefault() è usato in jquery ma funziona in javascript.

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

  //some code

  e.preventDefault();
})
2
Deke

Se si desidera utilizzare Pure Javascript, lo snippet seguente sarà migliore di qualsiasi altra cosa.

Supponi:

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>

Spero che funzioni per te !!

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

Ho appena trovato una soluzione molto semplice ma funzionante, rimuovendo <form></form> dalla sezione che volevo evitare di pubblicare e aggiornare. 

<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>

Qui solo i pulsanti si presentano come dovrebbero. 

0
John_FistaH
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;
}

Non ho controllato come funziona. Puoi anche eseguire il binding (this) in modo che funzioni come jquery ajaxForm

usalo come:

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

restituisce i nodi in modo da poter fare qualcosa come inviare i sopra esempio

così lontano dalla perfezione ma supponiamo di funzionare, dovresti aggiungere la gestione degli errori o rimuovere la condizione di disabilitazione

0
Łukasz Szpak