Question

在过去24小时的某个时刻，我有一个名为get_contact_info的工作函数，它返回了一系列文本输入的内容。突然，代码停止返回值并开始返回＆＃34; undefined＆＃34;作为元素值，虽然注释已在代码或html中更改。

custom.js包含以下内容

var first_name, last_name, email, phone_number;
var contact_info = [];

function get_contact_info(){
    alert("This is the function called by the button");
}
/*  contact_info[0] = document.getElementsByName('fname').value;
    contact_info[1] = document.getElementsByName('lname').value;
    contact_info[2] = document.getElementsByName('email').value;
    contact_info[3] = document.getElementsByName('phone').value;

    alert("Name = " + contact_info[0] + " " + contact_info[1]);
    alert("Email = " + contact_info[2] + ", Phone Number " + contact_info[3]);
};*/


}());

我的html如下：

        <form>
        <table>
            <tbody>
                <tr><div class="custom text" style="color: red"><strong>Please enter your contact info to create a quote</strong></div></tr>
                <tr><td></td></tr>
                <tr>
                    <td><strong>First Name:</strong></td>
                    <td><input type="text" id="fname" value="Joe"/></td>
                </tr>
                <tr>
                    <td><strong>Last Name:</strong></td>
                    <td><input type="text" id="lname" value="Johnson"/></td>
                </tr>
                <tr>
                    <td><strong>Email:</strong></td>
                    <td><input type="text" id="email" value="joe@johnson.com"/></td>                        
                </tr>
                <tr>
                    <td><strong>Phone Number:</strong></td>
                    <td><input type="text" id="phone" size="15" value="555-1212"/></td>     
                </tr>

                <tr>
                    <td><input id="contact_info" type="submit" value="Set My Contact Info" onClick="get_contact_info()" /></td>                     
                </tr>
            </tbody>                
        </table>
    </form>

我是否实施了这个？我试图教自己基本的JavaScript，但我似乎在这篇文章上失败了，不知道在哪里。

在Firefox v30.0中使用Firebug，控制台调用 document.getElementsByName（＆＃39; FNAME＆＃39）。值; 返回＆＃34; undefined＆＃34; document.getElementsByName（＆＃39; FNAME＆＃39）; 返回一个NodeList，但没有元素。

叹息

Answer 1

使用getelementbyidID而不是name，或设置name属性。

contact_info[0] = document.getElementByID('fname').value;

Answer 2

您正在使用getElementsByName代替getElementById，但由于您从未为输入提供任何name属性，因此无法使用contact_info[0] = document.getElementById('fname').value; contact_info[1] = document.getElementById('lname').value; contact_info[2] = document.getElementById('email').value; contact_info[3] = document.getElementById('phone').value;

{{1}}

Answer 3

您发布的代码存在语法错误，而且似乎抛出错误的部分已被注释掉。正如其他人所说，你有 getElementsByName 和 getElementById 的问题。但是你的问题远不止于此。

可以在不单击提交按钮的情况下提交表单，因此通常会在表单提交到表单的提交处理程序时附加应该运行的侦听器。它还有助于使用 this 传递对表单的引用（原因将在以后变得清晰）：

<form onsubmit="get_contact_info(this)" ...>

表单控件只有在有名称的情况下才会提交，通常不需要ID，所以将ID更改为名称：

  <td><input type="text" name="fname" value="Joe"></td>

提交按钮变为：

<input type="submit" value="Set My Contact Info">

现在，您还可以使用其名称作为表单属性来访问表单控件。由于在调用中传递了对表单的引用（参见上文），因此该函数可以是：

var contact_info = [];

function get_contact_info(form) {
  contact_info[0] = form.fname.value;
  contact_info[1] = form.lname.value;
  contact_info[2] = form.email.value;
  contact_info[3] = form.phone.value;

  alert("Name = " + contact_info[0] + " " + contact_info[1]);
  alert("Email = " + contact_info[2] + ", Phone Number " + contact_info[3]);
}

另请注意，getElementsByName会返回没有值属性的live NodeList，因此如果您打算使用它，则可以使用它：

document.getElementsByName('email')[0].value

您还可以使用数组文字创建数组：

contact_info = [form.fname.value, form.lname.value, form.email.value, form.phone.value];

如何正确使用与SUBMIT的JavaScript？

3 个答案: