• 0

[Java script] كيفية اضافة شرط لزر تتغير قيمته بتغير قيمة select box

سلام عليكم

قمت ببرمجة الزر بحيث تتغير قيمته الى قيمة ال value الخاصة بال option الذي اختاره من ال selectbox 

<select id ="embroiderys-value" class="form-control embroiderys-value p-0 " required>

<option selected disabled> تحديد التطريز </option>

<?php

$result = $conn->query("SELECT * FROM embroidery");

while ($row = $result->fetch_assoc()) {

echo '<option type="embroidery" img="' . $row['image'] . '" value="' . $row['id'] . '">كود التطريز E' . $row['id'] . '</option>';

}

?>

</select>

<div class="col-3 p-0">

<button type="button" class="btn btn-warning" onclick="showDetails()">إستعراض التفاصيل</button>

</div>

و السكربت كالتالي

function showDetails() {
  var sel = document.getElementById('embroiderys-value');

  var option = sel.options[sel.selectedIndex].value;

  window.open("accessories/tatreez/tatreez-view.php?id="+option);
}

الان لما المستخدم يقوم باختيار معين من ال select box لا توجد مشكلة فهو يأخذه الى الصفحة التي اريدها و ياخذ رقم ال id من قيمة ال selected option

tatreez-view.php?id="selected option value"

لكن لو لم يختار شئ و ضغط على عرض التفاصيل فمفيش option و بالتالي بيفتحله صفحة ليس لها شئ 

tatreez-view.php?id=تحديد%20التطريز

انا اريد وضع شرط انه لو المستخدم ما اختارش اختيار من اللي موجودين الزر يبقى غير مفعل او يظهر له رساله مفادها انه لم يتم تحديد اختيار لعرضه

ازاي اعملها فضلا؟

1 شخص أعجب بهذا

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


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

يمكن التأكد أن الدليل المطلوب يتبع للخيارات المطلوبة:

function showDetails() {
  var sel = document.getElementById('embroiderys-value');
  var selIndex = sel.selectedIndex;

  if (selIndex == 0) {
     alert("أرجو تحديد خيار مناسب");
     return;
  }
	
  var option = sel.options[selIndex].value;

  window.open("accessories/tatreez/tatreez-view.php?id="+option);
}

حيث قمنا بعمل شرط، إن كان العنصر المحدد هو 0 (تأكد من حمل المتغصير للقيمة null مثلا أو قيمة أخرى) نقوم بعمل alert ثم نضع عبارة retun لكي لا يتم استكمال الشيفرة في الدالة

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

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


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

أعتقد أنه بإمكانك عمل التالي:

if(option){
  window.open("accessories/tatreez/tatreez-view.php?id="+option);
} else {
  alert("Please select an option");
}

كما يُمكنك إعتماد طريقة أخرى حيث تجعل الزر غير مفعل مبدئياً اي لا يُمكن الضغط عليه و تتسمع على حدث change على select ثم تضع شرط بداخله لتفحص الoption:

$("#embroiderys-value").on('change', function(){
  if($(this).val()){
    // enable the button
  } else {
    // disable the button
  }
});

 

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

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


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

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

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

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


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

تسجيل الدخول

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


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