Reputation: 732

How do I use document.getElementById from an input in a modal?

I have a homemade modal (not bootstrap) that I have inserted a form into that I need to use JS to retrieve the values of:

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

The test input and button is an example of what does work, when outside of the modal. Here is the 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);
}

The first alert(fn) alerts "undefined" while the second alert(test) alerts the value I enter into the test input box.

Why is this and what is the workaround? I tried making a jsfiddle: https://jsfiddle.net/k1g9dq7w/ but the Fiddle doesn't work, maybe someone knows more about JsFiddle and why this is.

Upvotes: 2

Answers (3)

Joseph Didion

Reputation: 142

It is true that you need to remove the unique id attribute from the <p> element.

However if you test it with only that change it will still not work on the given jsFiddle sample. you need to change the jsFiddle javascript settings by clicking on the javascript button over the paragraph, and changing load type from 'onload' to 'No wrap ~In head' so it will treat the javascript as if it is in the <head> area of the html, Rather than their default which is executing the script onLoad.