I've looked over a number of posts that are similar to my query, but in general, they are not helping me. I think part of my problem is that I am so new to JavaScript that a lot of the previous posts are too complicated for me. I have the simple code below, but it does not seem to work. I do not get my alerts, and I do not think the form is being submitted even when the function should be returning "true." I checked the Error Console, and there are no errors. Can someone help?
JavaScript:
function submit()
{
var age = document.Message.Age.value;
if (age > 39)
{
alert("You're old.");
return false;
}
else
{
alert("You're young!");
return true;
}
}
HTML:
<FORM id = "Message" name = "Message" method = "post" action = "http://cnn.com" onsubmit = "return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="button" name = "Submit" value = "Submit">
</FORM>
Change your HTML to
<FORM id = "Message" name = "Message" method = "post" action = "http://cnn.com" onsubmit = "return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="submit" name = "Submit" value = "Submit">
</FORM>
Note that the input type has been changed to 'submit', so that the submission actually takes place.
I doubt your javascript function itself is being called or not. If not, I think you need to move you onsubmit to <body> tag from <form> tag.
as
<body onsubmit"return submit();">
Also either change your button to either type as submit or add an onClick() event below:
<INPUT type="submit" name = "Submit" value = "Submit"/>
or
<INPUT type="button" name = "Submit" value = "Submit" onClick="submit()"/>
Below is the full working code(in chrome and IE8) sample:
<Html>
<head>
<script language="javascript">
function submit(){
var age = document.Message.Age.value;
if (age > 39){
alert("You're old.");
return false;
}else{
alert("You're young!");
return true;
}
}
</script>
</head>
<body>
<FORM id = "Message" name = "Message" method = "post"
action = "http://cnn.com" onSubmit = "javascript:return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="submit" name = "Submit" value = "Submit"/>
</FORM>
</body>
</html>
Related
This is my code for index.html
<form action = "indo.html">
<input type = "text" id = "tex">
<button id = "tex">Submit</button>
</form>
<script>
var o = document.getElementById("tex").value;
localStorage.setItem("three", o);
</script>
This is my code for indo.html
<script>
var n = localStorage.getItem("three");
document.write("Welcome "+n);
</script>
Actually its working .But the value is empty .set Initial value on input .Because its set value on page load not after the form submit
Try this
<form action="indo.html">
<input type="text" id="tex" value="something">
<button id="tex">Submit</button>
</form>
<script>
var o = document.getElementById("tex").value;
localStorage.setItem("three", o);
</script>
indo.html
<script>
var n = localStorage.getItem("three");
document.write("Welcome " + n);
</script>
If you want save data into local-storage i suggest below code:
<form >
<input type = "text" id = "tex">
<button id = "texb">Submit</button>
</form>
function fun_sub(){
const val = document.getElementById("tex").value;
localStorage.setItem("three", val);
console.log(localStorage.getItem("three"));
window.open("/indo.html", "_self");
}
In your code, name id of input element and button element is same! this mistake return error if you call getElementById in javascript ,and you must consider that when you write a code and you want call code again after render page, you should call it in a function.
I'm writing a piece of HTML and JavaScript code and I need to check if inputs have been filled before clicking the button. However, when I leave them blank, it proceeds to the php page passing the variables empty.
I have made some tests and I've concluded it does not load the onClick function at all.
This is the code (without all the CSS stuff):
<div class = "register">
<form action = "register.php" method = "post" name = "reg1" id = "register" onClick = "return validateForm();">
<input type = "text" class = "reg" id = "name" name = "name"/>
<div class = "alert" id = "inserthere1"> </div>
<input type = "text" class = "reg" id = "surname" name = "surname"/> <div class = "alert" id = "inserthere2"></div>
<input type = "text" class = "reg" id = "mail" name = "mail" /><div class = "alert" id = "inserthere3"></div>
<input type = "submit" value = "Join!" >
</form>
</div>
<script language = "JavaScript">
function validateForm() {
var n = document.getElementById("name").value;
var c = document.getElementById("surname").value;
var m = document.getElementById("mail").value;
alert("Nome:"+n+"Cognome:"+c+"Mail:"+m);
document.getElementById("inserthere1").innerHTML = (n===null || n==="" ? '<i> This cannot be left empty. </i>' : '');
document.getElementById("inserthere2").innerHTML = (c===null || c==="" ? '<i> This cannot be left empty. </i>' : '');
document.getElementById("inserthere3").innerHTML = (m===null || m==="" ? '<i> This cannot be left empty. </i>' : '');
if ( n===null || c===null || n==="" || c==="" || m===null || m==="" )
return false;
}
return true;
}
So you want to make sure the fields are filled in before proceeding? You can use:
<input required="">
This way the user has to fill out the fields with required="", or their browser won't let them submit the form.
You have to use the preventDefault on the submit event or use a button instead a input, after that you have to use the onclick event on the button, not into the form that will validate if the inputs has been filled or not.
After you validate the form you can use this for submit your form
document.getElementById("myForm").submit();
That will send the form data to the action script.
Ref: preventDefault Documentation | W3CSchools
Ref2: Form Submit method | W3CSchools
try using
<form>..</form>
document.addEventListener('click', validateForm, false);
<script language = "JavaScript">
function validateForm() {
..
</script>
I have a big problem with my client side and my server side and I need help.
I have to gather data from two forms and submit data after validation when the saveentry button of the third form is pressed but I am getting confused. The values do not get displayed and server side validation does not work. I have two forms which have to undergo client side and server side validation. I use the onsubmit so that when the form is posted the values are checked this is the code:
function validation() {
person_name = $('#person_name').val();
if (test_name == '') {
$('#test_name').parent().append('<div class="error">Please fill this field</div>');
errors = true;
}
if (errors) {
return false;
} else {
var personname = ("<h1>" + person_name + "</h1>");
$('#display').append('<div class = "display">' + personname + '</div>');
}
}
function validation1(){
var product_name = $('#product_name').val();
if(product_name == ''){
$('#product_name').parent().append('<div class="error">Please fill this field</div>');
// the other fields are validated as well
errors = true;
}
if(errors){
return false;
}
else{
// the values are appended to display
}
}
The forms look like this
<form name = "person" action = "" onsubmit= "return validation" method=" post" >
<input type="text" name = "personname" id = "personname">
</form>
<form name = "products" action = "" method = "post" onsubmit= "return validation1">
<input type="text" name = "productname" id = "productname">
<input type="text" name = "company" id = "company">
<input type="text" name = "location" id = "location">
</form>
<form name = "display" id = "display" action = "saveentry.php" method = "post">
</form>
the PHP code that checks the values is as follows
if(empty($_POST['fieldname'])){
//An error is displayed.
}
Any help is highly welcome!
Try next:
onsubmit= "return validation()"
see the following code :
<html>
<head>
<script type="text/javascript">
function validate()
{
fname = f.fn.value;
if(fname!= "abc")
alert("Incorrect name!")
lname = f.ln.value;
if(lname != "xyz")
alert("Incorrect Name!")
paswd = f.pswd.value;
if(paswd<8)
alert("Too short password!")
for(var i=0; i<f.d.length; i++)
{
if(f.d[i].value.checked)
{
document.write(f.d[i].value);
}
}
for(var i=0; i<f.c.length; i++)
{
if(f.c[i].value.checked)
{
alert(f.c[i].value);
}
}
}
</script>
</head>
<body>
<form name="f" onsubmit="validate()">
First Name: <input type = "text" name = "fn"> <br>
Last Name: <input type = "text" name = "ln"> <br>
Password: <input type = "password" name = "pswd"> <br>
E-mail: <input type = "email" name = "mail"> <br>
Degree : <input type = "radio" name = "d" value = 's'> SE
<input type = "radio" name = "d" value = 'c'>CS
<input type = "radio" name = "d" value = 'E'>IT <br>
University
<select name = "uni">
<option value = 'p'>PU</option>
<option value = 'f'>FAST</option>
</select> <br>
CGPA : <input type = "radio" name = "c" value = '3'> >=3.0
<input type = "radio" name = "c" value = '2'> >=2.5 <br>
Browse <input type = "file" name = "uf"> <br>
<input type = "Submit" value = "Submit">
</form>
</body>
</html>
When i press the submit button,I should get a message of
Incorrect name
or
too short password
if the conditions are true but nothing happens, why?
Why the
validate()
function not running?
The Problem
int i
makes no sense. This would be proper Java syntax, but not in Javascript. I think you mean var i
What else?
You have two form tags.
PS
If you're too lazy to open your web browser's console (or if it doesn't have one), just use the try and catch expressions.
I'm too lazy to fix all these issues. Just give me the fixed code
DEMO
First of all:
Just use form once:
<form> // <--- remove this line
<form name="f" onsubmit="validate()">
Second, you're using a mixture of what seems like JAVA and JavaScript, so instead of for(int i, declare your variable with var. Like so:
for (var i = 0; i < f.d.length; i++) { <--- var instead of int
if (f.d[i].value.checked) {
alert(f.d[i].value);
}
}
That should remove all the errors, you could have also seen these errors yourself when using the correct debugging tools. Here is a list of them:
Chrome DevTools: https://developers.google.com/chrome-developer-tools/docs/console
Firebug: http://getfirebug.com/
For Internet Explorer: http://msdn.microsoft.com/en-us/library/ie/dn255006(v=vs.85).aspx
Couple of error in your code
<html>
<head>
<script type="text/javascript">
function validate()
{
fname = document.f.fn.value;
if(fname!= "abc")
alert("Incorrect name!");
lname = f.ln.value;
if(lname != "xyz");
alert("Incorrect Name!");
paswd = f.pswd.value;
if(paswd<8)
alert("Too short password!")
for(i=0; i<f.d.length; i++)
{
if(f.d[i].value.checked)
{
document.write(f.d[i].value);
}
}
for(i=0; i<f.c.length; i++)
{
if(f.c[i].value.checked)
{
alert(f.c[i].value);
}
}
// return false; // use this you don't want to submit form
// return true; //for advancing the form
}
</script>
</head>
<body>
<form action="" name="f" onsubmit=" return validate()">
First Name: <input type = "text" name = "fn"> <br>
Last Name: <input type = "text" name = "ln"> <br>
Password: <input type = "password" name = "pswd"> <br>
E-mail: <input type = "email" name = "mail"> <br>
Degree : <input type = "radio" name = "d" value = 's'> SE
<input type = "radio" name = "d" value = 'c'>CS
<input type = "radio" name = "d" value = 'E'>IT <br>
University <select name = "uni">
<option value = 'p'>PU</option>
<option value = 'f'>FAST</option>
</select> <br>
CGPA : <input type = "radio" name = "c" value = '3'> >=3.0
<input type = "radio" name = "c" value = '2'> >=2.5 <br>
Browse <input type = "file" name = "uf"> <br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
above code is working
I consider that you are performing validation on this form hence you need to the call the function
return validate();
Now if function return false, the form is not submitted
if function return true, the form is submitted
Do ask for further help , Don't waste my effort's
So I have my form here
<form name = "reservation" method = "post" action = "makereservation.php" autocomplete="off">
(my codes here)
<input type = "submit" value = "Submit" onclick="checkPhoneNumber(document.reservation.contact)">
</form>
And my Javascript function here to detect wrong length of phone number
function checkPhoneNumber(contact)
{
var phoneno = /^\d{10}$/;
if(contact.value.match(phoneno))
{
return true;
}
else
{
alert("Not a valid Phone Number");
return false;
}
}
What I want to ask is that how do I stop from inserting into database when the input for phone number is wrong?
What I got now is that it detects wrong length of phone number but it still insert into database.
Try this
<form name = "reservation" method = "post" action = "makereservation.php" autocomplete="off"
onsubmit="return checkPhoneNumber(document.reservation.contact)">
<input type = "submit" value = "Submit" >