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

إظهار حقل إدخال في حالة إختيار المستخدم قيمة معينة

Abdullah Albalwi

السؤال

Recommended Posts

  • 1

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

على سبيل المثال 

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <form>
      <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="example_select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option value="custom">custom</option>
    </select>
  </div>
        <div class="form-group">
    <input type="text" class="form-control" id="text_hidden" placeholder="any" style="display: none;">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
    </div>
  </div>
</div>

بعض الكلاسات هي من إطار العمل بوتستراب لذلك إذا لم تفهم هذه الكلاسات عادي فكل ما يهمك هو هذا الجزء 

<select class="form-control" id="example_select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option value="custom">custom</option>
</select>

لاحظ أننا أعطينا ال select المُعرف exemple_select و أننا أعطينا ال option المطلوب القيمة custom و أيضا هذا الجزء 

<input type="text" class="form-control" id="text_hidden" placeholder="any" style="display: none;">

لاحظ أننا قُمنا بإخفائه بإستخدام خاصية display من css و أعطيناه المُعرف text_hidden 

الآن بإستخدام الجافاسكربت يُمكننا التحكم و التلاعب في العناصر و ذلك حسب المُستخدم 

// أضفنا مستمع على عنصر ال select و في حالة التغير سيتم تنفيذ التعليمات الموجودة في الإقتران
$("#example_select").on('change', function() {
  if(this.value === "custom") // إذا كانت قيمة ال option الذي إختاره المُستخدم هو custom
    $('#text_hidden').show(); // نقوم بعرض البوكس
  else
    $('#text_hidden').hide(); // نقوم بإخفاء العنصر 
});

يُمكنك تجربة الأكواد من هنا 

بالتوفيق

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

  • 1
بتاريخ 25 دقائق مضت قال Abdullah Albalwi:

تمام يعطيك العافيه 

طيب بعد ما  يظهر البوكس  وكتب لي النص طيب هل يربط لي النتيجه عند عرض البيانات في الجدول بنفس الخانه الي رابطها ب select

في جهة الخادم يُمكنك إضافة خانة في جدول البيانات تكون تحتمل تخزين القيمة null و عند تخزين البيانات تقوم بعمل فحص إذا كانت هذه القيمة موجودة تقوم بتخزينها إذا لا فسيتم تخزين null أما عند عرض البيانات تقوم بتفحص قيمة البيانات التي تُخزن فيها القيمة التي يختارها المُستخدم إذا كان الخيار المُخزن هو custom إذن ستعرض القيمة التي تم تخزينها في الخانة المُضافة 
بالتوفيق 

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

  • 0

تمام يعطيك العافيه 

طيب بعد ما  يظهر البوكس  وكتب لي النص طيب هل يربط لي النتيجه عند عرض البيانات في الجدول بنفس الخانه الي رابطها ب select

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...