كيف أقوم بتمرير القيم باستخدام jQuery/JavaScript؟

Question

لدي صفحة مع مخطط فطيرة (قماش 2D) والذي يستخدم وظيفة JS لإنشاء. مع الوظيفة ، يمكنني بعد ذلك في HTML إدخال بعض القيم لرسم مخطط الفطيرة. يبدو ببساطة هكذا في الرموز

  <script id="chart">
     piechart("piechart1", ["cyan", "yellow", "green"], [ 75, 75, 75]);
  </script>

مما يعني أنه يمكنني إدخال الألوان/الزوايا الثابتة لمخططتي. ما أحاول القيام به هو محاولة إنشاء بعض مساحة إدخال النص حتى أتمكن من إدخال أرقام وإما أن يتمكن البرنامج النصي تلقائيًا إلى الرقم الذي يجري إدخاله أو استخدام زر إرسال.

هذا كل ما لدي في الوقت الحالي هل يمكن لشخص ما أن يعطيني يده؟

<canvas id="piechart1"></canvas>

  <script id="chart">
     piechart("piechart1", ["cyan", "yellow", "green"], [ 75, 75, 75]);
  </script>

      <form action="" method="post">

        <label>Angle 1</label>
        <label>Angle 2</label>
        <label>Angle 3</label>
        <br>
        <input name="" id="angle1" value="" type="number">
        <input name="" id="angle2" value="" type="number">
        <input name="" id="angle3" value="" type="number">

        <input type="submit" id="submitBtn" value="submit">
      </form>

لذلك دعنا نقول إذا قمت بإدخال 100 في منطقة النص الأولى وانقر فوق إرسال ثم

piechart("..........[ 75, 75, 75]); سوف يتغير إلى

piechart("..........[ 100, 75, 75]);أو

piechart("..........[ 100, 0, 0]);بما أنني لم أدخل أي شيء في منطقة النص الثاني والثالث

شكرا مقدما.

Answer 1

هذا ليس حقًا قيمًا. إنها مجرد استدعاء وظيفة عند الضغط على زر:

$(document).ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault(); // we don't want to submit the form

        $('#piechart').each(function() { // only do this if the element is found
            // clear the canvas
            this.getContext('2d').clearRect(0, 0, this.width, this.height);
        });

        var angles = [
            $('#angle1').val() || 0,
            $('#angle2').val() || 0,
            $('#angle3').val() || 0
        ];

        piechart("piechart1", ["cyan", "yellow", "green"], angles);
    });
});

val() يحصل على قيمة input عنصر. نحن نفعل || 0 لتعيينه على 0 فقط في حالة عدم فهم المتصفح type="number" ويرسل لنا سلسلة فارغة.

Answer 2

جرب هذا ، قم بتغيير الرمز كما هو مطلوب

<canvas id="piechart1"></canvas>
<script type="text/javascript" >
$(function() {
$("#submitBtn").click(function() 
    {   
    var input1 = $("#angle1").val();
    if($("#angle1").val()=='') input1="";

    var input2 = $("#angle2").val();
    if($("#angle2").val()=='') input2="";

    var input3 = $("#angle3").val();
    if($("#angle3").val()=='') input3="";

    piechart("piechart1", ["cyan", "yellow", "green"], [input1, input2, input3]);

    });
});
</script>

      <form action="" method="post">

        <label>Angle 1</label>
        <label>Angle 2</label>
        <label>Angle 3</label>
        <br>
        <input name="" id="angle1" value="" type="number">
        <input name="" id="angle2" value="" type="number">
        <input name="" id="angle3" value="" type="number">

        <input type="submit" id="submitBtn" value="submit">
      </form>

Answer 3

سأفعل ذلك بهذه الطريقة:

$('form').on('submit', function (e) {
    e.preventDefault();
    var angles = $('input[id^="angle"]').map(function () {
        return (this.value !== "") ? this.value : 0;
    }).get();
    console.log(angles);
    piechart("piechart1", ["cyan", "yellow", "green"], angles);
});

تجرب في كمان هنا