Javascript with ajax values

Question

Im trying to send email through ajax at my webiste. The form is in modal (im using custombox) But for some reasons every values that i have send are nulls.How can I use getElementById in modal content ?

Link to custombox git's hub : https://github.com/dixso/custombox

function _(id) { return document.getElementById(id);}
function submitForm() {   
    _("mybtn").disabled = true;
    var formdata = new FormData();
    formdata.append( "n", _("n").value);
    formdata.append( "e", _("e").value);
    formdata.append( "m", _("m").value);
    var ajax = new XMLHttpRequest();
    ajax.open("POST","php/parser.php");
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            if(ajax.responseText == "success") {
                alert("Message has been send.");
            } else {
                btn.disabled = false;
            }
        }
    }
    ajax.send (formdata);
}

HTML :

    <!-- Modal -->
    <section class="modal" id="myModal">
        <!-- Modal content-->
        <div class="modal-content" id="modal-content">
            <img class="modal-home-logo" src="img/logo.png" alt="logo">
            <p id="modal-contact-title">Are you intrested in cooperation?</p>
            <p id="modal-contact-sub-title">Just hit me up via this simple email form !</p>
            <form id="my_form" onsubmit="submitForm(); return false;">
                <p><input id="n" placeholder="Your name - HERE" required></p>
                <p><input id="e" placeholder="Your email - HERE" type="email" required> </p>
                <textarea id="m" placeholder="Tell me about your project... what is it? What do you hope to accomplish ? How can i help ? Oh try to ESC if missclicked :)" rows="10" required></textarea>
                <p><input id="mybtn" type="submit" value="Let's do this !"></p>
                <p id="modal-contact-sub-title">Awsome thanks !</p>
            </form>
        </div>

    </section>
    <!-- End Modal -->

document.GetElementById returns the right HTML component but .value function is not working since it returns NULL. When i turn off my modal everything works just fine.

Well if you write document.GetElementById('n').value = "someText" in dev Console it works but document.GetElementById('n').value return null like always :(

Well i remove custombox plugin and made modal animations myself. So it is working now.

"Possible Duplicated" http://stackoverflow.com/questions/38907748/php-contact-form-reference-error . Similar to this other question too http://stackoverflow.com/questions/42352041/how-to-append-select-list-in-a-php-contact-form — HenryDev, Mar 18 '17 at 21:58
The problem is my code is working just fine as long as i delete my modal class. I got no clue why but for some reasons my modal "animations" destroys .value method. — robertbie, Mar 18 '17 at 22:03

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

The problem is not the custombox plugin, FormData is created only for sending key data, not for retrieving it. More info: here.

edited May 23 '17 at 10:30

Community

1
1

answered Mar 19 '17 at 08:02

dixso

36
1
2

Ok but if it is FormData problem then why alert(_("n").value); returns null aswell? posted at the beggining on the function – robertbie Mar 19 '17 at 13:25

score 0 · Accepted Answer · answered Mar 31 '17 at 20:01

0

Well i remove custombox plugin and made modal animations myself. So it is working now.

answered Mar 31 '17 at 20:01

robertbie

17
5

Javascript with ajax values

2 Answers2