CODEWITHSUNDEEP
javascript
Will Case
Will Case

Reputation: 105

getElementById seems to be returning number instead of value

So, I have done extensive research, and most examples I have seen either:

or

What is going on with my code is that the value is meant to be a string, and can be visually verified by looking at the form as having a valid string entry. The code is returning a value of 2, with no errors thrown. Trying to find the value of the variable via Chrome's console returns undefined. However, on the same form, a function generates a unique id which is being passed correctly, based on looking at the content sent to the PHP processing file.

Here is the html snippet:

<input type="text" id="billing-email">

This field has a valid email entry, ie [email protected]

The javascript file that is meant to capture the information looks like this:

$(document).ready(function() {
function getemail(){document.getElementById("billing-email").value;}

function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
}
function guid() {
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
        s4() + '-' + s4() + s4() + s4();
}
var email = window.setInterval(getemail,100);

var uuid = guid();

function submitform(){
    $.ajax({
        type: "POST",
            url: 'https://app.batteryjunction.com/cr/previous-builds/jstorage-test/controller/process.php',
            dataType: 'json',
            data: {
                myform:[{
                    uuid: uuid,
                    email: email,
                }]
            },
            async: false,
        });
    }
window.setInterval(submitform,3000);
});

The headers sent to the PHP processing file look like this:

Request URL: https://some.com/some/app.php
Request Method: POST
Status Code: 200 OK
Form Data
myform[0][uuid]: ghjkdkgh-f456-75fd-5gsr-jgdk8vhd
myform[0][email: 2

Question is, why is it sending 2 instead of the email address?

Upvotes: 0

Views: 252

Answers (1)

pete
pete

Reputation: 25091

As pointed out by j08691 in the comments, you are storing the setInterval ID (which apparently is 2). Below is a better way:

$(document).ready(function () {
    function getemail() {
        // this function doesn't return anything, so "var email = getemail();" means "var email" would be undefined
        document.getElementById("billing-email").value;
    }

    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }

    function guid() {
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
            s4() + '-' + s4() + s4() + s4();
    }
    // window.setInterval returns an integer value representing the interval
    // so you can use clearInterval to stop the interval
    // correct use of "email" below would be: window.clearInterval(email);
    //var email = window.setInterval(getemail, 100);

    //var uuid = guid();

    function submitform() {
        var email = document.getElementById("billing-email").value,
            uuid = guid();
        $.ajax({
            "type": "POST",
            "url": "https://app.batteryjunction.com/cr/previous-builds/jstorage-test/controller/process.php",
            "dataType": "json",
            "data": {
                "myform": [{
                    "uuid": uuid,
                    "email": email //remove the last comma, or IE will throw a hissy-fit
                }]
            },
            "async": false,
        });
    }
    window.setInterval(submitform, 3000);
});

Upvotes: 1

Related Questions