اذهب إلى المحتوى
  • 0

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

حسن الشافعي2

السؤال

السلام عليكم 

في جافاسكريبت عند الضغط على زر button لجلب البيانات يتم إعادة تحميل الصفحة كيف الغاء إعادة تحميل الصفحة عند الضغط على الزر و جلب البيانات

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

يجب تغيير 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;
});

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

هناك عدة طرق لفعل ذلك, يمكنك اعطاء العنصر 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
 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...