Jump to content

What does document.getElementById('theForm').submit(); do?


spence911
Go to solution Solved by Psycho,

Recommended Posts

This is a script that validates a user's email and password. Everything is super clear but I can't figure out the purpose of document.getElementById('theForm').submit();

 

As far as I know, it's a method that submits the form to the script referenced inside the forms html action tag eg. <form action="login.php"> (just in case ajax fails for whatever reason). But I can't find any information to validate this.

function validateForm() {
    'use strict';
    
    // Get references to the form elements:
    var email = document.getElementById('email');
    var password = document.getElementById('password');

    // Validate!
	if ( (email.value.length > 0) && (password.value.length > 0) ) {

	// Perform an Ajax request:
	var ajax = getXMLHttpRequestObject();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {

// Check the status code:
if ( (ajax.status >= 200 && ajax.status < 300) 
|| (ajax.status == 304) ) {

if (ajax.responseText == 'VALID') {
alert('You are now logged in!');
} else {
alert('The submitted values do not match those on file!');
}

} else {
document.getElementById('theForm').submit();
}
}

};
ajax.open('POST', 'resources/login.php', true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var data = 'email=' + encodeURIComponent(email.value) + '&password=' + encodeURIComponent(password.value);
ajax.send(data);	
	
        return false;

    } else {
        alert('Please complete the form!');
        return false;
    }
    
} // End of validateForm() function.

// Function called when the window has been loaded.
// Function needs to add an event listener to the form.
function init() {
    'use strict';
    
    // Confirm that document.getElementById() can be used:
    if (document && document.getElementById) {
        var loginForm = document.getElementById('loginForm');
        loginForm.onsubmit = validateForm;
    }

} // End of init() function.

// Assign an event listener to the window's load event:
window.onload = init;
Link to comment
Share on other sites

My bad (noob moment), I just realized that its a precaution for if the AJAX call fails; the form submission will still go through. But would we get the same effect if we used return true; instead of document.getElementById('theForm').submit();

Link to comment
Share on other sites

My bad (noob moment), I just realized that its a precaution for if the AJAX call fails; the form submission will still go through. But would we get the same effect if we used return true; instead of document.getElementById('theForm').submit();

 

Probably, but since I didn't write that code and don't know anything about the form or the actin page, I can't say that there is a good reason to do it that way or not.

Link to comment
Share on other sites

Since the form's action is login.php, I'm guessing return true; could replace document.getElementById('theForm').submit(); I dont know if I'm right on this one. If it helps, this is what the html looks like:

<body>
    <!-- login.html -->
    <form action="login.php" method="post" id="loginForm">
        <fieldset>
            <legend>Login</legend>
            <div><label for="email">Email Address</label><input type="email" name="email" id="email" required></div>
            <div><label for="password">Password</label><input type="password" name="password" id="password" required></div>
            <div><label for="submit"></label><input type="submit" value="Login →" id="submit"></div>
        </fieldset>
    </form>
    <script src="login.js"></script>
</body>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.