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
/////////////////
});
javascript
jquery
html
forms
M_Willett
źródło
źródło
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ę.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ącaddEventListener()
, ale wydaje się, że te sposoby robienia rzeczy są generalnie marszczone dniaDodaj ten kod onsubmit = "return false":
To naprawiło to dla mnie. Nadal będzie uruchamiać określoną przez Ciebie funkcję onClick
źródło
Zastąp typ przycisku na
button
:źródło
button type="submit"
przesłał formularz dotyczący akcji przycisku za pomocą jQuery.Możesz użyć tego kodu do przesłania formularza bez odświeżania strony. Zrobiłem to w moim projekcie.
źródło
Świetnym sposobem uniknięcia ponownego załadowania strony podczas przesyłania za pomocą formularza jest dodanie
return false
atrybutu onsubmit.źródło
action='#'
action="#"
ponieważ nie działa i nie jest odpowiednim rozwiązaniem. Klucz jest właściwieonsubmit="yourJsFunction();return false"
Problem staje się bardziej złożony, gdy dasz użytkownikowi dwie możliwości przesłania formularza:
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!
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:
Jeśli napotkałeś ten problem, po prostu skopiuj / wklej kod js do swojego środowiska i dostosuj go do kontekstu.
źródło
W czystym Javascript użyj:
e.preventDefault()
e.preventDefault()
jest używany w jquery, ale działa w javascript.źródło
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, abyformBlaSubmit()
funkcje zwracały wartość logiczną na podstawie ważności, do użycia w programieprocessForm();
katsh
Odpowiedź jest taka sama, tylko łatwiejsza do strawienia.(Nawiasem mówiąc, jestem nowy w stackoverflow, proszę o wskazówki.)
źródło
return false;
powstrzymuje to również wydarzenie przed rozbudzeniem DOMU - jest to skrót odevent.preventDefault(); event.stopPropagation();
Najlepszym rozwiązaniem jest wywołanie dowolnej funkcji przez onsubmit i zwrócenie po niej wartości false.
źródło
Osobiście lubię sprawdzać poprawność formularza po przesłaniu, a jeśli są błędy, po prostu zwróć false.
http://jsfiddle.net/dfyXY/
źródło
źródło
Jeśli chcesz używać czystego Javascript, poniższy fragment będzie lepszy niż cokolwiek innego.
Załóżmy :
HTML :
Mam nadzieję, że to działa dla Ciebie !!
źródło
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:
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
źródło
Po prostu użyj „javascript:” w atrybucie działania formularza, jeśli nie używasz działania.
źródło
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
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.
źródło
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.
A
.preventDefault()
rzeczywiście nie odświeża strony. Ale myślę, że prosty sposóbrequire
na pola, które chcesz wypełnić danymi, rozwiązałby twój problem.Zwróć uwagę na
require
tag dodany na końcu każdegoinput
. Wynik będzie taki sam: brak odświeżania strony bez żadnych danych w polach.źródło
Mam nadzieję, że to będzie ostatnia odpowiedź