Bagaimana saya bisa mencegah halaman dari penyegaran saat menekan tombol kirim tanpa data di bidang?

Validasi setup berfungsi dengan baik, semua bidang berubah menjadi merah tetapi kemudian halaman tersebut segera di-refresh. Pengetahuan saya tentang JS relatif mendasar.

Secara khusus saya pikir processForm()fungsi di bagian bawah adalah 'buruk'.

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

Anda dapat mencegah pengiriman formulir

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

Tentu saja, dalam fungsi ini, Anda dapat memeriksa bidang kosong, dan jika ada yang tidak beres, e.preventDefault()akan menghentikan pengiriman.

Tanpa jQuery:

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

Tambahkan onsubmit ini = "kembalikan salah" kode:

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

Itu memperbaikinya bagi saya. Itu masih akan menjalankan fungsi onClick yang Anda tentukan

Ganti jenis tombol ke button:

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

Anda dapat menggunakan kode ini untuk pengiriman formulir tanpa penyegaran halaman. Saya telah melakukan ini dalam proyek saya.

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

              $.ajax({
                type: 'post',
                url: 'myPageName.php',
                data: $('#myFormName').serialize(),
                success: function () {
                 alert("Email has been sent!");
                }
              });
          e.preventDefault();
        });
});

Salah satu cara terbaik untuk mencegah memuat ulang halaman saat mengirim menggunakan formulir adalah dengan menambahkan return falsedengan atribut onsubmit Anda.

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

Masalah ini menjadi lebih kompleks ketika Anda memberi pengguna 2 kemungkinan untuk mengirimkan formulir:

1. dengan mengklik tombol ad hoc
2. dengan menekan tombol Enter

Dalam kasus seperti itu Anda akan memerlukan fungsi yang mendeteksi tombol yang ditekan di mana Anda akan mengirimkan formulir jika tombol Enter dipukul.

Dan sekarang muncul masalah dengan IE (dalam setiap kasus versi 11) Catatan: Masalah ini tidak ada dengan Chrome atau dengan FireFox!

• Ketika Anda mengklik tombol kirim formulir dikirimkan sekali; baik.
• Ketika Anda menekan Enter, formulir dikirimkan dua kali ... dan servlet Anda akan dieksekusi dua kali. Jika Anda tidak memiliki arsitektur server PRG (post redirect get) di samping hasilnya mungkin tidak terduga.

Meskipun solusinya terlihat sepele, butuh waktu berjam-jam untuk menyelesaikan masalah ini, jadi saya harap ini mungkin berguna bagi orang lain. Solusi ini telah berhasil diuji, antara lain pada IE (v 11.0.9600.18426), FF (v 40.03) & Chrome (v 53.02785.143 m 64 bit)

Kode sumber HTML & js ada di cuplikan. Prinsipnya dijelaskan di sana. Peringatan:

Anda tidak dapat mengujinya di snippet karena tindakan posting tidak ditentukan dan menekan tombol Enter dapat mengganggu stackoverflow.

Jika Anda menghadapi masalah ini, maka cukup salin / tempel kode js ke lingkungan Anda dan sesuaikan dengan konteks Anda.

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

Dalam Javascript murni, gunakan: e.preventDefault()

e.preventDefault() digunakan dalam jquery tetapi berfungsi dalam javascript.

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

  //some code

  e.preventDefault();
})

Kebanyakan orang akan mencegah formulir mengirimkan dengan memanggil event.preventDefault()fungsi.

Cara lain adalah menghapus atribut onclick tombol, dan memasukkan kode processForm()ke dalam .submit(function() {karena return false;menyebabkan formulir tidak mengirimkan. Juga, buat formBlaSubmit()fungsi mengembalikan Boolean berdasarkan validitas, untuk digunakan dalamprocessForm();

katshJawabannya sama, lebih mudah dicerna.

(Omong-omong, saya baru di stackoverflow, tolong beri saya petunjuk.)

Solusi terbaik adalah onsubmit memanggil fungsi apa pun yang Anda inginkan dan mengembalikan false setelah itu.

onsubmit="xxx_xxx(); return false;"

Secara pribadi saya suka memvalidasi formulir pada ajukan dan jika ada kesalahan, kembalikan salah saja.

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

Jika Anda ingin menggunakan Javascript Murni maka cuplikan berikut akan lebih baik daripada yang lainnya.

Misalkan :

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>

Semoga ini berhasil untuk Anda !!

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

Tidak memeriksa cara kerjanya. Anda juga dapat mengikat (ini) sehingga itu akan berfungsi seperti jquery ajaxForm

gunakan seperti:

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

itu mengembalikan node sehingga Anda dapat melakukan sesuatu seperti mengirimkan saya contoh di atas

sejauh ini dari kesempurnaan tetapi seharusnya berfungsi, Anda harus menambahkan penanganan kesalahan atau menghapus kondisi dinonaktifkan

Cukup gunakan "javascript:" di atribut tindakan Anda jika Anda tidak menggunakan tindakan.

Terkadang e.preventDefault ();berfungsi maka pengembang senang tapi terkadang tidak bekerja maka pengembang sedih maka saya menemukan solusi mengapa kadang tidak berhasil

kode pertama terkadang berfungsi

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

Opsi kedua mengapa tidak bekerja? Ini tidak berfungsi karena jquery atau perpustakaan javascript lainnya tidak memuat dengan benar, Anda dapat memeriksanya di konsol bahwa semua file jquery dan javascript dimuat dengan benar atau tidak.

Ini menyelesaikan masalah saya. Saya harap ini akan membantu Anda.

Menurut pendapat saya, sebagian besar jawaban mencoba untuk memecahkan masalah yang diajukan pada pertanyaan Anda, tetapi saya tidak berpikir itu pendekatan terbaik untuk skenario Anda.

Bagaimana saya bisa mencegah halaman dari penyegaran saat menekan tombol kirim tanpa data di bidang?

A .preventDefault()memang tidak menyegarkan halaman. Tapi saya pikir sederhana requirepada bidang yang Anda inginkan diisi dengan data, akan menyelesaikan masalah Anda.

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

Perhatikan requiretag yang ditambahkan di akhir masing-masing input. Hasilnya akan sama: tidak me-refresh halaman tanpa data di bidang.

Saya harap ini akan menjadi jawaban terakhir

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

Untuk JavaScript murni gunakan metode klik saja

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

Baru saja menemukan solusi yang sangat sederhana namun berfungsi, dengan menghapus <form></form>dari bagian saya ingin mencegah memposting dan menyegarkan.

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

Di sini hanya Tombol yang dikirim sebagaimana mestinya.

Masukkan kembali seperti ini:

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>

Kembalikan benar dan salah dari validasi (); berfungsi sesuai kebutuhan