spence911 Posted April 7, 2014 Share Posted April 7, 2014 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; Quote Link to comment https://forums.phpfreaks.com/topic/287583-what-does-documentgetelementbyidtheformsubmit-do/ Share on other sites More sharing options...
Psycho Posted April 7, 2014 Share Posted April 7, 2014 Yes, the submit() method will submit a form. A simple Google search for "javascript submit" found that answer right off. Quote Link to comment https://forums.phpfreaks.com/topic/287583-what-does-documentgetelementbyidtheformsubmit-do/#findComment-1475257 Share on other sites More sharing options...
spence911 Posted April 7, 2014 Author Share Posted April 7, 2014 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(); Quote Link to comment https://forums.phpfreaks.com/topic/287583-what-does-documentgetelementbyidtheformsubmit-do/#findComment-1475265 Share on other sites More sharing options...
Psycho Posted April 7, 2014 Share Posted April 7, 2014 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. Quote Link to comment https://forums.phpfreaks.com/topic/287583-what-does-documentgetelementbyidtheformsubmit-do/#findComment-1475271 Share on other sites More sharing options...
spence911 Posted April 7, 2014 Author Share Posted April 7, 2014 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> Quote Link to comment https://forums.phpfreaks.com/topic/287583-what-does-documentgetelementbyidtheformsubmit-do/#findComment-1475282 Share on other sites More sharing options...
Solution Psycho Posted April 7, 2014 Solution Share Posted April 7, 2014 return true should let the form POST to the 'action' parameter. However, if the JS modified anything in the form, then that would potentially affect what was sent in the form data. Quote Link to comment https://forums.phpfreaks.com/topic/287583-what-does-documentgetelementbyidtheformsubmit-do/#findComment-1475287 Share on other sites More sharing options...
spence911 Posted April 7, 2014 Author Share Posted April 7, 2014 Awesome. Thanks a lot. Quote Link to comment https://forums.phpfreaks.com/topic/287583-what-does-documentgetelementbyidtheformsubmit-do/#findComment-1475303 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.