如何从模式中的输入中使用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）警告“未定义”，而第二个警报（测试）警告我输入测试输入框的值。

为什么会这样，解决方法是什么？我尝试制作一个jsfiddle：https://jsfiddle.net/k1g9dq7w/但是小提琴不起作用，也许有人更了解JsFiddle及其原因。

Answer 1

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

Answer 2

<p>代码和<input>代码的ID应该不同。

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

Answer 3

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

但是，如果仅使用该更改进行测试，则仍然无法对给定的jsFiddle示例进行测试。你需要通过单击段落上的javascript按钮来更改jsFiddle javascript设置，并将加载类型从'onload'更改为'No wrap~Insert'，这样它就会将javascript视为{{1}中的javascript } html的区域，而不是执行脚本onLoad的默认值。