[jQuery] اظهار رسالة خطأ لو لم يقم المستخدم باختيار قيمة من القائمة

عنوان السؤال 

 اظهار رسالة خطأ لو لم يقم المستخدم باختيار قيمة من القائمة

و السؤال هو انه عندي قائمة منسدلة اسميتها sedra 

حين يقوم المستخدم باختيار قيمة من القيم يتغير الرابط داخل الحاوية button

اريد اذا لم يقم المستخدم باختيار قيمة من محتويات القائمة و ضغط على الزر ان تظهر له رساله خطأ

بس كده 

بتاريخ 51 دقائق مضت قال محمد المصري5:

عنوان السؤال: اظهار رسالة خطأ لو لم يقم المستخدم باختيار قيمة من القائمة

و السؤال هو انه عندي قائمة منسدلة اسميتها sedra 

حين يقوم المستخدم باختيار قيمة من القيم يتغير الرابط داخل الحاوية button

اريد اذا لم يقم المستخدم باختيار قيمة من محتويات القائمة و ضغط على الزر ان تظهر له رساله خطأ

بس كده 

نحتاج لاضافة كود آخر واسم الحدث الخاص ليس change بل submit وهو يتنفذ عند عمل submit للنموذج, فمثلا لو كان لدينا كود html التالي

<form action="#" id="form">
  <select name="num" id="num">
    <option value="">اختر الرقم</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <input type="submit">
</form>

أريد عندما أضغط على زر الارسال أتحقق من قيمة القائمة المنسدلة كالتالي

  <script>
        $(document).ready(function() {
            $(document).on('submit', '#form', function(e) {
                var m=$('#num').val();
                if(m==''){
                  alert('asda')
                  e.preventDefault();
                }
            });
        });
    </script>

قمت بتحديد العنصر form وأسندت اليه الحدث submit , عندما أعمل submit سوف يتم التحقق من قيمة select , يتم ذلك من خلال السطر التالي

var m=$('#num').val();

الآن لقد حصلت على قيمة select , أريد أن افحص هل تساوي قيمة أم لا باستخدام الكود التالي

                if(m==''){
                  alert('asda')
                  e.preventDefault();
                }

اذا كانت قمية m تساوي قيمة فارغة, اذا هي لا تحتوي على قيمة وبالتالي سوف نمنع عملية ارسال البيانات باستخدام السطر التالي

e.preventDefault();

يمكنك ايضا بداخل if كتابة الكود الذي تريده, فمثلا يمكنك اضهار الرسالة التي تريدها, يمكن فعل ذلك عن طريق عمل alert كالتالي

                if(m==''){
                  e.preventDefault();
                  alert('يجب اختيار قيمة')
                }

فيصبح شكل الكود بشكل كامل كالتالي

  <script>
        $(document).ready(function() {
            $(document).on('submit', '#form', function(e) {
                var m=$('#num').val();
                if(m==''){
                  e.preventDefault();
                  alert('يجب اختيار قيمة')
                }
            });
        });
    </script>

بتاريخ 2 دقائق مضت قال محمد أبو عواد:

نحتاج لاضافة كود آخر واسم الحدث الخاص ليس change بل submit وهو يتنفذ عند عمل submit للنموذج, فمثلا لو كان لدينا كود html التالي

<form action="#" id="form">
  <select name="num" id="num">
    <option value="">اختر الرقم</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <input type="submit">
</form>

أريد عندما أضغط على زر الارسال أتحقق من قيمة القائمة المنسدلة كالتالي

  <script>
        $(document).ready(function() {
            $(document).on('submit', '#form', function(e) {
                var m=$('#num').val();
                if(m==''){
                  alert('asda')
                  e.preventDefault();
                }
            });
        });
    </script>

قمت بتحديد العنصر form وأسندت اليه الحدث submit , عندما أعمل submit سوف يتم التحقق من قيمة select , يتم ذلك من خلال السطر التالي

var m=$('#num').val();

الآن لقد حصلت على قيمة select , أريد أن افحص هل تساوي قيمة أم لا باستخدام الكود التالي

                if(m==''){
                  alert('asda')
                  e.preventDefault();
                }

اذا كانت قمية m تساوي قيمة فارغة, اذا هي لا تحتوي على قيمة وبالتالي سوف نمنع عملية ارسال البيانات باستخدام السطر التالي

e.preventDefault();

يمكنك ايضا بداخل if كتابة الكود الذي تريده, فمثلا يمكنك اضهار الرسالة التي تريدها, يمكن فعل ذلك عن طريق عمل alert كالتالي

                if(m==''){
                  e.preventDefault();
                  alert('يجب اختيار قيمة')
                }

فيصبح شكل الكود بشكل كامل كالتالي

  <script>
        $(document).ready(function() {
            $(document).on('submit', '#form', function(e) {
                var m=$('#num').val();
                if(m==''){
                  e.preventDefault();
                  alert('يجب اختيار قيمة')
                }
            });
        });
    </script>

 

جربت هذه الطريقة لكنها لن تفلح في حال وجود اكثر من قائمة تقوم بنفس المهمة ، احاول التوضيح بالصورة

المستخدم يختار عدد و بناء عليه يقوم النظام باظهار عدد متغير من القوائم ( انا عندي مثلا نوعين من الطباعه ، واحد منهم هاحطه في مكان و الاخر في مكان مختلف ) و كل نوع منهم له تفاصيله 

لما جربت طريقة حضرتك قبل كده ضبطت و نجحت لكن لو لقائمة واحدة فقط ، لكن اكثر من قائمة او زر submit  بنفس ال id فهايكرر نفس ال id و  هايقوم بعمل التغييرات على كل الازرار و القوائم اللي واخدة ال id ده 

ممكن ببساطة تتظبط لو عرفت اخلي ال id خاص بكل قائمة و لا يتكرر في كل القوائم

بتاريخ 11 دقائق مضت قال محمد المصري5:

جربت هذه الطريقة لكنها لن تفلح في حال وجود اكثر من قائمة تقوم بنفس المهمة ، احاول التوضيح بالصورة

المستخدم يختار عدد و بناء عليه يقوم النظام باظهار عدد متغير من القوائم ( انا عندي مثلا نوعين من الطباعه ، واحد منهم هاحطه في مكان و الاخر في مكان مختلف ) و كل نوع منهم له تفاصيله 

لما جربت طريقة حضرتك قبل كده ضبطت و نجحت لكن لو لقائمة واحدة فقط ، لكن اكثر من قائمة او زر submit  بنفس ال id فهايكرر نفس ال id و  هايقوم بعمل التغييرات على كل الازرار و القوائم اللي واخدة ال id ده 

ممكن ببساطة تتظبط لو عرفت اخلي ال id خاص بكل قائمة و لا يتكرر في كل القوائم

يمكنك فعل ذلك كالتالي

  <script>
        $(document).ready(function() {
            $('form').submit( function(e) {
              var clikedForm = $(this); 
                var m=clikedForm.find('#num').val();
                if(m==''){
                  e.preventDefault();
                  alert('يجب اختيار قيمة')
                }
            });
        });
    </script>

قمت بتخزين عنصر form الذي تم عمل submit له في متغير اسمه clikedForm ثم نستيطع الوصول لباقي العناصر من خلاله لكي نضمن عدم تداخل العناصر في بعضها
جرب الامر