I've the below data in html.
#Html.BeginForm("LoginDetails", "Home", FormMethod.Post){
<body onload="makeCalls()" style="background-image: url('../../ImageIcons/FaceLoginBG.jpg'); background-size: cover; visibility:hidden">
<div class="captureAndCompareWindowForLogin" style="display: block; margin-left: auto;margin-right: auto;float: none;">
<div class="centerTitle">
<h3 style="color:white">Welcome</h3>
</div>
<div class="errText" id="errText" value="errText" visibility:hidden">Invalid Username and Password</div>
<form name="loginForm" id="loginForm">
#Html.Label("Username") <input type="text" id="userid" name="userid"/><br /><br />
#Html.Label("Password") <input type="password" id="pswrd" name="pswrd"/><br /><br />
<input type="button" id="btnLogin" onclick="check()" value="Login" class="btn-block">
</form>
</div>
<script type="text/javascript">
function check() {
/* the following code checkes if user is given access */
var userNameFromForm = document.getElementById("userid").value;
var passwordFromForm = document.getElementById("pswrd").value;
var lower = userNameFromForm.toLowerCase();
if (userNameFromForm === "") {
alert("please enter your username");
}
if (passwordFromForm === "") {
alert("please enter your password");
}
//Display error message, reset the form and select the userid textbox
else {
console.log(document.getElementById("loginForm"));
document.getElementById("loginForm").submit();
}
}
</script>
</body>
}
when I click the button, without blank username and password, it is giving me the appropriate alert message, but, filled username and password and hit submit is giving me the below error.
LoginHome:142 Uncaught TypeError: Cannot read property 'submit' of null.
please let me know where am I going wrong and how can I fix it.
Thanks
In your case, problem is that you wrapping form inside another form. Please use it like that:
<body onload="makeCalls()" style="background-image: url('../../ImageIcons/FaceLoginBG.jpg'); background-size: cover; visibility:hidden">
<div class="captureAndCompareWindowForLogin" style="display: block; margin-left: auto;margin-right: auto;float: none;">
<div class="centerTitle">
<h3 style="color:white">Welcome</h3>
</div>
<div class="errText" id="errText" value="errText" visibility:hidden">Invalid Username and Password</div>
#using (Html.BeginForm("LoginDetails", "Home", FormMethod.Post, new { id = "loginForm" }))
{
#Html.Label("Username") <input type="text" id="userid" name="userid" /><br /><br />
#Html.Label("Password") <input type="password" id="pswrd" name="pswrd" /><br /><br />
<input type="button" id="btnLogin" onclick="check()" value="Login" class="btn-block">
}
</div>
<script type="text/javascript">
function check() {
/* the following code checkes if user is given access */
var userNameFromForm = document.getElementById("userid").value;
var passwordFromForm = document.getElementById("pswrd").value;
var lower = userNameFromForm.toLowerCase();
if (userNameFromForm === "") {
alert("please enter your username");
}
if (passwordFromForm === "") {
alert("please enter your password");
}
//Display error message, reset the form and select the userid textbox
else {
console.log(document.getElementById("loginForm"));
document.getElementById("loginForm").submit();
}
}
</script>
</body>
Your code will submit form to Home/LoginDetails url. Your method in HomeController should be like this:
public ActionResult LoginDetails(string userid, string pswrd)
{
//do something
}
Get rid of the following:
#Html.BeginForm("LoginDetails", "Home", FormMethod.Post)
Or
You can use following instead, after deleting the 'LoginDetails' forms tag.
document.getElementById("LoginDetails").submit();
Related
I'm trying to have my form send me an email every time the "Submit Query" button is clicked. The form is validated and brings the user to a confirmation page after the button is clicked, but I get no email.
Form code:
$(document).ready(function() {
$('#sumbit').click(function() {
$('#contactform').attr('action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio' +
$('#name').val() + '&body=' + $('#email').val() + '&body=' + $('#comments').val() + '&body=');
$('#contactform').submit();
});
});
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
</head>
<body>
<form onSubmit="MM_validateForm('name','','R','comments','','R');return document.MM_returnValue" id="contactform">
<label for="name">Full Name:
<input name="name" type="text" id="name" required="required"></label><br /><br />
<label for="email">Email:
<input name="email" type="email" id="email" required="required"></label><br /><br />
<label for="comments">Comments:
<textarea name="comments" id="comments" required></textarea></label><br /><br />
<input name="submit" type="submit" id="submit" formaction="confirmation.html" formmethod="POST" formtarget="_self" action="mailto:chinochinako#gmail.com">
</form>
<script src="js/form.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); // To empty previous error/success message.
// Checking for blank fields.
if (name == '' || email == '' || contact == '') {
alert("Please Fill Required Fields");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("contact_form.php", {
name1: name,
email1: email,
message1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
</script>
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:rafaeljunqueira.rs#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>
Welcome to Stack Overlfow.
I suspect you are missing the .preventDefault() to prevent the click event from proceeding.
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$('#contactform').attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
$('#contactform').submit();
});
});
Mind you, if the user bypasses clicking the button, and hits Enter, this code will not execute. You may want to consider moving your verification code into the submit event in jQuery, and move this code in there too.
I noticed a potential typo: $('#sumbit').click(function() {
Did you mean: $('#submit').click(function() {
Update
According to the HTML specifications, the action field of the form should be a correctly formed HTTP URL. So ‘mailto:’ is not valid for the action field.
Also, this will not "send" the email. It will only ask the default email program to compose a message that the user can send. If you want the data submitted to be sent via SMTP, this must be done by a server-side script (ASP/ASP.NET, PHP, ColdFusion, Perl, Python...) via a form handler.
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>
I'm trying to automatically login a user. The JavaScript code below here actually does that but only when I remove the 'login/submit' div (), and then stops working when I include the 'div'. I can't remove this 'div' as that is my submit button. I don't know how to get around this problem, any help will be appreciated.
HTML;
<body>
<form name="EventConfirmRedirection" class="Form" method="post" action="index.php" id="myForm" data-ajax="false">
<div class="user_login3"><input style="text-transform:lowercase" type="text" name="username" id="username" placeholder="username"></div>
<div class="user_login3"><input type="password" name="password" id="password" placeholder="password"></div>
<div style="margin-left:5%; width:45%; font-size:5px;">
<input data-theme="c" type="checkbox" id="rememberMe" name="rememberMe"/>
<label for="rememberMe"><span style="font-size:12px">remember me</span></label>
</div>
<div style="margin-left:5%; color:#FF0000; font-weight:bold" id="error"></div>
<div class="login"><input type="submit" value="LOGIN" name="submit" data-theme="e" id="submit"></div>
</form>
</body>
JAVASCRIPT;
$(document).ready(function() {
"use strict";
if (window.localStorage.checkBoxValidation && window.localStorage.checkBoxValidation !== '') {
$('#rememberMe').attr('checked', 'checked');
$('#username').val(window.localStorage.userName);
$('#password').val(window.localStorage.passWord);
document.EventConfirmRedirection.submit();
} else {
$('#rememberMe').removeAttr('checked');
$('#username').val('');
$('#password').val('');
}
$('#rememberMe').click(function() {
if ($('#rememberMe').is(':checked')) {
// save username and password
window.localStorage.userName = $('#username').val();
window.localStorage.passWord = $('#password').val();
window.localStorage.checkBoxValidation = $('#rememberMe').val();
} else {
window.localStorage.userName = '';
window.localStorage.passWord = '';
window.localStorage.checkBoxValidation = '';
}
});
});
AJAX
$(document).ready(function() {
"use strict";
$("#submit").click( function(e) {
e.preventDefault();
if( $("#username").val() === "" || $("#password").val() === "" )
{
$("div#error").html("Both username and password are required");
} else {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(data) {
$("div#error").html(data);
});
$("#myForm").submit( function() {
return false;
});
}
});
});
"submit is not a function" means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work. Any of the form element name and id should not be submit, otherwise form.submit will refer to that element rather than submit function.
When you name the button submit, you override the submit() function on the form.
So changing the div/submit like this will work for you
<div class="login"><input type="submit" value="LOGIN" name="btnSubmit" data-theme="e" id="btnSubmit"></div>
And if you don't want to change the button name then you might call the submit function natively aswell, which looks a bit dirty..
document.EventConfirmRedirection.prototype.submit.call(document.EventConfirmRedirection);
//or
document.EventConfirmRedirection.prototype.submit.call($('#myForm')[0]);
Here is the following code, I am learning Javascript on my own and wanted to know how I could validate my code to make the textboxes say something like "please enter a value" or "please enter a valid Username or password.
I've attempted, but this is as far as online searching that I have done for it.
<head>
<script type = 'text/javascript'>
function nullcheck()
{
if(document.getElementById("").value==="")
{
alert("Please enter value.");
return false;
}
}
</script>
<title>Login Form</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<section class="container">
<div class="login">
<h1>Login</h1>
<form method="post" action="index.xhtml">
<p><input type="text" name="login" value="" id="Username or Email" /></p>
<p><input type="password" name="password" value="" id="Password"/></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me"/>
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login" onchange="nullcheck()"/><button type="reset" value="Clear">Clear</button></p>
</form>
</div>
</section>
</body>
</htm
You can validate items one at a time, but a more general solution is to write a validate() function. Make your form element look like this:
<form method="post" action="index.xhtml" onsubmit="return validate();">
If the validate() function returns false, the form will not be submitted. It is up to the validate() function to issue prompts, etc.
Sample function:
function validate() {
var error = false,
errmsg="";
if(document.getElementById("username").value==="") {
error = true;
errmsg = "User name may not be blank.\n";
}
if(document.getElementById("password").value==="") {
error = true;
errmsg = "Password may not be blank.\n";
}
if (error) {
alert(errmsg);
return false;
} else {
return true;
}
} // validate
Can I have yout help pleas there,I make a validation field for a popup form :
function prepareEventHandlers() {
document.getElementById("contact").onsubmit = function () {
if (document.getElementById("message").value == '') {
document.getElementById("errorMessage").innerHTML = 'the field should not be empty!';
return false;
}
else {
document.getElementById("errorMessage").innerHTML = '';
return true;
}
};
}
window.onload = function () {
prepareEventHandlers();
}
then the html code :
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-body">
<form class="contact" name="contact" >
<label class="label" for="message">Enter a Message</label><br>
<textarea id="message" name="message" class="input-xlarge"></textarea>
<p><span id="errorMessage"></span></p>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="btnsubmit">
No!
</div>
and I got this error :
TypeError: document.getElementById(...) is null document.getElementById("contact").onsubmit = function () {
Any Idea?
Edit:
OK I add id="contact" to my form so the error is gone but now the popup form is displyaed but when I try to click send with empty or not empty value nothing is happened...
just close </form> after <input class="btn btn-success" type="submit" value="Send!" id="btnsubmit">
and change html form id to contact
I am looking to make a simple form validation error message that displays under the username field.
I cannot seem to figure it out.
<form name ="myform" onsubmit="validation()">
Username: <input type ="text" name="username" /><br />
<input type ="submit" value="submit" />
<div id ="errors">
</div>
</form>
Here is my validation script:
function validation(){
if(document.myform.username.value == ""){ //checking if the form is empty
document.getElementById('errors').innerHTML="*Please enter a username*";
//displaying a message if the form is empty
}
You need to stop the submission if an error occured:
HTML
<form name ="myform" onsubmit="return validation();">
JS
if (document.myform.username.value == "") {
document.getElementById('errors').innerHTML="*Please enter a username*";
return false;
}
JavaScript
<script language="javascript">
var flag=0;
function username()
{
user=loginform.username.value;
if(user=="")
{
document.getElementById("error0").innerHTML="Enter UserID";
flag=1;
}
}
function password()
{
pass=loginform.password.value;
if(pass=="")
{
document.getElementById("error1").innerHTML="Enter password";
flag=1;
}
}
function check(form)
{
flag=0;
username();
password();
if(flag==1)
return false;
else
return true;
}
</script>
HTML
<form name="loginform" action="Login" method="post" class="form-signin" onSubmit="return check(this)">
<div id="error0"></div>
<input type="text" id="inputEmail" name="username" placeholder="UserID" onBlur="username()">
controls">
<div id="error1"></div>
<input type="password" id="inputPassword" name="password" placeholder="Password" onBlur="password()" onclick="make_blank()">
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
I would strongly suggest you start using jQuery. Your code would look like:
$(function() {
$('form[name="myform"]').submit(function(e) {
var username = $('form[name="myform"] input[name="username"]').val();
if ( username == '') {
e.preventDefault();
$('#errors').text('*Please enter a username*');
}
});
});