如何使用模态输入中的document.getElementById？

Question

我有一个自制的模式（不是引导程序），我已将表单插入其中，需要使用JS来检索以下值：

<div id="openModal" class="modalDialog">
        <div><a href="#close" title="Close" class="close">X</a>

                <h2>Please contact me with any questions or to request a Free Home Market Analysis</h2>

                <!--<form id="contact_form">-->
                    <p id="fname" class="form_items">
                        <input type="text" name="fname" id="fname" placeholder="First Name" required />
                    </p>
                    <p id="lname" class="form_items">
                        <input type="text" name="lname" id="lname" placeholder="Last Name" required />
                    </p>
                    <p id="email" class="form_items">
                        <input type="email" name="email" id="email" placeholder="Email" required />
                    </p>
                    <p id="phone" class="form_items">
                        <input type="tel" name="phone" id="phone" placeholder="Telephone" />
                    </p>
                    <p id="comments" class="form_items">
                    <textarea rows="4" cols="50" name="message" placeholder="Comments" id="message"></textarea>
                    </p>
                    <p>
                        <button class="submit" type="submit" onclick="submitForm();">Submit</button>
                    </p>
                    <span id="status"></span>
                <!--</form>-->
        </div>
    </div>



<input type="text" id="test"/>
<button onclick="submitForm()">Hi</button>

测试输入和按钮是模态之外有效的示例。 这是JS：

function submitForm(){
    var xmlhttp = new XMLHttpRequest();

    var fn = document.getElementById('fname').value;
    var ln = document.getElementById('lname').value;
    var e = document.getElementById('email').value;
    var p = document.getElementById('phone').value;
    var m = document.getElementById('message').value;

    alert(fn);

    var test = document.getElementById('test').value;

    alert(test);
}

第一个警报（fn）警报“未定义”，而第二个警报（test）警报我输入到测试输入框中的值。

为什么会这样？解决方法是什么？ 我尝试制作jsfiddle： https ：//jsfiddle.net/k1g9dq7w/，但是Fiddle无效，也许有人对JsFiddle以及为什么这样做了解得更多。

Answer 1

从<p>删除id 。 id在文档中是唯一的。

Answer 2

<p>标签和<input>标签的id应该不同。

在您的情况下， getElementById('fname')方法访问了<p>标记，因为它是第一个ID等于'fname'的标记。

Answer 3

确实，您需要从<p>元素中删除唯一id属性。

但是，如果仅使用该更改进行测试，它将仍然无法在给定的jsFiddle示例中使用。 您需要通过单击段落上方的javascript按钮来更改jsFiddle javascript设置，并将加载类型从“ onload”更改为“ No wrap〜In head”，以便将javascript视为在<head>区域中的html，而不是默认值，即执行脚本onLoad的默认值。

如何使用模态输入中的document.getElementById？

问题描述

3 个解决方案

解决方案1
5 已采纳 2016-01-05 02:18:57

解决方案2
2 2016-01-05 02:24:49

解决方案3
0 2016-01-05 02:33:44

如何使用模态输入中的document.getElementById？

问题描述

3 个解决方案

解决方案1 5 已采纳 2016-01-05 02:18:57

解决方案2 2 2016-01-05 02:24:49

解决方案3 0 2016-01-05 02:33:44

解决方案1
5 已采纳 2016-01-05 02:18:57

解决方案2
2 2016-01-05 02:24:49

解决方案3
0 2016-01-05 02:33:44