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>
Related
In the given code , I am trying to print the message but after taking input its not printing any message.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
}
</script>
</body>
</html>
Pressing the submit button will refresh the page.
event.preventDefault(); use this keyword.
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
event.preventDefault();
}
</script>
It was working, but after submitting form, all of content disappeared. You need to add event.preventDefault(); to onsubmit attribute of form:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="event.preventDefault(); return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
}
</script>
</body>
</html>
event.preventDefault()
It is working, it's just that when you click that submit button the page reloads. I tried it out, and you can fix it by adding e.preventDefault(); to your function, and put (e) as the arg in the function, like so:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="event.preventDefault(); return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password: "+y;
}
</script>
</body>
</html>
Your code works, but the message will disappear because the form is successfully submitted. If you want it to stay on the screen, just return false from the Ak() function:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
return false;
}
</script>
</body>
</html>
When I'm running this code it is not showing me the message which I want to display (i.e: res).Suppose I'm giving an input "$code$".Can anyone just help me out?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form>
<input type="text" name="a" id="a">
<button onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var res=msg.replace("$code$","1101");
document.getElementById("a").innerHTML=res;//this is to print res.
}
</script>
</body>
</html>
Two elements can't have the same ID. Further, an input element's value can not be obtained using the innerHTML property. Also, on clicking the submit button, the page will reload since the form get's submitted. To prevent that, call the function parse in an onsubmit on the <form> tag, and return false from the function.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form onsubmit="return parse();">
<input type="text" name="a" id="a">
<button type="submit">submit</button>
<p id="b"></p>
</form>
<script>
function parse(){
var msg = document.getElementById("a").value;
document.getElementById("b").innerHTML = msg;
return false;
}
</script>
</body>
</html>
Check this:
<form>
<input type="text" name="a" class="input_field" id="a">
<button type="button" onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var form = document.getElementsByTagName("form")[0]
msg = form.getElementsByClassName("input_field")[0].value;//this is to print res.
}
</script>
I added type="button" to the button to prevent the form from reloading the page
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>
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
I have two html pages named order.html,check.html and test.js(included in both html files)
When i click on submit button in order.html,amount field value from order.html should get updated/populate into cost field of check.html.
Below is the code i am using but its not working,can someone let me know whats wrong??
order.html
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="order" action="check.html" method="get">
name:<input type ="text" id="amount" name="amount">
<input type="submit" value="finish" onclick="cost()" >
</form>
</body>
</html>
check.html
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="check" action="confirm.html" method="get">
<input type="text" name="cost" id="cost" readonly="readonly">
</form>
</body>
</html>
test.js
function cost(){
var amount= $("#amount").val();
jQuery.load("check.html",function(){
$("#cost").html(amount);
});
}
Your order.html input type submit should be input type button.
Change your test.js to
function cost(){
var amount= $("#amount").val();
$('body').load("check.html",function(){
$("#cost").val(amount);
});
}
And input type="button"
Try this:
order.html:
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="main_div">
<form name="order" action="check.html" method="get">
name:<input type="text" id="amount" name="amount"> <input
type="button" value="finish" id="submit_btn">
</form>
</div>
</body>
</html>
Jquery:
$(document).ready(function() {
$('#submit_btn').click(function() {
var amount = $("#amount").val();
$('#main_div').load("check.html", function() {
$('#main_div').find("#cost").val(amount);
});
});
});