I have this code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="myForm" action="/action_page.php" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
I don't want user to submit if field is not filled
I got you
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
check this :
let form = document.forms['myForm'];
let input = form.querySelector('input[name="fname"]');
form.addEventListner('submit',(e) => {
if(!input.length){
e.preventDefault():
}
})
You can use the Html5 required attribute directly in the input field, so your snippet become:
<form name="myForm" action="/action_page.php" method="post">
Name: <input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
source: https://www.w3schools.com/TAgs/att_input_required.asp
Related
I'm pretty new to JavaScript and am creating a simple page to output the form values. But there's seem to be a problem that it is not showing.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1" onsubmit="form()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
function form() {
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
}
</script>
</body>
</html>
I can't seem to find any problems, the console was fine with the code.
You have to stop the form from submitting.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1" onsubmit="return form()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
function form() {
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
return false;
}
</script>
</body>
</html>
Use an event listener to handle the submit and preventDefault() for stopping the submission. Following code is tested and working.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
document.getElementById("form1").addEventListener("submit", form);
function form(e) {
e.preventDefault();
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
}
</script>
</body>
</html>
<script src="script.js"></script>
</body>
</html>
This is the code
<html>
<head>
<script>
function test() {
return false;
}
</script>
</head>
<body>
<form method="post" action="../test.php">
<input type="submit" onsubmit="return test()">
</form>
</body>
</html>
how is the form still submitting, it makes no sense to me??
You need to stop form submission, when user submits it by clicking the submit button in the form.
Change onsubmit of the submit button to onclick
<input type = "submit" onsubmit= "return test()">
Should be
<input type="submit" onclick="return test()">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^ -->
If you want to use onsubmit, you can use it on form element.
<form method="post" action="../test.php" onsubmit="return test()">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ -->
<input type="submit" />
</form>
<html>
<head>
<script>
function test(e) {
e.preventDefault();
return false;
}
</script>
</head>
<body>
<form method="post" action="../test.php" onsubmit="return test(event);">
<input type="submit">
</form>
</body>
Quick question. I am starting learn on local storage HTML5. How can I get value from a form and display that value on another HTML form page?
For example, I have two forms here.
If I fill on form 1 and click submit button, and the value will display on form 2 in readable only.
I tried below:
HTML Form 1:
<html>
<head>
<title>Save Value</title>
<script type="text/javascript">
function saveVal() {
var inputFirst = document.getElementById("name").value;
localStorage.setItem("name", inputFirst);
inputFirst = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="display.html" method="get">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" />
</label>
<input type="submit" value="submit" onclick="saveVal()"/>
</form>
</body>
</html>
HTML Form 2:
<html>
<head>
<title>Display</title>
<script type="text/javascript">
function result() {
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
}
</script>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
</form>
</body>
</html>
In display.html you didn't call function result(),
try this,
<html>
<head>
<title>Display</title>
</head>
<body>
<form action="#">
<label>
First Name:
<input name="name" size="20" maxlength="25" type="text" id="name" readonly="readonly" />
</label>
<script type="text/javascript">
var storedVal = document.getElementById("name");
storedVal.value = localStorage.getItem("name");
</script>
</form>
</body>
</html>
I'm trying to validate a form I'm creating and can't seem to understand how this works. I'm trying to make sure the field isn't empty or contains no white-spaces I have validated it server side but not client side.
Could someone please show me the code like below to validate against being empty or having no white-spaces?
I see these below and this is what I thought they did:
x===null // means if field is empty
x==="" // on trying this means if the field is empty
x===" " // and this checks if there is 1 white space
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x===null || x===""|| x===" ") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
You can do this using javascript trim() function.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x.trim()==null || x.trim()==""|| x===" ") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
defined the script in the head of my html file but still doesn't function is it because the action for my form leads to a php file?
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["food_name"].value;
if (x==null || x=="")
{
alert("Food name must be filled out");
return false;
}
</script>
<title> my title is going here </title>
</head>
<body>
<form name="myForm" action="http://xxxxxxxxx/~xxxxxxxx/file/phpfile.php" method="post" onsubmit="validateForm()">
<b>foodName:</b> <input type="text" name="food_name"><br>
<b>Food Type:</b> <input type="text" name="food_type"><br>
<b>Total:</b> <input type="text" name="total"><br>
<b>Available:</b> <input type="text" name="available"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Fix the missing curly braces } for the validateForm function and update onsubmit to this
onsubmit="return validateForm()"
other wise it will submit the form even if validation is failed
check http://jsfiddle.net/Thu69/
you have missing brace in your validateForm function