حفظ حاصل ضرب حقلين في حقل جديد بلغة الجافا سكربت

محمد الاهلي · 1 مارس 2021

عندي Input type اديته متغير اسمه consumption-m

و اتنين تانيين اديتهم اسماء marker-hight-production و الاخر اسميته layers-count

عاوز الحقل بتاع consumption-m يكون نتيجته حاصل ضرب marker-hight-production و layers-count

كتبت الكود لحد كده

مساعدة فضلا مع الشكر

       $(".consumption-m").keyup(function(){
            var val = $(this).val();
           });

Mohammed Saber6 · 1 مارس 2021

مرحباً محمد:
أنت تريد أن تعطي ال consumption-m قيمة حاصل ضرب الحقلين الإضافيين ولذلك من المفترض عند تغيير قيمة أي حقل من الحقول الأخرى يجب أن تقوم بحساب قيمة الحقل consumption-m

const input1 = $(".marker-hight-production"); 
const input2 = $(".layers-count");
let resultInput = $(".consumption-m");

$(".consumption-m").keyup(multiplyAndUpdate);

$(".consumption-m").keyup(multiplyAndUpdate);

function multiplyAndUpdate() {
  const input1Val = input1.val() || 0; // || 0 ==> معناها قيمة افتراضية في حالة كانت قيمة الحقل ليست رقم
  const input2Val = input2.val() || 0; // || 0 ==> معناها قيمة افتراضية في حالة كانت قيمة الحقل ليست رقم
  const result = input1Val*input2Val;
  
  // تحديث قيمة الحقل 
  resultInput.val(result)
}

محمد الاهلي · 1 مارس 2021

بتاريخ 1 ساعة قال Mohammed Saber:

مرحباً محمد:
أنت تريد أن تعطي ال consumption-m قيمة حاصل ضرب الحقلين الإضافيين ولذلك من المفترض عند تغيير قيمة أي حقل من الحقول الأخرى يجب أن تقوم بحساب قيمة الحقل consumption-m


const input1 = $(".marker-hight-production"); 
const input2 = $(".layers-count");
let resultInput = $(".consumption-m");

$(".marker-hight-production").keyup(multiplyAndUpdate); // هنا تم تعديل اسم الكلاس

$(".layers-count").keyup(multiplyAndUpdate); // هنا تم تعديل اسم الكلاس

function multiplyAndUpdate() {
  const input1Val = input1.val() || 0; // || 0 ==> معناها قيمة افتراضية في حالة كانت قيمة الحقل ليست رقم
  const input2Val = input2.val() || 0; // || 0 ==> معناها قيمة افتراضية في حالة كانت قيمة الحقل ليست رقم
  const result = input1Val*input2Val;
  
  // تحديث قيمة الحقل 
  resultInput.val(result)
}

اشكرك اخي الحبيب وضحت الفكرة لكن ، انا جربت الكود لكن لم يعطني نتيجة

Mohammed Saber6 · 1 مارس 2021

مرحباً محمد الرجاء رفع ملف المشروع

سمير عبود · 1 مارس 2021

يُمكنك عمل ذلك عن طريق التالي:

لنفترض أنه لديك الحقول بالشكل التالي:

<input type="number" class="marker-hight-production" placeholder="marker-hight-production" value="0">

<input type="number" class="layers-count" placeholder="layers-count" value="0">

<input type="number" class="consumption-m" placeholder="consumption-m">

بعد ذلك يُمكنك إستخدام jQuery للتسمع على حدث keyup أو الحدث الذي تريده في كل من الحقلين و على أساسه تقوم بتغير قيمة الحقل الثالث كما هو موضح أدناه:

$(function () {
  
  $('.marker-hight-production, .layers-count').on('keyup', function() {
    
    let x = $(".marker-hight-production").val(),
        y = $(".layers-count").val();
    
    $('.consumption-m').val(x * y);
    
  });
  
});

و هذه الpen توضح العملية: إضغط هنا

محمد الاهلي · 1 مارس 2021

اشكركم اساتذتي الكرام ، عذرا منكم ما زلت مبتدئ

كود ال html

<div class="form-row colors col-12">
                                    <div class="col cr">
                                        <div class="inputgroup">
										<p></p>
                                            <h5 style="text-align:center; padding: 10px; display:block; background-color:DodgerBlue" >عرض ماركر ${i+1}</h5>
											<label>عرض القماش بالسم</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="inputGroupPrepend"><i class="pe-7s-user"></i></span>
                                                </div>
                                                <input type="number" class="form-control fabric-width" placeholder="عرض القماش بالسم" required>
                                                <div class="invalid-feedback">
                                                   برجاء تحديد عرض القماش
                                                </div>
												
                                            </div>
											<label>طول ماركر القماش للعينة الواحدة بالسنتيمتر</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="inputGroupPrepend"><i class="pe-7s-user"></i></span>
                                                </div>
                                                <input type="number" class="form-control marker-hight-sample" placeholder="طول ماركر القماش للعينة الواحدة بالسنتيمتر" required>
                                                <div class="invalid-feedback">
                                                    برجاء كتابة طول ماركر القماش للعينة
                                                </div>
												
                                            </div>
											<label>	طول ماركر القماش لمقاسات الإنتاج بالسنتيمتر</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="inputGroupPrepend"><i class="pe-7s-user"></i></span>
                                                </div>
                                                <input type="number" class="form-control marker-hight-production" placeholder="طول ماركر القماش لمقاسات الإنتاج بالسنتيمتر" required>
                                                <div class="invalid-feedback">
                                                    برجاء كتابة طول ماركر القماش لمقاسات الانتاج
                                                </div>
												
                                            </div>
											
											<label>عدد الطبقات</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="inputGroupPrepend"><i class="pe-7s-user"></i></span>
                                                </div>
                                                <input type="number" class="form-control layers-count" placeholder="عدد الطبقات	" required>
                                                <div class="invalid-feedback">
                                                    برجاء كتابة عدد الطبقات
                                                </div>
												
                                            </div>
											
											<label>عدد الأمتار لكل كجم</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="inputGroupPrepend"><i class="pe-7s-user"></i></span>
                                                </div>
                                                <input type="number" class="form-control meters-per-K" readonly required>
                                                <div class="invalid-feedback">
                                                    
                                                </div>
												
                                            </div>
											
											<label>استهلاك القماش للطلبية لكل متر</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="inputGroupPrepend"><i class="pe-7s-user"></i></span>
                                                </div>
                                                <input type="number" class="form-control consumption-m" readonly required>
                                                <div class="invalid-feedback">
                                                  
                                                </div>
												
                                            </div>
											
											<label>استهلاك القماش للطلبية لكل كيلو </label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="inputGroupPrepend"><i class="pe-7s-user"></i></span>
                                                </div>
                                                <input type="number" class="form-control consumption-kg" readonly required>
                                                <div class="invalid-feedback">
                                                   
                                                </div>
												
                                            </div>
											
											<label>	كفاءة التعشيق </label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="inputGroupPrepend"><i class="pe-7s-user"></i></span>
                                                </div>
                                                <input type="number" class="form-control interlock-efficiency" placeholder="كفاءة التعشيق نسبة مئوية" required>
                                                <div class="invalid-feedback">
                                                   يرجى ادخال كفاءة التعشيق بالنسبة المئوية
                                                </div>
												
                                            </div>
                                        </div>
                                    </div>

                                </div>

و هذا الملف php المتضمن لكود الجافا

<?php

include("includes/db.php");

$title = "الماركر";

$order_id = $_GET['id'];

$query = "SELECT DISTINCT title FROM size_table_sizes WHERE size_table_id=(SELECT size_table_id FROM orders WHERE id='$order_id')";// INNER JOIN orders ON orders.client_id = clients.id";
$sizes = array();

if ($result = $conn->query($query)){

    while ($row= $result->fetch_assoc()){
        array_push($sizes, $row) ;
    }
    $result->free();

}

if (empty($sizes)) {
    header('Location: ' . $_SERVER['HTTP_REFERER']);
}

include("includes/head.php"); 
include("includes/loader.php");
?>
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
    <?php include("includes/app-header.php"); ?>
   <?php include("includes/ui-theme-settings.php");
   //add html form 
                require_once ("templates/marker-page/marker-form.html");
		

             include("includes/footer.php"); 
            include("includes/js.php");

 ?>

    <script>
        function listToMatrix(list, elementsPerSubArray) {
            var matrix = [], i, k;

            for (i = 0, k = -1; i < list.length; i++) {
                if (i % elementsPerSubArray === 0) {
                    k++;
                    matrix[k] = [];
                }

                matrix[k].push(list[i]);
            }

            return matrix;
        }

        // Add Multi Colors fields after setting a number
        $(".marker-btn").click(function () {

            var count = $(".marker-count").val();

            if (count>0){

                $(".cr").remove();

                var col_inputs = '';

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

                    col_inputs += `
                     <!--calling marker table-->
	                    <?php include_once ("./templates/functions/marker.html"); ?>	 
                    <!--calling marker table-->
                    <!--M-->
                    `;

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

                colorsStatus = true;

            }

            //console.log($(".color-degree"));

        });

        var sizes = [];
        var colors = [];

        

//calculate 

$(function () {
  
  $('.marker-hight-production, .layers-count').on('keyup', function() {
    
    let x = $(".marker-hight-production").val(),
        y = $(".layers-count").val();
    
    $('.consumption-m').val(x * y);
    
  });
  
});

محمد الاهلي · 2 مارس 2021

بتاريخ 17 ساعات قال Mohammed Saber:

مرحباً محمد الرجاء رفع ملف المشروع

رفعته اخي الفاضل

سمير عبود · 2 مارس 2021

بتاريخ 7 دقائق مضت قال محمد الاهلي:

رفعته اخي الفاضل

هل يُمكنك رفع الملفات التي تعمل عليها حتى أجرب عندي و أخبرك بالحل

محمد الاهلي · 2 مارس 2021

تفضل اخي

marker.php

marker.html

سمير عبود · 2 مارس 2021

بتاريخ 6 دقائق مضت قال محمد الاهلي:

تفضل اخي

marker.php

marker.html

يوجد ملفات ناقصة، لا يُمكنني تجربة المشروع بدونها، و لا أدري ماهي المُشكلة أو الخطأ الذي يظهر لك.

محمد الاهلي · 2 مارس 2021

اخي المشروع ضخم

انا رفعت الملف اللي فيه المشكلة بملحقاته

عشان توصل للي انا عاوزه

هتلاقي خانة اسمها عروض القماش المتوفرة

حط رقم 1 و اضغط اضافة

هايفتح لك الفورم المقصود و اللي بسأل عنه

استهلاك القماش للطلبية لكل متر consumption-m =

(طول ماركر القماش لمقاسات الإنتاج marker-hight-production * عدد الطبقات layers-count )

و شكرا على تعبك

test.rar

سمير عبود · 2 مارس 2021

بتاريخ 27 دقائق مضت قال محمد الاهلي:

اخي المشروع ضخم

انا رفعت الملف اللي فيه المشكلة بملحقاته

عشان توصل للي انا عاوزه

هتلاقي خانة اسمها عروض القماش المتوفرة

حط رقم 1 و اضغط اضافة

هايفتح لك الفورم المقصود و اللي بسأل عنه

استهلاك القماش للطلبية لكل متر consumption-m =

(طول ماركر القماش لمقاسات الإنتاج marker-hight-production * عدد الطبقات layers-count )

و شكرا على تعبك

test.rar

المُشكلة أن حقول الإدخال لا تكون موجودة عند تحميل الصفحة و إنما يتم إضافتها عن طريق جافاسكربت فيما بعد، لذلك حتى تعمل يجب أن تُغير هذه:

$(function () {
  
  $('.marker-hight-production, .layers-count').keyup (function() {
    
    let x = $(".marker-hight-production").val(),
        y = $(".layers-count").val();
    
    $('.consumption-m').val(x * y);
    
  });
  
});

إلى هذا الشكل:

$(function () {
  
  $(document).on('keyup', '.marker-hight-production, .layers-count', function() {
    
    let x = $(".marker-hight-production").val(),
        y = $(".layers-count").val();
    
    $('.consumption-m').val(x * y);
    
  });
  
});

و ستعمل.

محمد الاهلي · 2 مارس 2021

بتاريخ 9 دقائق مضت قال عبود سمير:
المُشكلة أن حقول الإدخال لا تكون موجودة عند تحميل الصفحة و إنما يتم إضافتها عن طريق جافاسكربت فيما بعد، لذلك حتى تعمل يجب أن تُغير هذه:
$(function () {
  
  $('.marker-hight-production, .layers-count').keyup (function() {
    
    let x = $(".marker-hight-production").val(),
        y = $(".layers-count").val();
    
    $('.consumption-m').val(x * y);
    
  });
  
});
إلى هذا الشكل:
$(function () {
  
  $(document).on('keyup', '.marker-hight-production, .layers-count', function() {
    
    let x = $(".marker-hight-production").val(),
        y = $(".layers-count").val();
    
    $('.consumption-m').val(x * y);
    
  });
  
});
و ستعمل.

عملت فعلا ، الله يديك الصحة و يبارك فيك

اشكرك

حفظ حاصل ضرب حقلين في حقل جديد بلغة الجافا سكربت

السؤال

محمد الاهلي

12 أجوبة على هذا السؤال

Recommended Posts

Mohammed Saber6

محمد الاهلي

Mohammed Saber6

سمير عبود

محمد الاهلي

محمد الاهلي

سمير عبود

محمد الاهلي

سمير عبود

محمد الاهلي

سمير عبود

محمد الاهلي

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية