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>
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.
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
I have page with form on it, I am trying to disable the button on submit with a custom disable message on it, and submit the form after using jquery.
<form>
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
I have try both form submit or form[0] submit neither submits the form, I try logging the form, the form is logged correctly to console, and there are no errors in console when clicking submit.
$(document).ready(function() {
$('.send').click(function(e) {
e.preventDefault();
e.stopPropagation();
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
console.log(form); //Logs form fine
form[0].submit();
// form.submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="run" />
<input type="submit" class="send" value="Save" data-attr-message="Sending..." />
</form>
Your form does not have an "action" and "method".
It should look like:
<form action = "http://example.com/backendScript" method = "POST">
if your goal is to "simulate" the time that it takes to send data, and you want to see the button to be disabled until that time, one way is to use "setTimeout()" method of javascript. you do not need to use "e.preventDefault()" because it prevent the form from submitting. I posted the code below that I think does what you expected:
$(document).ready(function() {
$('.send').click(function(e) {
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
setTimeout(function() {
form.submit();
}, 1000)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="submit.html">
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
<script src="jquery-3.5.1.js"></script>
<script src="script.js"></script>
</body>
</html>
the "submit.html" is simply an html file with a message that you can add to your folder yourself to see that the form is submitting.
I need to the add a JavaScript variable to a link in action form. Is that possible?
JavaScript function:
<script>
function parameter()
{
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
vars[key] = value;
});
return vars;
}
var vpid = getUrlVars()["pid"];
}
//var link = "second_02.html" + pid.toString();
</script>
And in my form I need to add the variable 'link' to a form action, as follows:
<form action='second_02.html + ?pid=vpid&' id="sky-form" class="sky-form">
You'll need to do that programmatically via JavaScript.
After this line...
var vpid = getUrlVars()["pid"];
Add this one...
document.getElementById('sky-form').action = 'second_02.html?pid=' + vpid;
Given the nature of the content of vpid, then you could implements this in the load event of your window.
ALTERNATE METHOD 1
Here's an alternate method of doing what you appear to require, but it requires you to set the new location with the calculated parameter. You can amend the lines that try to get the text from the textbox, with whatever you need to append to your URL.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function validateForm() {
//alert('Validating form...');
var text = document.getElementById('txtValue').value;
text = escape(text);
location.href = 'test.html?param=' + text;
return false;
}
</script>
</head>
<body>
<form id="frmTest" method="get" action="" onsubmit="return validateForm();">
<input id="txtValue" type="text" value="foobar">
<input id="btnSubmit" type="submit" value="Submit">
</form>
</body>
</html>
ALTERNATE METHOD 2
This method allows you to continue to use your form, even with its GET method, but you set the value of a hidden field, that will then be appended to the URL in the querystring during submission.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function validateForm() {
//alert('Validating form...');
document.getElementById('hidTest').value = 'some calculated value';
return true;
}
</script>
</head>
<body>
<form id="frmTest" method="get" action="" onsubmit="return validateForm();">
<input id="txtValue" type="text" value="foobar">
<input id="btnSubmit" type="submit" value="Submit">
<input name="hidTest" id="hidTest" type="hidden" value="testIt">
</form>
</body>
</html>
I have looked carefully through other questions to find an answer, and I haven't had any luck, so if this has already been asked and I've missed it, my apologies in advance. I have a very simple page:
<script type="text/javascript">
function setFormField(data) {
document.getElementById('searchTextField').value = data;
document.getElementById("lookupForm").submit();
}
function formSubmit() {
alert('in');
var proceed = false;
return proceed;
}
</script>
</head>
<body>
<form action="page2.php" method="post" id="lookupForm" name="lookupForm" onSubmit="return formSubmit();">
<input type="text" name="location" id="searchTextField" >
<input type="submit" value="Submit">
</form>
click me
</body>
The idea is that when you click the "click me" link, it enters some data into the form and then submits the form, which should then call the onSubmit script - but the formSubmit() function never gets called - the form just submits itself.
Why doesn't the formSubmit() function get called? Seems like it should...?