how do I pass values using jQuery/javascript?

Question

I have a page with a pie chart (canvas 2d) which uses js function to create. With the function, I can then in html input some values to draw the pie chart. It simply looks like this in codes

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

Which means I can input fixed colors/angles for my chart. What I'm trying to do is trying to make a few text input area so I can input numbers and either the script can automatically change to the number being input or using a submit button.

This is all I have at the moment can someone give me a hand with this?

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

So let's say if I input 100 into the first text area and click submit then my

piechart("..........[ 75, 75, 75]); would change to

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

piechart("..........[ 100, 0, 0]);since I didn't input anything into the 2nd and 3rd text area

Thanks in advance.

create variable then using that store your array and pass that into your function — Sridhar R
– Sridhar R, Commented Nov 8, 2013 at 9:38
@SridharR - ah! I get what you mean but how do I do it with javascript/jquery? I'm used to php but if I'm not using php I know how to store it into a new variable but pass it into the function I'm pretty much stuck here :( — Dora
– Dora, Commented Nov 8, 2013 at 9:45

lonesomeday · Accepted Answer · 2013-11-08 11:08:03Z

2

This isn't really passing values. It's just calling a function when you press a button:

$(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() gets the value of the input element. We do || 0 to set it to 0 just in case the browser doesn't understand type="number" and sends us an empty string.

edited Nov 8, 2013 at 11:08

answered Nov 8, 2013 at 9:41

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dora Over a year ago

works really good but there's a little glitch, after submit it only overlaps the previous chart. Each time it just overlaps and still can see the previous chart if the newer angle is smaller than the previous one :(

lonesomeday Over a year ago

@user1850712 In that case you need to remove the previous chart! I don't know how you'd do that: it would almost certainly be in the piechart method.

Dora Over a year ago

ah! I get what you mean...I downloaded the piechart from other places I guess because the chart is drawing and redrawing again since there isn't a way to refresh thanks a lot for the help...but I'm not sure who to give the check marks to :( can I give multiple?

lonesomeday Over a year ago

@user1850712 It occurred to me that the simple way to start over would simply be to clear the canvas. This isn't complicated to do: see the edit to my answer/

Dora Over a year ago

it's the same though..if I didn't understand wrong, the way you are clearing the canvas is setting it's height and width to 0 so actually it still exist but just kind of invisible since the size is 0

Zahidul Hossein Ripon · Accepted Answer · 2013-11-08 09:55:01Z

1

Try this, Change code as required

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

answered Nov 8, 2013 at 9:55

Zahidul Hossein Ripon

6726 silver badges17 bronze badges

3 Comments

Dora Over a year ago

somehow with yours, after submitting the chart will show only a micro second which when I release the submit then it bounces back to default value again :(

Zahidul Hossein Ripon Over a year ago

try <input type="button" id="submitBtn" value="submit">

Dora Over a year ago

oh that's good! but ran into the same problem as lonesomeday's I guess it's the piechart's code that's causing the problem...thanks a lot!

Jai · Accepted Answer · 2013-11-08 12:42:31Z

0

I would do it this way:

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

Tryout in Fiddle here

edited Nov 8, 2013 at 12:42

answered Nov 8, 2013 at 9:51

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

Dora Over a year ago

weird..I tried fiddle it looks all good to me but when I put the code in nothing happens :(

lonesomeday Over a year ago

You need to call get on the result of map. Otherwise map returns a jQuery object, which looks like an array in Firebug but isn't one in reality. jsFiddle showing this.

Collectives™ on Stack Overflow

how do I pass values using jQuery/javascript?

3 Answers 3

5 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related