javascript function in separate .js file: how to get document object?

magellan · Sep 18, 2014

I have a simple javascript function found in a separate .js file:

function test(doc_obj)
{
var x = document.getElementById(doc_obj);
//x is a document object that has been initialized w/the values from SRMForm

var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements.value + "<br>";
}

console.log(text);

}

When I invoke the javascript function in the actual form (<form id="SRMForm" method="post" action="./SRMFormProcess.php">)
via <select id="u4" class="u4" name="URL" onchange="test(this.document)"> the browser web developer console reports back
that x is null in function test.

So how do I properly pass the form object to the test function?

pcgamer4life · Sep 19, 2014

I'm far from a javascript expert (extremely far), but I'll take a stab. getElementById expects a string of an element ID. In your function call you're passing it the document object, rather than the ID of the document object.

pcarini · Sep 19, 2014

This works for me: http://jsfiddle.net/je1rcg0v/ (I'll post the code below so you don't have to leave the forum, but jsfiddle is pretty cool.)

As pcgamer4life mentioned, getElementById() expects a string, not a document object. It's possible that your version would work if it were passed the id of your <form> element. Personally, I prefer to pass elements directly to my function rather than perform a getElementById inside of the function, because then the function doesn't rely on the document object, which lives outside of its scope.

HTML:

</html>
<body>
     <h1>Test</h1>

    <form method="post" id="myform">
        <p>
            <label for="input1">Input 1:</label>
            <input type="text" name="input1" value="foo" />
        </p>
        <p>
            <label for="input2">Input 2:</label>
            <input type="text" name="input2" value="bar" />
        </p>
        <p>
            <label for="input3">Textarea:</label>
            <textarea name="input3">baz</textarea>
        </p>
        <p>
            <label for=""> </label>
            <input type="submit" />
        </p>
    </form>
</body>
</html>

Code:

function test(form_element) {
    var debug = "";
    for (var i = 0; i < form_element.length; ++i) {
        debug += form_element[i].value + "\n";
    }
    alert(debug);
}

test(document.getElementById('myform'));

magellan · Sep 20, 2014

Thanks for the replies.

Just out of curiosity if I were retain the same .html code but re-code this javascript function to take a document object as input and change the javascript function test line from:

var x = document.getElementById(doc_obj);

to

var x = doc_obj;

Would the code then work? Or would I have to use this.form in place of this.document in the .html code? If there is such a thing as this.form (my
.html document only has one form).

pcarini's code worked. I also got it to work by substituting this.form in place of document.getElementById('SRMForm')).
Getting a javascript redirect with POST variables working from within the context of an iframe
has been a nightmare.

pcarini · Sep 23, 2014

magellan said:
Just out of curiosity if I were retain the same .html code but re-code this javascript function to take a document object as input and change the javascript function test line from:

var x = document.getElementById(doc_obj);

to

var x = doc_obj;

Would the code then work? Or would I have to use this.form in place of this.document in the .html code?

You would need to change this.document to this.form. this in this context is the <select> element, and this.form refers to its form. Once you've changed the HTML you could skip creating var x altogether:

Code:

function test(form_obj) {
    var text = "";
    var i;
    for (i = 0; i < form_obj.length; i++) {
        text += form_obj.elements[i].value + "<br>";
    }
    console.log(text);
}

Or simplify even further:

Code:

function test(form_obj) {
    var text = "";
    for (var i = 0; i < form_obj.length; i++) {
        text += form_obj[i].value + "<br>";
    }
    console.log(text);
}

javascript function in separate .js file: how to get document object?

magellan

Member

pcgamer4life

Member

pcarini

Member

magellan

Member

pcarini

Member

Similar threads