如何从客户端的数组中获取用户输入和返回值?

时间:2012-09-09 13:12:50

标签: javascript html forms

刚刚开始在网络开发的世界......所以我希望你能在这里帮助我......

我有一个非常简单的网页,上面有一个表单输入。我想有一个脚本,它将接受用户输入并根据数组上的值生成响应。

会是这样的......

用户输入字>>点击链接>>脚本采用姓氏的第一个字母>>脚本输出与字母相关的数组值。

这可能吗?我知道你可以使用onClick进行交互,但我不知道从哪里开始。

任何帮助/建议都会很棒。

3 个答案:

答案 0 :(得分:1)

你可以使用js对象 < http://www.w3schools.com/js/js_objects.asp>

创建一个内部数组的对象包含值 你想输出

吗?
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
}

希望能帮到你, 祝福。

答案 1 :(得分:1)

顺便说一句,你没有提到数组的内容

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

答案 2 :(得分:1)

有几个不同的组件进入这样的功能。它们分为HTML和Javascript。首先,我们需要一个文本输入框和一个显示“提交”的按钮。然后我们需要一些方法来显示返回值,该值基于用户的输入。

然后,对于Javascript,我们需要一种方法来检测用户何时按下提交。然后我们需要检索他的输入,并从对应于该输入的数组中获取值。一些后备也会很好。

所以,让我们从 HTML 开始:

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

非常简单的东西,我们只是设置输入和提交按钮。但我们还需要一种方法来显示数组中返回的值,因此我们将添加一个<p>(段落)元素,以便我们可以将其设置为稍后显示我们的文本:

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

现在为 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);
    });
});​

上面的Javascript有点长,但在评论中解释(显然,我希望)。您可以找到它的工作版本here。当然,arrayOfValues中的数字只是一个例子。您可以使用您想要的任何值替换它们 - 如果它们将成为数字,请确保它们在引号中。顺便说一下,arrayOfValues不是数组:它是用作关联数组的object

最后,我使用了流行的Javascript库jQuery来使上述脚本中的问题更简单一些。您的功能可以在没有jQuery的情况下创建,但它确实使事情变得更加简单。