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

Question

我有一个自制的模式(不是 Bootstrap )，我在其中插入了一个表单，我需要使用 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);
}

第一个 alert(fn) 提示“未定义”，而第二个 alert(test) 提示我在测试输入框中输入的值。

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

Answer 1

删除 id来自 <p> . id在文档中是唯一的。