Как передать значения с помощью jQuery/javascript?

Question

У меня есть страница с круговой диаграммой (Canvas 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]);Так как я ничего не вводил во 2 -й и 3 -й текстовой области

Заранее спасибо.

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);
});

Испытываю в скрипке здесь