Comment transmettre des valeurs en utilisant jQuery / JavaScript?

Question

J'ai une page avec un graphique à secteurs (Canvas 2D) qui utilise la fonction JS pour créer. Avec la fonction, je peux alors saisir HTML quelques valeurs pour dessiner le graphique à secteurs. Cela ressemble simplement à ça dans les codes

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

Ce qui signifie que je peux saisir des couleurs / angles fixes pour mon graphique. Ce que j'essaie de faire, c'est d'essayer de faire quelques zones d'entrée de texte afin que je puisse saisir des numéros et que le script peut automatiquement passer à l'entrée du nombre ou à l'aide d'un bouton Soumettre.

C'est tout ce que j'ai pour le moment, quelqu'un peut-il me donner une main avec ça?

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

Disons donc que si j'entre 100 dans la première zone de texte et cliquez sur Soumettre, puis mon

piechart("..........[ 75, 75, 75]); changerait à

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

piechart("..........[ 100, 0, 0]);Depuis que je n'ai rien saisi dans la zone de texte 2e et 3e

Merci d'avance.

Answer 1

Ce n'est pas vraiment des valeurs qui passent. Il s'agit simplement d'appeler une fonction lorsque vous appuyez sur un bouton:

$(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() obtient la valeur du input élément. Nous faisons || 0 Pour le régler sur 0 juste au cas où le navigateur ne comprend pas type="number" et nous envoie une chaîne vide.

Answer 2

Essayez ceci, modifiez le code au besoin

<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

Je le ferais de cette façon:

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

Essai dans le violon ici