wake-up-neo.com

Stoppen Sie die Formular-Aktualisierungsseite beim Senden

Wie kann ich verhindern, dass die Seite aktualisiert wird, wenn Sie die Schaltfläche "Senden" drücken, ohne dass Daten in den Feldern vorhanden sind?

Die Überprüfung funktioniert einwandfrei, alle Felder werden rot, aber die Seite wird sofort aktualisiert. Meine Kenntnisse von JS sind relativ grundlegend.

Ich denke insbesondere, dass die Funktion processForm() unten schlecht ist.

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

Sie können das Senden des Formulars mit verhindern

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

Natürlich können Sie in der Funktion nach leeren Feldern suchen, und wenn etwas nicht richtig aussieht, stoppt e.preventDefault() das Senden.

117
Overcode

Ersetzen Sie den Tastentyp auf button:

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

Fügen Sie diesen onsubmit = "return false" -Code hinzu:

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

Das hat es für mich behoben. Die von Ihnen angegebene OnClick-Funktion wird weiterhin ausgeführt

51
user3413723

Sie können diesen Code für die Formularübermittlung ohne Seitenaktualisierung verwenden. Ich habe das in meinem Projekt gemacht.

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

Dieses Problem wird komplexer, wenn Sie dem Benutzer zwei Möglichkeiten zum Senden des Formulars geben:

  1. klicken Sie auf eine Ad-hoc-Schaltfläche
  2. durch Drücken der Eingabetaste

In diesem Fall benötigen Sie eine Funktion, die die gedrückte Taste erkennt, in der Sie das Formular absenden, wenn die Eingabetaste gedrückt wurde.

Und jetzt kommt das Problem mit IE (auf jeden Fall Version 11) Bemerkung: Dieses Problem besteht weder bei Chrome noch bei FireFox!

  • Wenn Sie auf die Schaltfläche "Senden" klicken, wird das Formular einmal gesendet. fein.
  • Wenn Sie die Eingabetaste drücken, wird das Formular zweimal gesendet ... und Ihr Servlet wird zweimal ausgeführt. Wenn Sie nicht über eine PRG-Architektur (Post Redirect Get) verfügen, ist das Ergebnis möglicherweise unerwartet.

Auch wenn die Lösung trivial aussieht, habe ich viele Stunden gebraucht, um dieses Problem zu lösen. Ich hoffe, dass es für andere Leute nützlich sein kann. Diese Lösung wurde unter anderem erfolgreich an IE (Version 11.0.9600.18426), FF (Version 40.03) und Chrome (Version 53.02785.143 mit 64 Bit) getestet.

Der Quellcode HTML & js befindet sich im Snippet. Das Prinzip ist dort beschrieben. Warnung:

Sie können es nicht im Snippet testen, da die Nachaktion nicht .__ ist. Wenn Sie die Eingabetaste drücken und die Eingabetaste drücken, kann dies den Stackoverflow stören.

Wenn Sie mit diesem Problem konfrontiert waren, kopieren Sie einfach js-Code in Ihre Umgebung und passen Sie ihn an Ihren Kontext an.

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

Die meisten Benutzer würden das Senden des Formulars verhindern, indem sie die Funktion event.preventDefault() aufrufen. 

Ein anderes Mittel besteht darin, das onclick-Attribut der Schaltfläche zu entfernen und den Code in processForm() in .submit(function() { auszugeben, da return false; das Formular nicht sendet. Stellen Sie außerdem sicher, dass die Funktionen von formBlaSubmit() Boolean basierend auf Gültigkeit für die Verwendung in processForm(); zurückgeben.

Die Antwort von katsh ist die gleiche, nur einfacher zu verdauen. 

(Übrigens, ich bin neu bei Stackoverflow, geben Sie mir bitte eine Anleitung.)

4
ambrosechua

Ich persönlich bestätige das Formular gerne beim Absenden und wenn es Fehler gibt, geben Sie einfach false zurück.

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

    var error;

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

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

});

http://jsfiddle.net/dfyXY/

3
sqram

Eine gute Möglichkeit, das erneute Laden der Seite beim Senden über ein Formular zu verhindern, ist das Hinzufügen von return false mit Ihrem onsubmit-Attribut.

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

Verwenden Sie in reinem Javascript: e.preventDefault()

e.preventDefault() wird in jquery verwendet, funktioniert aber in Javascript.

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

  //some code

  e.preventDefault();
})
2
Deke

Wenn Sie reines Javascript verwenden möchten, ist der folgende Ausschnitt besser als alles andere.

Annehmen:

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>

Ich hoffe es funktioniert für Sie !!

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

Ich habe gerade eine sehr einfache, aber funktionierende Lösung gefunden, indem ich <form></form> aus dem Abschnitt entfernt habe, den ich vom Posten und Aktualisieren verhindern wollte. 

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

Hier reichen nur Buttons ein, wie sie sollen. 

0
John_FistaH

Verwenden Sie einfach "Javascript:" in Ihrem Aktionsattribut der Form, wenn Sie keine Aktion verwenden.

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

Hab nicht nachgesehen, wie es funktioniert. Sie können das auch binden, so dass es wie jquery ajaxForm funktioniert

benutze es wie:

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

es gibt Knoten zurück, so dass Sie etwas tun können, wie oben in Beispiel

so weit von Perfektion, aber es sollte funktionieren, sollten Sie Fehlerbehandlung hinzufügen oder die Deaktivierungsbedingung entfernen

0
Łukasz Szpak