Zatrzymaj odświeżanie strony formularza po przesłaniu

150

Jak mogę zapobiec odświeżaniu strony po naciśnięciu przycisku wysyłania bez żadnych danych w polach?

Sprawdzanie poprawności działa poprawnie, wszystkie pola stają się czerwone, ale strona jest natychmiast odświeżana. Moja wiedza na temat JS jest stosunkowo podstawowa.

W szczególności uważam, że processForm()funkcja na dole jest „zła”.

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
    /////////////////
});
M_Willett
źródło

Odpowiedzi:

177

Możesz uniemożliwić przesyłanie formularza za pomocą

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

Oczywiście w funkcji możesz sprawdzić puste pola, a jeśli coś nie wygląda dobrze, e.preventDefault() zatrzyma przesyłanie.

Bez jQuery:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);
Overcode
źródło
4
Ta metoda wymaga jQuery. Myślę, że zawsze lepszą praktyką jest zapobieganie temu za pomocą atrybutu typu przycisku.
Vicky Gonsalves,
25
Tę metodę można wykonać bez jQuery za pomocą czegoś takiego: var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); I nie mam pojęcia, jak poprawnie sformatować komentarz, wydaje się.
Tynach
1
Zasadniczo uwzględnij event.preventDefault();w swoim kodzie obsługi przesyłania formularza. Jednowierszowy wariant tego, co umieściłem w innym komentarzu (w zasadzie taki sam jak wersja jQuery) byłby: document.getElementById("prospects_form").addEventListener('submit', function(event){event.preventDefault();});Może istnieć sposób, aby to skrócić (nie używając addEventListener(), ale wydaje się, że te sposoby robienia rzeczy są generalnie marszczone dnia
Tynach
84

Dodaj ten kod onsubmit = "return false":

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

To naprawiło to dla mnie. Nadal będzie uruchamiać określoną przez Ciebie funkcję onClick

user3413723
źródło
4
I nadal będzie uruchamiać walidację formularza przeglądarki HTML5.
Daniel Sokolowski
1
Żadne biblioteki nie są wymagane, jquery jest niesamowity, natywny jest lepszy w tym przypadku.
calbertts
4
To najczystsze rozwiązanie bez JQuery. Ponadto możesz go również używać jako; onsubmit = "return submitFoo ()" i zwracanie false w submitFoo (), jeśli chcesz wywołać funkcję podczas przesyłania.
bmkorkut
8
ale nigdy nie pozwoli na przesłanie formularza.
Arun Raaj
75

Zastąp typ przycisku na button:

<button type="button">My Cool Button</button>
Vicky Gonsalves
źródło
3
Jest to jedyna sugerowana metoda, która zapobiega odświeżaniu strony, nawet jeśli występuje błąd JavaScript, który może być przydatny podczas testowania i programowania.
jjz
14
Jest to przydatne, ale nie zapobiega wysyłaniu / ponownym ładowaniu, gdy użytkownik naciśnie [Enter].
System.Cats.Lol
13
nie nadaje się do walidacji formularza: / potrzebujesz przycisku przesyłania w elemencie formularza
RomOne
Myślę, że to zadziała, jeśli masz pewność, że strona klienta zawsze będzie używać JavaScript, w przeciwnym razie przycisk typu przesyłania nie powinien być wykluczony
briancollins081
1
@ briancollins081 To nie jest rozwiązanie globalne. Ta odpowiedź odnosi się tylko do aktualnej sytuacji OP i jeśli nie ma javascript, OP nigdy nie będzie w stanie przesłać formularza w dowolnym miejscu, mimo że button type="submit"przesłał formularz dotyczący akcji przycisku za pomocą jQuery.
Vicky Gonsalves
16

Możesz użyć tego kodu do przesłania formularza bez odświeżania strony. Zrobiłem to w moim projekcie.

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

              $.ajax({
                type: 'post',
                url: 'myPageName.php',
                data: $('#myFormName').serialize(),
                success: function () {
                 alert("Email has been sent!");
                }
              });
          e.preventDefault();
        });
});
safeer008
źródło
Ta odpowiedź jest jedyną, która sprawia, że ​​formularz działa tak, jak powinien. W moim przypadku jest to jedyne rozwiązanie, ponieważ otrzymuję formularz od osoby trzeciej i nie mogę się nim zbytnio bawić.
rustypaper
12

Świetnym sposobem uniknięcia ponownego załadowania strony podczas przesyłania za pomocą formularza jest dodanie return falseatrybutu onsubmit.

<form action="#" onsubmit="yourJsFunction();return false">
    <input type="text"/>
    <input type="submit"/>
</form>
arunavkonwar
źródło
3
To mi się całkowicie udało. To powinna zostać zaakceptowana odpowiedź. action='#'
Ashok MA,
1
Super stary wątek, ale dla każdego, kto teraz się z tym spotka, proszę nie próbować, action="#"ponieważ nie działa i nie jest odpowiednim rozwiązaniem. Klucz jest właściwieonsubmit="yourJsFunction();return false"
Jeff
ale czy nie sądzisz, że zwracanie fałszu nie jest wdzięczne?
Vicky Gonsalves
8

Problem staje się bardziej złożony, gdy dasz użytkownikowi dwie możliwości przesłania formularza:

  1. klikając przycisk ad hoc
  2. naciskając klawisz Enter

W takim przypadku będziesz potrzebować funkcji wykrywającej wciśnięty klawisz, w której wyślesz formularz po naciśnięciu klawisza Enter.

A teraz pojawia się problem z IE (w każdym razie wersja 11). Uwaga: ten problem nie istnieje w Chrome ani w FireFox!

  • Po kliknięciu przycisku przesyłania formularz zostanie przesłany raz; w porządku.
  • Kiedy naciśniesz Enter, formularz zostanie przesłany dwukrotnie ... a twój serwlet zostanie wykonany dwukrotnie. Jeśli nie masz serwera architektury PRG (post redirect get), wynik może być nieoczekiwany.

Chociaż rozwiązanie wygląda na trywialne, zajęło mi wiele godzin, aby rozwiązać ten problem, więc mam nadzieję, że może być przydatne dla innych ludzi. Rozwiązanie to zostało pomyślnie przetestowane m.in. na IE (v 11.0.9600.18426), FF (v 40.03) i Chrome (v 53.02785.143 m 64 bit)

Kod źródłowy HTML i js znajdują się we fragmencie. Zasada jest tam opisana. Ostrzeżenie:

Nie możesz tego przetestować we fragmencie, ponieważ akcja wpisu nie jest zdefiniowana, a naciśnięcie klawisza Enter może kolidować z przepełnieniem stosu.

Jeśli napotkałeś ten problem, po prostu skopiuj / wklej kod js do swojego środowiska i dostosuj go do kontekstu.

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

Mathias Zaja
źródło
5

W czystym Javascript użyj: e.preventDefault()

e.preventDefault() jest używany w jquery, ale działa w javascript.

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

  //some code

  e.preventDefault();
})
Deke
źródło
4

Większość ludzi uniemożliwiłoby przesłanie formularza, dzwoniąc do event.preventDefault() funkcję.

Innym sposobem jest usunięcie atrybutu onclick przycisku i pobranie kodu processForm(), .submit(function() {ponieważ return false;powoduje, że formularz nie jest przesyłany. Ponadto spraw, aby formBlaSubmit()funkcje zwracały wartość logiczną na podstawie ważności, do użycia w programieprocessForm();

katshOdpowiedź jest taka sama, tylko łatwiejsza do strawienia.

(Nawiasem mówiąc, jestem nowy w stackoverflow, proszę o wskazówki.)

ambrosechua
źródło
2
Chociaż dobrze jest wiedzieć, że return false;powstrzymuje to również wydarzenie przed rozbudzeniem DOMU - jest to skrót odevent.preventDefault(); event.stopPropagation();
Terry
4

Najlepszym rozwiązaniem jest wywołanie dowolnej funkcji przez onsubmit i zwrócenie po niej wartości false.

onsubmit="xxx_xxx(); return false;"
xyz xyz
źródło
3

Osobiście lubię sprawdzać poprawność formularza po przesłaniu, a jeśli są błędy, po prostu zwróć false.

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

    var error;

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

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

});

http://jsfiddle.net/dfyXY/

sqram
źródło
3
 $("#buttonID").click(function (e) {
          e.preventDefault();
         //some logic here
 }
Alex
źródło
1

Jeśli chcesz używać czystego Javascript, poniższy fragment będzie lepszy niż cokolwiek innego.

Załóżmy :

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>

Mam nadzieję, że to działa dla Ciebie !!

Pan Suryaa Jha
źródło
0
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;
}

Nie sprawdziłem, jak to działa. Możesz także powiązać (this), aby działało jak jquery ajaxForm

użyj go jak:

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

zwraca węzły, więc możesz zrobić coś takiego, jak przesłać i powyższy przykład

daleko od doskonałości, ale powinno działać, powinieneś dodać obsługę błędów lub usunąć warunek wyłączenia

Łukasz Szpak
źródło
0

Po prostu użyj „javascript:” w atrybucie działania formularza, jeśli nie używasz działania.

Kailash Kaswan
źródło
1
Dołącz kilka przykładów, aby dokładniej wyjaśnić swoje rozwiązanie.
Vikash Pathak
0

Czasami e.preventDefault ();działa wtedy programiści są szczęśliwi, ale czasami nie działają, wtedy deweloperzy są smutni, wtedy znalazłem rozwiązanie, dlaczego czasami nie działa

pierwszy kod czasami działa

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

druga opcja, dlaczego nie działa? To nie działa, ponieważ jquery lub inna biblioteka javascript nie ładuje się poprawnie, możesz sprawdzić w konsoli, czy wszystkie pliki jquery i javascript są ładowane poprawnie, czy nie.

To rozwiązuje mój problem. Mam nadzieję, że będzie to pomocne dla Ciebie.

Sumit Kumar Gupta
źródło
0

Moim zdaniem większość odpowiedzi ma na celu rozwiązanie problemu zadanego w twoim pytaniu, ale nie sądzę, że jest to najlepsze podejście do twojego scenariusza.

Jak mogę zapobiec odświeżaniu strony po naciśnięciu przycisku wysyłania bez żadnych danych w polach?

A .preventDefault()rzeczywiście nie odświeża strony. Ale myślę, że prosty sposób requirena pola, które chcesz wypełnić danymi, rozwiązałby twój problem.

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

Zwróć uwagę na requiretag dodany na końcu każdego input. Wynik będzie taki sam: brak odświeżania strony bez żadnych danych w polach.

Zebiano
źródło
0

Mam nadzieję, że to będzie ostatnia odpowiedź


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

źródło
-1

W przypadku czystego JavaScript użyj zamiast tego metody click

<div id="loginForm">
    <ul class="sign-in-form">
        <li><input type="text" name="username"/></li>
        <li><input type="password" name="password"/></li>
        <li>
            <input type="submit" onclick="loginForm()" value="click" />
        </li>
    </ul>
</div>

<script>
function loginForm() {
    document.getElementById("loginForm").click();
}
</script>

Dean Vollebregt
źródło
-1

Właśnie znalazłem bardzo proste, ale działające rozwiązanie, usuwając <form></form>z sekcji, której chciałem zapobiec publikowaniu i odświeżaniu.

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

Tutaj tylko Przyciski przesyłają się tak, jak powinny.

John_FistaH
źródło
Usuń atrybut nazwy z pól, których nie chcesz przesyłać na serwer. stackoverflow.com/a/12827917/458321
TamusJRoyce
-2

Po prostu umieść zwrot w ten sposób:

function validate()
{

  var username=document.getElementById('username').value;
  
	  if(username=="")
	  {
		return false;	
	  }
	  if(username.length<5&&username.length<15)
	  {
	  	alert("Length should between 5 to 15 characters");
	  	return false;
	  }
	  
	  return true;
}
body{
	padding: 0px;
	margin:0px;
}

input{
	display: block;
	margin-bottom:10px;
	height:25px;
	width:200px;
}

input[type="submit"]{
	margin:auto;
}

label{
	display:block;
	margin-bottom:10px;
}

form{
		width:500px;
		height:500px;
		border:1px solid green;
		padding:10px;
		margin:auto;
		top:0;
		bottom:0;
		left:0;
		right:0;
		position:absolute;		
}

.labels{
	width: 35%;
	box-sizing:border-box;
	display: inline-block;
}

.inputs{
	width: 63%;
	box-sizing:border-box;
	padding:10px;
	display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FORM VALIDATION</title>
	<link rel="stylesheet" type="text/css" href="style.css">

	<script type="text/javascript" src="script.js"></script>
</head>

<body>
	<form action="#">
		<div class="labels">
			<label>Name</label>
			<label>Email</label>
		</div>

		<div class="inputs">
			<input type="text" name="username" id="username" required>
			<input type="text" name="email" id="email" required>
		</div>
		
		<input type="submit" value="submit" onclick="return validate();">
	</form>
</body>

</html>

Zwróć prawdę i fałsz z funkcji validate (); funkcjonować zgodnie z wymaganiami

Mohd Jahid
źródło
powinieneś raczej dać wskazówkę lub podać fragment kodu zamiast tego dużego fragmentu kodu
Felix Geenen