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

[java script] تكرار قيم ببيانات منفصلة

محمد المصري12

السؤال

سلام عليكم 

لو فيه عنوان افضل يا ريت المشرف الفاضل يغيره مع الشكر

بعمل نظام مناقصات لعميل و الدنيا تمام الحمد لله بس فيه شئ واقف قدامي

من ضمن بيانات تسجيل المناقصة المستخدم بيختار عدد بنود التوريد

بعدها بيفتح له خانات يدخل فيها اسم البند و عدد بنود الحزم اللي هاتتسجل جوا البند ده

نفترض مثلا ان المستخدم قام باختيار 3 بنود توريد

يعني هاتتفتحلي 3 divs تحتوي على اسم بند التوريد و عدد الحزم التابعه لهذا البند تحديدا و زر هايقوم بفتح اماكن ادخال للمستخدم

كل بند توريد بداخله اسماء الحزم الخاصة به

الآن زر الاضافة لا يعمل سوى لبند توريد واحد فقط

2022-09-18_17-46-07.thumb.png.d0a45ccbe2b54239ad834a0e02f88b95.png

الكود

  <div class="col-12 count2 " style="display: none">
        <div class=" has-success mb-4">
            <label class="required">عدد بنود التوريد </label>

            <div class="input-group">

                <div class="input-group-prepend">

                    <span class="input-group-text" id="inputGroupPrepend"><i class="fa fa-th"></i></span>

                </div>

                <input type="number" min="1" max="12" class="form-control pack1-count1" required>

                <div class="input-group-append">

                    <button type="button" class="btn btn-danger pack1">إضافة</button>

                </div>

            </div>

        </div>

    </div>

ثم كود السكربت



    $(".pack1").click(function () {

        let count = $(".pack1-count1").val();

        if (count>0){

            $(".supply-fields1").remove();

            var si_inputs = '';

            for (i=0 ; i<count ; i++) {

                si_inputs += `
<div class="row mt-3 mb-4 supply-fields1 ">

        <div class="col-9">
            <div class=" has-success mb-4">
                <label class="label">أسم بند التوريد</label>
                <div class="input-group">
                    <input required type="text" class="form-control contact_person" >

                </div>
            </div>
        </div>

        <div class="col-2">
            <div class=" has-success mb-4">
                <label class="label">عدد الحزم المطلوبة</label>
                <div class="input-group">
                    <input required type="text" step="any" class="form-control pack2-count2">

                </div>
            </div>
        </div>

        <div class="col-1 mt-4">

            <button id="mo" type="button" class="btn btn-primary pack4">إضافة</button>

        </div>
    </div>`;

            }
            $(this).parent().parent().parent().after(si_inputs);

        }
//##########################################
$(".pack4").click(function () {

let count2 = $(".pack2-count2").val();

if (count2>0){

    $(".supply-fields2").remove();

    var si_inputs = '';

    for (i=0 ; i<count2 ; i++) {

si_inputs += `
<div class="col-12  mb-2 mt-3 row d-flex align-items-center supply-fields2">

<label for="cc-payment" class="control-label mb-3 text-danger">إسم الحزمة</label>
<input type="text" name="supply_items" class="form-control supply_items"  >
</div>`;

}
$(this).parent().parent().parent().after(si_inputs);

}


});
//############################################
    });

فيديو توضيحي  Untitled Project.mp4

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

Recommended Posts

  • 0

أت تقوم بتطبيق دالة val على محدد وصول خاص بالأصناف، ومن الممكن أن تعيد هذه الطريقة قيمة خطأ لأنه لا يمكن تطبيق val على أكثر من عنصر مباشرة فأي عنصر يجب أن يعيد قيمته؟

إما استخدام id عند جلب قيم العدادات count أو في حال أن هنالك عنصر وحيد (له الصنف الذي تستخدمه) و يأتي في الاستعلام قم بإضافة الدالة first ليصبح جلب قيمة الحقل بالشكل:

var myVar = $('.myClass').first().val();

حاول طباعة العدادات console.log وتتبع هل قيمتهم صحيحة؟؟ وبذلك تعرف أين الخلل في الشيفرة. مع التحقق من أسما الأصناف من خلال أدوات المطورين عند فتح الصفحة

 

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...