¿Cómo paso los valores usando jQuery/JavaScript?

Question

Tengo una página con un gráfico circular (Canvas 2D) que utiliza la función JS para crear. Con la función, puedo ingresar HTML algunos valores para dibujar el gráfico PIE. Simplemente se ve así en los códigos

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

Lo que significa que puedo ingresar colores/ángulos fijos para mi gráfico. Lo que estoy tratando de hacer es intentar hacer un área de entrada de texto para que pueda ingresar números y el script puede cambiar automáticamente al número que se ingresa o utilizando un botón Enviar.

Esto es todo lo que tengo en este momento, ¿alguien puede darme una mano con esto?

<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>

Así que digamos si ingreso 100 en el primer área de texto y haga clic en Enviar, entonces mi

piechart("..........[ 75, 75, 75]); cambiaría a

piechart("..........[ 100, 75, 75]);o

piechart("..........[ 100, 0, 0]);ya que no ingresé nada en la segunda y tercera área de texto

Gracias por adelantado.

Answer 1

Esto no es realmente valores de paso. Solo está llamando a una función cuando presiona un botón:

$(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() Obtiene el valor del input elemento. Hacemos || 0 Para configurarlo 0 en caso de que el navegador no entienda type="number" y nos envía una cadena vacía.

Answer 2

Prueba esto, cambie el código según sea necesario

<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

Lo haría de esta manera:

$('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);
});

Prueba en el violín aquí