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

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

Insbesondere denke ich, dass die processForm()Funktion 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 = /^(([^<>()[\]\\.,;:\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
    /////////////////
});

Sie können verhindern, dass das Formular mit gesendet wird

$("#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, e.preventDefault() wird die Übermittlung gestoppt.

Ohne jQuery:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

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

Ersetzen Sie den Schaltflächentyp durch button:

<button type="button">My Cool Button</button>

Sie können diesen Code zum Senden von Formularen 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();
        });
});

Eine gute Möglichkeit, das erneute Laden der Seite beim return falseSenden mithilfe eines Formulars zu verhindern, besteht darin, das Attribut onsubmit hinzuzufügen.

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

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

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

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

Und jetzt kommt das Problem mit IE (auf jeden Fall Version 11). Anmerkung: Dieses Problem existiert weder mit Chrome noch mit 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 keinen Server auf der PRG-Architektur (Post Redirect Get) haben, ist das Ergebnis möglicherweise unerwartet.

Obwohl die Lösung trivial aussieht, habe ich viele Stunden gebraucht, um dieses Problem zu lösen, und ich hoffe, dass sie für andere Leute nützlich sein könnte. Diese Lösung wurde unter anderem erfolgreich auf IE (Version 11.0.9600.18426), FF (Version 40.03) und Chrome (Version 53.02785.143 m 64 Bit) getestet.

Der Quellcode HTML & js befindet sich im Snippet. Dort wird das Prinzip beschrieben. Warnung:

Sie können es nicht im Snippet testen, da die Post-Aktion nicht definiert ist und das Drücken der Eingabetaste den Stackoverflow beeinträchtigen kann.

Wenn Sie mit diesem Problem konfrontiert sind, 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>

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

Die meisten Leute würden das Senden des Formulars durch Aufrufen der event.preventDefault()Funktion verhindern.

Eine andere Möglichkeit besteht darin, das onclick-Attribut der Schaltfläche zu entfernen und den Code einzugeben processForm(), .submit(function() {da return false;das Formular nicht gesendet wird . Stellen Sie außerdem sicher, dass die formBlaSubmit()Funktionen Boolesche Werte basierend auf der Gültigkeit für die Verwendung in zurückgebenprocessForm();

katshDie Antwort ist dieselbe, nur leichter zu verdauen.

(Übrigens, ich bin neu im Stackoverflow. Geben Sie mir bitte eine Anleitung.)

Die beste Lösung ist, bei jedem Aufruf eine beliebige Funktion aufzurufen und danach false zurückzugeben.

onsubmit="xxx_xxx(); return false;"

Persönlich möchte ich das Formular beim Senden validieren und wenn es Fehler gibt, gebe ich 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/

 $("#buttonID").click(function (e) {
          e.preventDefault();
         //some logic here
 }

Wenn Sie Pure Javascript verwenden möchten, ist das folgende Snippet besser als alles andere.

Nehmen wir an :

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>

Hoffe so funktioniert es für dich !!

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

Ich habe nicht überprüft, wie es funktioniert. Sie können (dies) auch binden, damit 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 so etwas wie "Senden i" über dem obigen Beispiel tun können

Soweit es nicht perfekt ist, aber es funktioniert, sollten Sie die Fehlerbehandlung hinzufügen oder die Deaktivierungsbedingung entfernen

Verwenden Sie einfach "Javascript:" in Ihrem Aktionsattribut des Formulars, wenn Sie keine Aktion verwenden.

Manchmal e.preventDefault (); funktioniert dann Entwickler sind glücklich, aber manchmal nicht arbeiten dann Entwickler sind traurig, dann habe ich eine Lösung gefunden, warum manchmal nicht funktioniert

Der erste Code funktioniert manchmal

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

zweite Option, warum nicht arbeiten? Dies funktioniert nicht, da JQuery oder eine andere Javascript-Bibliothek nicht ordnungsgemäß geladen wird. Sie können in der Konsole überprüfen, ob alle JQuery- und Javascript-Dateien ordnungsgemäß geladen wurden oder nicht.

Dies löst mein Problem. Ich hoffe das wird hilfreich für dich sein.

Meiner Meinung nach versuchen die meisten Antworten, das auf Ihrer Frage gestellte Problem zu lösen, aber ich denke nicht, dass dies der beste Ansatz für Ihr Szenario ist.

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

A .preventDefault()aktualisiert die Seite tatsächlich nicht. Aber ich denke, dass ein einfaches requireFeld, das Sie mit Daten füllen möchten, Ihr Problem lösen würde.

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

Beachten Sie das requiream Ende jeweils hinzugefügte Tag input. Das Ergebnis ist dasselbe: Die Seite wird nicht ohne Daten in den Feldern aktualisiert.

Ich hoffe, dies ist die letzte Antwort

$('#the_form').submit(function(e){
  e.preventDefault()
  alert($(this).serialize())
  // var values = $(this).serialize()
  // logic....
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="the_form">
   Label-A <input type="text" name='a'required><br>
   Label-B <input type="text" name="b" required><br>
   Label-C <input type="password" name="c" required><br>
   Label-D <input type="number" name="d" required><br>
   <input type="submit" value="Save without refresh">
</form>

 Run code snippetHide results
Expand snippet

                
                

                    
                        
                    
                    
                        

                        quelle