Form onreset Event after the form reset - javascript

Here's a sample form:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>
<body>
<form onreset="myFunction();">
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>
</html>
When I click the reset button, the form onreset event fires first, i.e. the alert message appears before resetting the form fields. How can it happen after the form fields rest?
I also tried the following to no avail:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>
<body>
<form>
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset" onclick="myFunction();">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>
</html>

Try it
function myFunction() {
setTimeout(function () {
alert("The form was reset!");}, 100);
}

Related

var x=document.getElementById("mytext").value;Why i change the value to innerHTMl or innerText,it do not work?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="mytext">
<input type="button" onclick="myfuction()" value="click">
<script type="text/javascript">
//the problem is here,why the value is ok?but innerText don't
function myfuction() {
var a = document.getElementById("[mytext][1]").value;
alert(a);
}
</script>
</body>
</html>
I want to enter text in the input box, and I will be prompted by clicking the button.
getElementById works on the ID attribute of the element.
function myfuction() {
var a = document.getElementById("mytext").value;
alert(a);
}
<input type="text" id="mytext">
<input type="button" onclick="myfuction()" value="click">

my button in very simply web site won't log in console

i create a very simple website with javascript and html and all i want to do is log input value to the console and my console is printing something and immediately delete it
html:
const alertFunction = () => {
console.log(document.getElementsByClassName("input"))
}
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet" type="text/css">
<script src="./script.js"></script>
<title>Button With Alert</title>
</head>
<body>
<form>
<input placeholder="Please type your name" class="input" type="text">
<br />
<button class="button" onclick="alertFunction()">Alert Your Name</button>
</form>
</body>
</html>
You have few issues in you code:
Since the default type of button is submit, on clicking it from submission is happening. Thus everything disappears. To prevent the form submission you can either use event.preventDefault() inside the event handler function or specify the type="button" in the element.
Document.getElementsByClassName() returns an array-like object of all child elements which have all of the given class names. You have to use proper index to get the specific element. Finally get the value from the input using value property.
const alertFunction = () => {
console.log(document.getElementsByClassName("input")[0].value)
}
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet" type="text/css">
<script src="./script.js"></script>
<title>Button With Alert</title>
</head>
<body>
<form>
<input placeholder="Please type your name" class="input" type="text">
<br />
<button type="button" class="button" onclick="alertFunction()">Alert Your Name</button>
</form>
</body>
</html>
getElementsByClassName returns an NodeList object. Access the element and get value using .value.
Also use input type=button instead of button. Because button click will perform submit event which is not required
Refer- https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
const alertFunction = function() {
console.log(document.getElementsByClassName("input")[0].value)
}
<!DOCTYPE html>
<html>
<body>
<form>
<input placeholder="Please type your name" class="input" type="text">
<br />
<input type="button" class="button" onclick="alertFunction()" value="Alert Your Name">
</form>
</body>
</html>
You need to prevent the default event of form submit
const alertFunction = (event) => {
console.log(document.getElementsByClassName("input")[0].value);
event.preventDefault();
}
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet" type="text/css">
<script src="./script.js"></script>
<title>Button With Alert</title>
</head>
<body>
<form>
<input placeholder="Please type your name" class="input" type="text">
<br />
<button class="button" onclick="alertFunction(event)">Alert Your Name</button>
</form>
</body>
</html>

TypeError: document.getElementById(...).submit is not a function

I'm having an error that I can't find the solution and I don't have to use jQuery; I don't have any div with submit as name
My code is
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.getElementById('web').submit();
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div id="web" onclick="formSubmit()">click</div>
</body>
</html>
on chrom I'm getting this error
Uncaught TypeError: document.querySelector(...).submit is not a
function
at formSubmit (test2.html:8)
at HTMLDivElement.onclick (test2.html:19)
on Firefox the same error
TypeError: document.getElementById(...).submit is not a function[Learn
More]
You need to submit form not the div
Make it
document.getElementById('g_form').submit();
You mistyped the id of your element. It should be g_form.
function formSubmit()
{
document.getElementById('g_form').submit();
}
You using id of Your div but for submitting the form You need to specify the id of Your Form element
So just change the
function formSubmit()
{
document.getElementById('g_form').submit(); // Change the Id here
}
Hopes It will help
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.getElementById('g_form').submit(); // Change the Id here
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div id="web" onclick="formSubmit()">click</div>
</body>
</html>
Here is your solution.
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.forms['g_form'].submit();
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" name="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div class="button1" onClick="formSubmit();">Click</div>
</body>
</html>

Use a javascript variable in JSP using jQuery

I have a JSP page with a form. I want to submit and return the input to the JSP page. I can't get it to work.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ejemplo</title>
<script type="text/JavaScript" src="Scripts/jquery-1.9.1.js"></script>
<script>
function enviarDatos() {
form = document.getElementById("datos");
form.datoIntroducido.value = "holaaaaaa";
form.submit();
<%System.out.println(request.getParameter("datoIntroducido"));%>
}
</script>
</head>
<body>
<h3>Ejemplo</h3>
<form name="datos" id="datos" action="mypage" method="post" enctype="multipart/form-data">
Escribe aquí: </br>
<textarea cols=50 rows=10 id="texto"></textarea><br />
<input type="hidden" name="datoIntroducido" id="datoIntroducido"/>
<input type="submit" value="Enviar datos" class="btn-primary" onclick="enviarDatos();"/>
</form>
</div>
</body>
</html>
It prints "null" when executing the first time but it doesnt write anything when pressing the button

Why does getting my form with document.getElementByID stop alert() from firing?

I'm trying to alert the values of the form elements but this isn't functioning even at its simplest: getting the elements of the form then alerting a string.
The alert fires when it's by itself, but not when I put the form's data in the variable. Why?
I'm sure there's probably a very simple mistake in here somewhere, but I'm stumped.
<!DOCTYPE html>
<html>
<head>
<!-- ISTE240 Exercise 5b -->
<meta charset=utf-8 />
<title>Get elements from a form</title>
<script>
function getFormValues() {
// function to send first and last names to an 'alert' message.
alert("test");
var form = document.getElementById(“regForm”).elements;
}
</script>
</head>
<body>
<p>JavaScript Exercise 5b </p>
<form id="regForm" onsubmit="getFormValues()">
First name: <input type="text" name="fname" value="Boo"><br>
Last name: <input type="text" name="lname" value="Radley"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
By default form tag will try to submit form values. You must prevent default behavior, demo below
document.querySelector('#regForm').onsubmit = function(e){
e.preventDefault();
alert('a');
var form = document.getElementById("regForm").elements; //<-- wrong syntax, must be "
console.log(form);
}
<!DOCTYPE html>
<html>
<head>
<!-- ISTE240 Exercise 5b -->
<meta charset=utf-8 />
<title>Get elements from a form</title>
</head>
<body>
<p>JavaScript Exercise 5b</p>
<form id="regForm">
First name:
<input type="text" name="fname" value="Boo">
<br>Last name:
<input type="text" name="lname" value="Radley">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Categories