I'm building the weather app and want to submit the city name to the server using the Enter key.
I am getting the error
submit is not a funtion
I want to fix this and i want to know how can i send the value to the express server in order to use it in API calls.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Weather APP</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input id="City" placeholder="EnterCity" onclick="u()" action="/" method="post">
</body>
<script>
function u(){
document.getElementById("City").addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
var x = document.getElementById("City");
x.submit();
return false;
}
});
}
</script>
</html>
Try putting input inside a form tag, and submitting the form instead of the input tag
...
<body>
<form id="CityForm" onsubmit="u()" action="/" method="post">
<input id="City" placeholder="EnterCity" />
</form>
</body>
<script>
function u(){
document.getElementById("City").addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
var x = document.getElementById("CityForm");
x.submit();
return false;
}
});
}
</script>
...
You submit form's, not individual input elements. On your input element you can have an action like onChange which will run every time the input tag get's input, but the actual submission is handled by the form
Related
I have this html code where the index.html loads first. It has a text field and a submit button. When the submit button is clicked, it calls the validateForm() function. Suppose the text field is empty, it should alert that it is empty, if it isn't then a new html page would load (either in new tab or current one) which is supposed to be welcome.html
So my problem is, the welcome.html file isn't loading. I even changed the "welcome.html" in window.location.href = "welcome.html" to "https://www.google.com" . The page still wouldn't load. What's wrong and what am I missing here ?
Any help is appreciated.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<script src="/validateForm.js"></script>
</head>
<body>
<form method="get" onsubmit="return validateForm()">
Name: <input type="text" name="name" id="name">
<input type="submit" value="Submit">
</form>
</body>
</html>
validateForm.js
function validateForm() {
var name = document.getElementById("name");
var nameData = name.value;
if (nameData == "" || nameData == null) {
alert("Name must be filled!");
}
else {
window.location.href = "welcome.html";
}
}
welcome.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome :)</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
Use action attribute
You can use the action attribute on the form to forward to a URL on success:
<form method="get" action="welcome.html" onsubmit="return validateForm()">
Name: <input type="text" name="name" id="name">
<input type="submit" value="Submit">
</form>
Documentation: MDN - Form action attribute
return value of validateForm()
See this?
onsubmit="return validateForm()"
Your validateForm doesn't return anything.
It is convention that return false means "stop processing the form" and a true-ish value means continue, which in turn means the action attribute mentioned above leads to welcome.html as you wanted.
The modified function could be this:
function validateForm() {
var name = document.getElementById("name");
var nameData = name.value;
if (nameData == "" || nameData == null) {
alert("Name must be filled!");
return false;
}
return true;
}
Alternatively, give validateForm a first parameter named event and call event.preventDefault() instead of returning false.
Documentation: MDN - Form submit handling example
You need some changes in index.html file and validateForm.js file
index.html
<form method="get" onsubmit="return validate()" action="javascript::window.location.replace('welcome.html')">
...
</form>
and in validateForm.js
you need to return true or false
after validation function if true it redirects to welcome.html or if false nothing were heppened.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>placeholder</h1>
<form method="get">
<label for="word">enter word</label>
<input id="word" name="word" type="text" maxlength="15">
<input type="submit">
</form>
<script type="text/javascript">
let actualWord = document.getElementById('word');
if (actualWord === 'yes') {
document.querySelector('h1').innerHTML = "oh yeah";
} else {
document.querySelector('h1').innerHTML = "error";
}
</script>
</body>
</html>
Im very new to the world of coding and im hoping someone could help me with a "simple" test I was trying to perform.
I want this HTML code to replace the "Placeholder" text at the top of the screen with "oh Yeah" if the user types "yes" in the form.
Im hoping someone can tell me what im doing wrong or point me in the right direction.
https://github.com/Uken81/Form-test.git
1.You need to listen to form submit event and trigger a function
HTML
<form onsubmit="return handleSubmit()">...</form>
Javascript
function handleSubmit(evt) {
...
}
2.You get user's input value like this
document.getElementById('word').value
3.Also you need to prevent form from submitting, By returning false
Full Example
function handleSubmit(evt) {
let actualWord = document.getElementById('word').value;
if (actualWord === 'yes') {
document.querySelector('h1').innerHTML = "oh yeah";
}
return false;
}
<h1>placehold</h1>
<form onsubmit="return handleSubmit()">
<label for="word">enter word</label>
<input id="word" name="word" type="text" maxlength="15">
</form>
You can achieve that by adding click event listener to the <submit> button inside the form, and then perform the check on the text <input> and use .value attribute to get the <input> text value, note that I used [e.preventDefault()][3] to prevent the form from redirect, here is a working snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>placeholder</h1>
<form method="get">
<label for="word">enter word</label>
<input id="word" name="word" type="text" maxlength="15">
<input id="change-placeholder" type="submit">
</form>
<script type="text/javascript">
document.getElementById('change-placeholder').addEventListener('click', function(e){
e.preventDefault();
let actualWord = document.getElementById('word').value;
if (actualWord === 'yes') {
document.querySelector('h1').innerHTML = "oh yeah";
} else {
document.querySelector('h1').innerHTML = "error";
}
})
</script>
</body>
</html>
I want to validate my form, and have created a formValidation function with onsubmit, that calls a function from a js.js file. When I click submit, however, I get this error:
Here is the necessary form code:
<form action="send-email.php" id="callback" class="popup-form" method="post" onsubmit="return validateForm()">
// Form content
</form>
Here is the function code:
function validateForm() {
console.log("hellloooooo this is working");
// var captcha_response = grecaptcha.getResponse();
// if(captcha_response.length === 0)
// {
// // Captcha is not Passed
// console.log("not working");
// return false;
// }
// else
// {
// // Captcha is Passed
// console.log("working");
// return true;
// }
}
The script tag is within the body tag, so it should work.. where am I going wrong??
Please use input type='submit' in form. It will work in java script as well.
Add submit input in the form as below
<form action="send-email.php" id="callback" class="popup-form" method="post" onsubmit="return validateForm()"><input type="submit">
</form>
And in java script write your validation function as below
<script type="text/javascript">
function validateForm(){
console.log('ddd');
return false;
}
</script>
You should be sure that your script tag above your form tag
This seems to be working. Don't see any issue here
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
</head>
<body>
<script>
function validateForm() {
console.log("hellloooooo this is working");
}
</script>
<form id="callback" class="popup-form" method="post" onsubmit="return validateForm()">
// Form content
<input type="Submit">
</form>
</body>
</html>
what code or what can i add to my html. or js. file to make it submit the form when someone presses the enter keyboard? this my html file
<!DOCTYPE html>
<html>
<head>
<title>test Form</title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h3>Start Here</h3>
UserName: <input type="text" id="user"><br>
Master Code: <input type = "password" id = "pass"><br><br>
<input type="submit" value="Submit" onclick= "check()">
</body>
</html>
and this is my external javascript file
function check()
{
var t = document.getElementById("user").value;
var m = document.getElementById("pass").value;
if (t === "username")
{
if(m === "password")
{
document.write("SUCCESS!")
}
else if (m != "tete")
{
document.write("wrong password");
}
}
else {
document.write("ERROR!")
}
}
There are a few things that you need to add resp. change in your code, in order to work as expected:
wrap your fields and the submit button into a form
cancel the form submition event
don't write directly to the document, but use an output panel, a div for example. This way you could even build a very simple log panel.
The code with the changes from above:
<!DOCTYPE html>
<html>
<head>
<title>test Form</title>
<script type="text/javascript">
function check()
{
var t = document.getElementById("user").value;
var m = document.getElementById("pass").value;
// get the "output" panel
var o = document.getElementById("output");
if (t === "username")
{
if(m === "password")
{
// add text to the div as simple log
o.innerHTML += "SUCCESS!<br />";
}
else if (m != "tete")
{
o.innerHTML += "wrong password<br />";
}
}
else
{
o.innerHTML += "ERROR!<br />";
}
// bind to the submit event and cancel it, to prevent realod!
document.getElementById('form1').onsubmit = function() {
return false;
}
}
</script>
</head>
<body>
<!-- wrap your code in a form that gets submited on enter keypress -->
<form id="form1" action="#" method="post">
<h3>Start Here</h3>
UserName: <input type="text" id="user"><br>
Master Code: <input type = "password" id = "pass"><br><br>
<input type="submit" value="Submit" onclick= "check()">
<div id="output"></div>
</form>
</body>
</html>
The data is submitted when the user presses either the enter key or the submit button.
I have a simple form with two inputs and a submit button. I need to display the message depending on the lang attribute. When I click on submit button it displays the message even though the field is filled with valid data.
<!DOCTYPE html5>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="" method="get">
<input type="text" value="" oninvalid="check(event)" required/>
<input type="text" value="" oninvalid="check(event)" required/>
<input type="submit" value="Save">
</form>
<script type="text/javascript">
function check(e) {
var a=document.documentElement.lang;
var validateMsg=(a=="ar"?"In arabic":"Plz enter on Alphabets");
var input = e.target;
if(input.validity.valid){
return true;
}else{
input.setCustomValidity(validateMsg);
return false;
}
}
</script>
</body>
</html>
check(event) is meaningless. The event parameter is passed internally
checking validity inside the oninvalid handler is useless
If you use only oninvalid, you won't be able to change back the validation message once the user starts filling the field. You should use the change, keyup or keydown event for that, depending on the reactivity you want.
This could work:
<input type="text" value="" onchange="check" required />
// ...
function check(e) {
var input = e.target;
var msg = "";
if(!input.validity.valid) {
var a=document.documentElement.lang;
msg=(a=="ar"?"In arabic":"Plz enter on Alphabets");
}
input.setCustomValidity(msg);
}