Jump to content


Photo

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

ajax javascript

Best Answer Psycho, 07 April 2014 - 11:21 AM

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.

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 spence911

spence911

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 07 April 2014 - 08:38 AM

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;


#2 Psycho

Psycho

    Advanced Member

  • Gurus
  • 10,778 posts
  • LocationCanada

Posted 07 April 2014 - 09:45 AM

Yes, the submit() method will submit a form. A simple Google search for "javascript submit" found that answer right off.


The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#3 spence911

spence911

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 07 April 2014 - 10:11 AM

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();



#4 Psycho

Psycho

    Advanced Member

  • Gurus
  • 10,778 posts
  • LocationCanada

Posted 07 April 2014 - 10:32 AM

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.


The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#5 spence911

spence911

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 07 April 2014 - 11:13 AM

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 &rarr;" id="submit"></div>
        </fieldset>
    </form>
    <script src="login.js"></script>
</body>


#6 Psycho

Psycho

    Advanced Member

  • Gurus
  • 10,778 posts
  • LocationCanada

Posted 07 April 2014 - 11:21 AM   Best Answer

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.


The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#7 spence911

spence911

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 07 April 2014 - 01:10 PM

Awesome. Thanks a lot.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com