الغاء إعادة تحميل الصفحة عند النقر على زر button في JS

يجب تغيير type الخاص بالزر إلى button مثل 

<input type="button" name="here" value="send" />

أو استخدام وسم button

<button>Send</button>

أو من خلال javascript يمكنك وضع 

return false; 

لمنع تحديث الصفحة بهذا الشكل 

$(document).on('submit', '#myBtn', function(){
	/// هنا الحدث
	return false;
});

أو استخدام submit من خلال jQuery  

$(document).submit(function(){
	/// هنا الحدث
	return false;
});

هناك عدة طرق لفعل ذلك, يمكنك اعطاء العنصر form الخاصية onsubmit بهذا الشكل

<form onsubmit="return false"></form>

عند الضغط على زر الارسال لن يتم تحميل الصفحة
باستخدام جافا سكربت يمكنك فعل ذلك من خلال هذا الكود

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

نقوم بتحديد العنصر باستخدام التابع getElementById ومن ثم نقوم باجراء حدث عليه عند الضغط على زر الارسال يقوم الغاء تحديث الصفحة
يمكننا فعل ذلك باستخدام jquery

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

بعد تحديد العنصر نقوم باضافة الحدث submit اليه ومن ثم نستخدم التابع preventDefault
 

بالتأكيد ان كان الزر button ضمن form فسيقوم بعمل submit لل form مما يؤدي لإعادة تحميل الصفحة

والحل هو تحديد نوع الزر

<button type='button'>Text</button>

ولجلب البيانات بدون تحميل الصفحة عليك استخدام ajax

العنصر button هو في ال HTML وليس في JavaScript، لغة البرمجة JavaScript هي فقط تتيح لك الوصول الى هذا الزر button عبر الDOM والتحكم به

إذا كان الزر button منفصل لوحده ليس ضمن أي إستمارة form لا يحدث إعادة تحميل للصفحة

أما إذا كان هذا الزر ضمن form وقمت بعمل submit فسيتم تلقائياً إعادة تحميل الصفحة

لإيقاف هذا السلوك التلقائي أولاً يجب عليك تحديد الاستمارة form ومن ثم إيقاف السلوك الإفتراضي كما في هذا الكود

document.getElementById("myForm").addEventListener("submit", function(event){
  event.preventDefault() // إيقاف السلوك الإفتراضي
  // هنا يمكنك كتابة الكود الخاص بطلب البيانات
});