How can I take user input and return value from array on client side?

Question

Just starting out in the world of web development... so I'm hoping you can help me here...

I have a very simple webpage which has a form input on it. I would like to have a script that will take the user input and generate a response based on an a value on an array.

It would be something like this...

User inputs word >> Click a link >> Script takes first letter of Last Name >> Script outputs value in array relating to letter.

Is this possible? I know you can do stuff with onClick to make an interaction, but I don't know where to start really.

Any help/advice would be great.

What do you mean by array relating to letter? What are the contents of that array? — Michael Berkowski
– Michael Berkowski, Commented Sep 9, 2012 at 13:28
Start with calling a function with onclick. Can you do that? Next read the input. Can you do that? Next learn about substr or charAt. Next learn about indexing an array. — epascarello
– epascarello, Commented Sep 9, 2012 at 13:34

Elliot Bonneville · Accepted Answer · 2012-09-09 13:47:14Z

There are several different components that go into a feature like this. They are divided between the HTML and the Javascript. To start with, we need a text input box and a button that says "Submit". Then we need some way to display the returned value, which is based on the user's input.

Then, for the Javascript, we need a way to detect when the user presses submit. Then we need to retrieve his input, and get the value from an array that corresponds to that input. Some fallbacks would be nice too.

So, let's start with the HTML:

<input type="text" id="nameField" placeholder="Please enter your name..."> </input> <br>
<button id="submitName" >Submit</button>

Pretty simple stuff, we're just setting up our input and our submit button. But we also need a way to display the returned value from the array, so we'll add a <p> (paragraph) element, so that we can set it to display our text later on:

<p id="valueDisplay"> </p>

Now for the Javascript:

var arrayOfValues = {
    a: "1",
    b: "2",
    c: "3",
    d: "4",
    e: "5",
    f: "6",
    g: "7",
    h: "8",
    i: "9",
    j: "10",
    k: "11",
    l: "12",
    m: "13",
    n: "14",
    o: "15",
    p: "16",
    q: "17",
    r: "18",
    s: "19",
    t: "20",
    u: "21",
    v: "22",
    w: "23",
    x: "24",
    y: "25",
    z: "26"
};

$(document).ready(function() {
    // first we attach an onClick handler for the submit button
    $("#submitName").click(function() {
        // now we need to get the value from our textbox
        var name = $("#nameField").val();

        // check if the name's length is 0. If it is, we can't do anything with it.
        if (name.length === 0) {
            alert("Please enter a name.");

            // cancel the function completely:
            return;
        }

        // set the name to lower case
        name = name.toLowerCase();

        // split the name into two words, so that we can do stuff with the first name
        name = name.split(" ");

        // create an empty string to hold our return value
        var returnValue = "";

        // here we're going to iterate through the letters of the first name
        for (var i = 0; i < name[0].length; i++) {
            // name[0] refers to the first part of the name
            var curLetter = name[0].charAt(i);
            returnValue += arrayOfValues[curLetter];
        }

        // display the new returnValue in our <p> element:
        $("#valueDisplay").html(returnValue);
    });
});

The above Javascript is sort of long, but is explained (clearly, I hope) in the comments. You can find a working version of it here. Of course, the numbers in the arrayOfValues are just an example. You can replace them with whatever values you want--just make sure they're in quotes if they're not going to be numbers. arrayOfValues, by the way, isn't an array: it's an object used as an associative array.

Finally, I used the popular Javascript library jQuery to make matters a little simpler in the above script. Your functionality can be created without jQuery, but it certainly makes matters a lot simpler.

It's better to do placeholder="Please enter your name..." instead of value="Please enter your name..."
Mm, good point. I actually didn't know about the placeholder value--guess you learn something new every day. :)

AboQutiesh · Accepted Answer · 2012-09-09 13:31:55Z

1

you can use js objects < http://www.w3schools.com/js/js_objects.asp >

create an object wich holdes an array inside contains the values that would you like to output

var arrayOfValus = new Array('go','eat','drink','write','read');
function onSubmit(){
   //1- get the submited values
   //2- split or change to array of char to get first letter
   //3- use .match(submited value) to get the first matching value from the array
   //4- do what you want with find word print or alert
}

hope that can help you, best wishes.

edited Sep 9, 2012 at 13:31

answered Sep 9, 2012 at 13:26

AboQutiesh

1,7162 gold badges9 silver badges14 bronze badges

Comments

codingbiz · Accepted Answer · 2012-09-09 13:35:39Z

1

By the way you have not mention the content of your array

<input type="text" id="lastname" />
<input type="button" value="find In Array" onclick="findInArray()" />

<script>    
var letters = new Array();
letters['m'] = 'meow';
letters['z'] = 'zoom';
letters['k'] = 'kiosk';

function findInArray()
{
    var inp = document.getElementById('lastname').value; //get textbox value
    var firstLetter = inp[0];  //get first character
    alert(letters[firstLetter]);  //display array content where key = firstletter
}
</script>

answered Sep 9, 2012 at 13:35

codingbiz

26.4k9 gold badges62 silver badges99 bronze badges

1 Comment

codingbiz Over a year ago

Watch out for lowecase/uppercase in the array key

Collectives™ on Stack Overflow

How can I take user input and return value from array on client side?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related