The onSubmit tag does not seem to be working. I am trying to call the submit() javascript function when the submit button is clicked on the webpage. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="login.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.serializeJSON.min.js"></script>
</head>
<body>
<script type="text/javascript">
function submit() {
.......
}
</script>
<div class="login-container">
<div class="title">Login Form</div>
<div class="form-fields">
<form name="login-form" id="login-form" onSubmit="return submit()">
<input type="text" name="username" id="username" placeholder="Username" required></input>
<input type="password" name="password" id="password" placeholder="Password" required></input>
<input type="submit" value="Log in" id="submit-button"></input>
</form>
</div>
</div>
</body>
There is a naming conflict.
The form has a native built in function which can be seen with
<form id="x" onsubmit="console.log(submit);"><input type="submit"/></form>
When you look at the console you will see
function submit() { [native code] }
So when you call submit() you are calling that native submit function aka document.getElementById("login-form").submit(); and not yours. To get around it, change the name.
Change the function name to something other than submit.
function xSubmit(){
}
and
<form name="login-form" id="login-form" onSubmit="return xSubmit()">
You can not use "submit" as the function name. Submit is a JavaScript keyword. Simply rename your function to something else.
function submitForm() {
console.log('I work now');
}
<form name="login-form" id="login-form" onSubmit="return submitForm()">
It should be a lowercase s.
<form name="login-form" id="login-form" onsubmit="return submit()">
check out http://www.w3schools.com/jsref/event_onsubmit.asp for more info.
EDIT:
Sorry, I did some testing and found out that it was the name submit.
Take a look at this fiddle http://jsfiddle.net/9z95chze/.
You also shouldn't need to say return
Related
Code with bootstrap:
function ValidateForm() {
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if (fname == "") {
document.getElementById("validation").innerHTML = requiredValue;;
return false;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php" onsubmit="return ValidateForm()" method="post">
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name" data-type="alphanum" />
<button type="submit" class="btn btn-info">Save</button>
</div>
</div>
</div>
</fieldset>
</form>
Code Without Bootstrap:
function ValidateForm() {
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if (fname == "") {
document.getElementById("validation").innerHTML = requiredValue;
return false;
}
}
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name" />
<button type="submit">Save</button>
</form>
why ValidateForm() does not work in without a bootstrap code? I am simply accessing the validation id but it does not work.But strangely it works in with bootstrap code. i am simply making a script for a user in which this value is required should be displayed. Now it does not make sense to me why it is not working with bootstrap?
NOTE: In my environment all these code work.
As far as I understand your code, these are in separate files. The first form have the following code:
<form action="/action_page.php" onsubmit="return ValidateForm()" method="post">
The second one has this:
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
Obviously "action_page.php" is not being loaded anymore. Are you loading the script from a different file? Where is this file located and how do you load the actual script on your page?
The following code works as intended, when put in to a single file saved as HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<script>
function ValidateForm(){
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if(fname == ""){
document.getElementById("validation").innerHTML= requiredValue;
return false;
}
}
</script>
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name"/>
<button type="submit">Save</button>
</form>
</body>
</html>
form.html
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br/><br/>
<input type="submit" />
</form>
</body>
</html>
Output: undefined
After typing my name in input box it is showing undefined.
The Problem is on your input. you should change t he name=="name" to name="name". Then change your validate function to us getElementsByName. See the code below:
<html>
<head>
<script>
function validate(){
var name=document.getElementsByName('name')[0].value;
document.write(name);
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name"><br><br>
<input type="submit" />
</form>
</body>
</html>
dont make use of name attribute it old way of W3C standard, from long time they are suggesting make use of id attribute.
you code needs to be like this
<input type="text" id="txtname"/><br><br>
and javascript like
var name=document.getElementById("txtname").value;
You just have to fix your name=="name". In HTML we use = to assign attribute values/
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br><br>
<input type="submit" />
</form>
</body>
</html>
the validate function doesn't return anything as would usually be the case for this type of event hander ~ it will instead simply write the name ~ is that the desired result?
<html>
<head>
<title>form validation</title>
<script src="validations.js"></script>
<script>
function validate(e){
e.preventDefault();
var name=e.target.querySelector('input[ name="name" ]').value;
document.write( name );
return true;
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate(event)">
Enter name: <input type="text" name="name"/><br><br>
<input type="submit" />
</form>
</body>
</html>
I have a form at the top of my html page which I want to have disappear after I submit the form. My code (below), while it temporarily hides the form, insists on the forming then becoming visible again. Any help would be appreciated.
Thanks,
Owen Walker
<!DOCTYPE html>
<html>
<body>
<form id="form" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<div id="first_div" style="visibility:hidden">Second</div>
<script>
function myFunction() {
alert("The form was submitted");
document.getElementById("form" ).style.display = "none";
document.getElementById("first_div" ).style.visibility = "visible";
alert("after");
}
</script>
</body>
</html>
You're not doing anything to prevent your form from being submitted and reloading the page. Change the form line to:
<form id="form" onsubmit="return myFunction()">
and after the alert in your function add:
return false;
I would suggest you to use JQuery as it is a powerful tool for doing this type of stuffs without hassle...
well you can do it in this way
<!DOCTYPE html>
<html>
<body>
<form id="form" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" id="submit" value="Submit">
</form>
<div id="first_div" style="visibility:hidden">Second</div>
<script>
// using JQuery
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
$("#form").submit();
$("#form").hide();
alert("Your form was successfully submitted");
});
});
</script>
</body>
</html>
`
note the use of preventDefault() to preventing it from submitting the form when you click submit.
My function error() is not working on calling from php code.
so Kindly help me to resolve this problem. fucntion works properly when called outside the php code.but no output shown when called insisde the php code.
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="css/design.css">
<script type="text/JavaScript">
function error(){
document.getElementById("wrong-attempt").innerHTML="Wrong Username Or Password";
}
</script>
<?php
if(isset($_POST['submit'])){
echo '<script> error(); </script>';
}
?>
</head>
<body background="pics/background.jpg">
<div class="wrapper">
<center>
<div class="form-wrapper">
<form action="index.php" method="POST">
<div>
</div>
<h1>User Login</h1>
<div>
<img src="pics/login.png" width="100" height="100"/>
</div>
<div>
<input name="ID" placeholder=" Username" type="text" required="true"/></br>
<input name="pass" placeholder=" Password" type="password" required="true"></br>
<input type="image" src="pics/loginb.png" name="submit" value="Login" width="100"/>
</div>
</form>
<div id="wrong-attempt">
</div>
</div>
<center/>
</div>
</body>'
</html>
Put that PHP block after the wrong-attempt div element. You are calling the error() function which manipulates that element before it is even created in the browser.
As it has also been suggested in the comments, instead of complicating with an unnecessary JavaScript function call, just place that PHP if into the <div id="wrong-attempt"></div>element, and simply print out the message, or the whole element, to not even send this div if there is no error.
And put your JavaScript into the footer, just before the closing </body> tag, as also suggested in comments.
Hey guys taking a stab at my first Javascript validation but getting stuck pretty early on. I am calling a JS function from onkeyup="" but I receive the error:
Object is not a function
Code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h3> My Sign Up Form</h3>
<form name="signup">
<label>First Name<input type="text" name="fname" onkeyup="fname()"/></label><div id="fnameVal"></div><br>
<label>Last Name<input type="text" name="lastname" onkeyup="fourchars();"/></label><div id="lnameVal"></div><br>
<!--<label>Email<input type="text" name="email"/></label><div id="email"></div><br>
<label>Password<input type="password" name="password"/><div id="password"></div></label><br>
<label>ConfirmPassword<input type="password" name="confirmpassword"/><div id="confirmpassword"></div></label><br>-->
<label><input type="submit" value="Submit"/></label>
</form>
</body>
<script>
function fname(){
alert('jjjj');
}
</script>
</html>
you can't have your function name same as your control name. i.e. fname & fname()
<label>First Name<input type="text" name="fname" onkeyup="validateFname()"/></label><div id="fname"></div>
OK, Try something like this.
replace your onkeyup to this. I know it is the same code but sometimes it works when you relace you code by the same code form an other site. BTW it works fine if I test is on a site.
onkeyup="fname()"
Raname your function to be different from the input name.
e.g.
<script>
function valname(){
alert('jjjj');
}
</script>
</head>
<body>
<h3> My Sign Up Form</h3>
<form name="signup">
<label>First Name<input type="text" name="fname" onkeyup="valname()"/></label><div id="fnameVal"></div><br>
It seems as fname is a reference to your element in your form. Try changing the name of the function or the name of element.
function fnameFunc() {
alert('jjjj');
}
And the HTML
<input type="text" name="fname" onkeyup="fnameFunc()"/>
You can use jquery on keyup
$(document).ready(function() {
$('body').on("keyup", "input[name=fname]", function() {
alert($(this).val());
// do your stuff
});
});
JSFIDDLE DEMO