How to get multiple user inputs and store it in an array using jquery and/or javascript and then access the elements in an array

Question

I want to use jquery to:

Get user input several times and append the input to a div.
Store each of the user's inputs in a single array so that I can save them.
Be able to pass the input value (at a specific index in the array) to a javascript function (search) when the user clicks on the input within the div it was appended to.

Here is my code so far:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type = "text/javascript" src='script.js'>
        </script>
        <title></title>
    </head>
    <body>
     <form name="searchForm">
         <input type="text" id="search" placeholder="Enter Card Name" name="searchItem"/>
     </form>
     <div id="button">Search!</div>
    <br/>
    <div id="output"></div>
    <div id="save"></div>
    </body>
</html>

Javascript:

function Vanguard(name,grade,skill,power,shield,critical, type, nation, clan, race){
    this.name = name;
    this.grade = grade;
    this.skill = skill;
    this.power = power;
    this.shield = shield;
    this.critical = critical;
    this.type = type;
    this.nation = nation;
    this.clan = clan;
    this.race = race;
};


var asurakaiser = new Vanguard("Asura Kaiser", 3, "Twin Drive!!", 11000, 0, 1, "Normal Unit", "Star Gate", "Nova Grappler", "Battleroid");
var kingofknightsalfred = new Vanguard("King of Knights, Alfred", 3, "Twin Drive!!", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Royal Paladin", "Human");

var units = new Array(asurakaiser, kingofknightsalfred);

function printVanguard(p){
    document.getElementById('output').innerHTML +=("<hr />");
    document.getElementById('output').innerHTML +=("Name: " + p.name);    
    document.getElementById('output').innerHTML +=("<br />Grade: " + p.grade);
    document.getElementById('output').innerHTML +=("<br />Skill: " + p.skill);
    document.getElementById('output').innerHTML +=("<br />Power: " + p.power);
    document.getElementById('output').innerHTML +=("<br />Shield: " + p.shield);
    document.getElementById('output').innerHTML +=("<br />Critical: " + p.critical);
    document.getElementById('output').innerHTML +=("<br />Type: " + p.type);
    document.getElementById('output').innerHTML +=("<br />Nation: " + p.nation);
    document.getElementById('output').innerHTML +=("<br />Clan: " + p.clan);
    document.getElementById('output').innerHTML +=("<br />Race: " + p.race);
    document.getElementById('output').innerHTML +=("<br />");
};

var search = function(name){
  for (i = 0; i < units.length; i++){
    if (units[i].name === name) {
        printVanguard(units[i]);
    }
  }  
};


$(document).ready(function() {
 $('#button').click(function(){
  var output = $('input[name=searchItem]').val();
    $('#output').append("<br />" + '<div class="item2">' + output + '</div>'); 
    $('#output').click(function(){
     $('#save').append(search(output));
 }); 
 });

});

So basically look at the jquery part... if you notice, when the user clicks on the button, it will save the input to the variable "output" (I dunno why I chose that name because looking back it sounds confusing). But anyway, in the line after, the variable output will append to the div output. And if the user clicks on the output itself within the div, it will append a function (search) which takes the user's input as the parameter.

But something is wrong with my code... because if I enter "Asura Kaiser" without the quotes, click on the name, it will show all the correct data based on the search function which calls search("Asura Kaiser"). But then when I click on this result, it displays the same data yet again. If I try to enter a different name like "King of Knights, Alfred" without the quotes, it still displays the results for "Asura Kaiser" in addition to the results for "King of Knights, Alfred".

Basically, what seems to be happening is my output variable is accumulating data or something.

I think that, if I stored each of the user's inputs in a unique element of an array, and call on that specific element when I put it in the parameter for the search function, I should be able to get my program to work correctly.

Any help would be appreciated. To clarify, what I'm looking for is a way to store very many user input's and to be able to pass them as unique parameters to the search function based on their index in the array.

Something like search(output[i]) for some index within the array.

The overall goal of this program is so that people can search for card information for a popular card game called Cardfight!! Vanguard. I basically am aiming to create a program that will allow you to look up cards and make a deck, and this is the start of that long process.

Thanks for reading!

^ Agree, refactor now before you continue to work on it, otherwise it'll be too late, and you'll have to start all over again... — elclanrs
– elclanrs, Commented Jan 27, 2013 at 2:02
refactor means get rid of about 80% of the code you have and consolidate it. — charlietfl
– charlietfl, Commented Jan 27, 2013 at 2:21
I can try to do that, but I still don't know how to get it to work :P — Kamui
– Kamui, Commented Jan 27, 2013 at 2:22

charlietfl · Accepted Answer · 2013-01-27 20:14:42Z

I suggest you start over with understanding that at some point you will need data stored remotely on a server. Without remote storage you have no way for users to access updates. You can use a website host or cloud or whatever.

That being said you would want to start using JSON as data delivery method. I created a significant demo for you that does all of the things you mention in question , and shows you in comments where you would communicate with server at times.

The basic starting point for JSON data used is:

 [{
    "user_id": 1,/* will need an id system to store and retrieve data*/
        "name": "Asura Kaiser",
        "grade": 3,
        "skill": "Twin Drive!!",
        "power": 11000,
        /* some items removed for clarity but included in below demo link*/
}, {
    "user_id": 2,
        "name": "King of Knights, Alfred",
        "grade": 3,
        "skill": "Twin Drive!!",
        "power": 10000            
}]

Using very little html in demo you will see that a lot can be done from this data. The demo also creates a form from the raw data structure and allows you to add new users and store them in master object in page.

I suggest you add a few users ( only need to add a name in form) then play with data display and search a bit. Try adding variety of letters in names to help get more results in name search

The majority of the code is written using jQuery. I suggest you do the same. Learning native javascript is valuable, however you can significantly cut down on amount of code using jQuery and can do an awful lot without knowing how to do same in native javascript

DEMO: http://jsfiddle.net/n3gfV/6/

Code is heavily commented to help give you ideas and understanding of what's going on

EDIT: Modified demo with limited user update capabilities. App is already needing some refactoring but will give you good frame to get ideas from

Update demo: ( not fully tested to make sure other features not broken) http://jsfiddle.net/n3gfV/7/

Suggest you use real html for forms. I created them with script to make it easy for me, however makes javascript a little more complex and migh be easier for you without the additional code

added extra ability to update existing user ... see modified demo

Filling The Stack is What I DO · Accepted Answer · 2013-01-27 02:43:49Z

0

This will get you started on the re factoring.

function printVanguard(unit){

 document.getElementById('output').innerHTML +=("<hr />");

  for(var p in unit){

    document.getElementById('output').innerHTML +=('<br />' + p +': ' + unit[p] );
     };
     document.getElementById('output').innerHTML +=("<br />");
};

answered Jan 27, 2013 at 2:43

Filling The Stack is What I DO

6,74115 gold badges58 silver badges89 bronze badges

3 Comments

Kamui Over a year ago

That's awesome!! I totally understand what you're doing too. Thanks so much for this advice!!!

Filling The Stack is What I DO Over a year ago

You'll need to set the p first letter to upper case unless you set it to upper case in your object. do not add any function in your data object, if you do add a function remember to check for if the p is a function. p === 'function' or something like that.

charlietfl Over a year ago

is still inefficient, create a string and only make one change to innerHTML at end after loop completed, will remove even more of the code in function and be more efficient for browser as well

BobS · Accepted Answer · 2013-01-27 03:14:12Z

0

Each time the button is clicked, the call to add the new click event is added -- to the entire output div. Moreover, it appears that adding a click event does not remove previously attached click events.

I suggest creating your div "class='item2'" element before appending it, and assigning the click handler to that element instead of to the whole output div.

Next up, as I noted in a comment, you appear to want to add the detail data to the "save" element, but you are calling the printVanguard function, which doesn't return anything, and instead writes directly to the #output div.

Use printVanguard to build up the HTML string and return it instead of using innerHTML. Also make sure that your search function returns what printVanguard returns.

edited Jan 27, 2013 at 3:14

answered Jan 27, 2013 at 2:40

BobS

2,6681 gold badge16 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to get multiple user inputs and store it in an array using jquery and/or javascript and then access the elements in an array

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related