Update a javascript array's values with values from a textbox

Question

I am trying to update the value of an array "plotMe" with the values from a text box using JavaScript. Using pop() might help but not sure if i need a for statement something like for (var i=0; i<array.length; i++){ do something here? }; I just don't know how to do this. Any help would be appreciated.

var plotMe1= [[1,2], [3,4], [5,6]];

<form>
x1: <input type="text" name="x1"/>
y1: <input type="text" name="y1"/><br/>
x2: <input type="text" name="x2"/>
y2: <input type="text" name="y2"/><br/>
x3: <input type="text" name="x3"/>
y3: <input type="text" name="y3"/><br/>
</form>

Which update you want? Html -> JS Array? or JS Array -> HTML? and also are you using jquery in the page? or plain javascript? — brainless coder
– brainless coder, Commented May 5, 2014 at 14:15
Thanks. I want to update the plot values with the values in the text boxes. So, lets say the plotted values are up to date. Then I go and enter different values into the text boxes, I click a button or onkeyup, the values in the array are updated, thereby changing the plots. No JQuery, plain JavaScript and HTML -> JavaScript. — user2933937
– user2933937, Commented May 5, 2014 at 14:34

brainless coder · Accepted Answer · 2014-05-05 14:50:15Z

1

If you can change the HTML a little try this -

var plotMe1= [[1,2], [3,4], [5,6]];

<form>
x1: <input type="text" class="x" name="x1"/>
y1: <input type="text" class="y" name="y1"/><br/>
x2: <input type="text" class="x" name="x2"/>
y2: <input type="text" class="y" name="y2"/><br/>
x3: <input type="text" class="x" name="x3"/>
y3: <input type="text" class="y" name="y3"/><br/>
</form>

I am using jQuery so the code is -

$("input").on('keyup', function(){
    var x = $.map($("input.x").toArray(), function(e){
         return $(e).val();
    });
    var y = $.map($("input.y").toArray(), function(e){
         return $(e).val();
    });
    plotMe1 = [];
    for(var i = 0; i < x.length; i++){
         plotMe1[i] = [x[i], y[i]];
    }
});

Here you go, this will also help you use more inputs if you like. I haven't tested on fiddle, but should work.

But if you are not at liberty to change the HTML try the following code -

$("input").on('keyup', function(){
        var x = $.map($("input[name^='x']").toArray(), function(e){
             return $(e).val();
        });
        var y = $.map($("input[name^='y']").toArray(), function(e){
             return $(e).val();
        });
        plotMe1 = [];
        for(var i = 0; i < x.length; i++){
             plotMe1[i] = [x[i], y[i]];
        }
    });

Personally I don't like the 2nd approach cause if searches with name starting with x or y, so that might cause errors if there are more inputs starting with these but have different purpose, i would suggest the first approach, using classes for specific inputs.

edited May 5, 2014 at 14:50

answered May 5, 2014 at 14:41

brainless coder

6,4501 gold badge23 silver badges37 bronze badges

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

3 Comments

brainless coder Over a year ago

I forgot to parseInt the values, so use parseInt($(e).val()) instead of $(e).val() when you use

user2933937 Over a year ago

ok, thank you again. Let me see how I can do this. I am actually using D3 with this. So I will try to make it work on my own from here. I appreciate your help.

user2933937 Over a year ago

Thank you for taking the time to help!

Adam MacDonald · Accepted Answer · 2014-05-05 15:00:57Z

0

you can change the value of plotMe1 by:

plotMe1[0][0]=9;

and dynamically change it when the text field changes by something like:

x1: <input type="text" name="x1" onkeyup="update_plotMe(this)">

and then a function

function update_plotMe(o){
    if(o.name=='x1'){
        plotMe1[0][0]=o.value;
    }
}

If you have many plots, you will want to dynamically read the name of the input field (o.name in this example) and calculate the plots so you don't have a bunch of if/else statements

EDIT: >> Without using If/Else ...

<script>
var plotMe1= [[1,2], [3,4], [5,6]];

function update_plotMe(o){
    var char1=o.name.substr(0,1);
    var char2=o.name.substr(1,1);

    var pos1=parseInt(char2)-1;
    var pos2=(char1=='y')?(1):(0);

    plotMe1[pos1][pos2]=o.value;
}
</script>


<form>
x1: <input type="text" name="x1" onkeyup="update_plotMe(this)"/>
y1: <input type="text" name="y1" onkeyup="update_plotMe(this)"/><br/>
x2: <input type="text" name="x2" onkeyup="update_plotMe(this)"/>
y2: <input type="text" name="y2" onkeyup="update_plotMe(this)"/><br/>
x3: <input type="text" name="x3" onkeyup="update_plotMe(this)"/>
y3: <input type="text" name="y3" onkeyup="update_plotMe(this)"/><br/>
</form>

edited May 5, 2014 at 15:00

answered May 5, 2014 at 14:17

Adam MacDonald

1,95815 silver badges19 bronze badges

1 Comment

user2933937 Over a year ago

Thank you. I will try this. Although i think i may need a function no? to update all the array values?

Collectives™ on Stack Overflow

Update a javascript array's values with values from a textbox

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related