• 0

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

السلام عليكم 

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

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 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() // إيقاف السلوك الإفتراضي
  // هنا يمكنك كتابة الكود الخاص بطلب البيانات
});

 

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن