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

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

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

Zastąp typ przycisku na button:

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

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

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

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>

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

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

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

onsubmit="xxx_xxx(); return false;"

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/

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

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

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

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

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.

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.

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>

 Run code snippetHide results
Expand snippet

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>

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.

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