<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 || numbers.indexOf(prod_id.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 || numbers.indexOf(prod_type.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
This is a test page being written to only learn basics.When I am pressing Submit there is no checking happening and it goes to Submit.html page.why? What modification is needed here?
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
What exactly happens when I am pressing this button?
var prod_id=document.getElementByID("productid").value;
var prod_type=document.myform.producttype.value;
both mechanisms are same ?
This is the Modified one.But still not working. Please help
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric(); " value="Submit">
</form>
</body>
</html>
there you go you forgot closing parenthesis for if statements:
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
if You want didn't go to Action page You must put return false; at end of onclick like this
onclick="validateAlphaNumeric();return false;"
or put return false; at end of function that you Call with return false; you say browser don't submit
Try returning false when validation fails
Related
I am fairly new to coding so forgive me if it is something simple I am missing.
I am trying to validate the First Name field using a simple If statement in the function, but when I test it via live server the form submits without throwing the alert.
function validateForm() {
var firstName = document.getElementById('fname').value;
function firstNameValid() {
if (firstName == "") {
alert("First name empty")
return false;
} else {
return true;
}
};
firstNameValid(firstName);
};
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form name="registration" action="page2.html" onsubmit="return validateForm()" method="GET">
<ul>
<li>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" onsubmit="return firstNameValid(document.registration.fname)"><br>
</li>
<li>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname"><br>
</li>
<li>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br>
</li>
<li>
<label for="phonenumber">Phone Number:</label><br>
<input type="text" id="phonenumber" name="phonenumber">
</li>
</ul>
<button type="submit" value="Submit">Submit</button>
</form>
<script>
src = "app.js"
</script>
</body>
</html>
The script should be loaded into the page like this…
<script src="app.js"></script>
…not like this…
<script>
src = "app.js"
</script>
validateForm doesn't return anything - you probably just need to change
firstNameValid(firstName);
to
return firstNameValid(firstName);
But, I'm a little rusty on when a form does / does not end up submitting, you may need to do
function validateForm(e) {
var firstName = document.getElementById('fname').value;
function firstNameValid() {
if (firstName == "") {
alert("First name empty")
e.preventDefault();
return false;
} else {
return true;
}
};
return firstNameValid(firstName);
};
<form name="registration" action="page2.html" onsubmit="return validateForm(event)" method="GET">
I have my form in Spring MVC into which I need to apply java script validations as well. The code is given below.
function validate_form() {
valid = true;
var fname = document.myform.firstname.value;
if (fname == "") {
document.getElementById('fname_error').innerHTML = "enter the first name";
valid = false;
}
return valid;
}
<html>
<head></head>
<body>
<form:form action="done" method="post" modelAttribute="student" name="myform" onsubmit="return validate_form()">
<p>First name:</p>
<form:input type="text" path="firstname" name="firstname" />
<p id="fname_error"></p>
<input type="submit" value="Sumbit">
</form:form>
</body>
</html>
Here the java script code executes, but the if condition does not executes. Is this problem need to be solved using the controller class? Please help me in this matter.
thank you.
I think you are adding :form there which was not necessary.
Here is the running code:
<html>
<head></head>
<body>
<form action="done" method="post" modelAttribute="student" name="myform" onsubmit="return validate_form()">
<p>First name:</p>
<input type="text" path="firstname" name="firstname" />
<p id="fname_error"></p>
<input type="submit" value="Sumbit" >
</form>
<script type="text/javascript">
function validate_form(){
valid = true;
var fname = document.myform.firstname.value;
if(fname == ""){
document.getElementById('fname_error').innerHTML = "enter the first name";
valid = false;
}
return valid;
}
</script>
</body>
</html>
I'm trying to have a form where I can search a database, but also have simple error handling where I can check if the user did not enter anything and run the function validateForm. However I'm not sure how to do both.
<form action="http://apsrd7252:5000/result/" method="POST">
<input type="text" id="IDSub" name="hostname" />
<input onclick="return validateForm()" type="submit" value="Submit" placeholder="Host Name" />
</form>
Here's the script
function validateForm() {
var a = document.getElementById("IDSub");
if( a.value == null) {
alert("Please fill in an ID");
return false;
} else {
window.location.href = "http://apsrd7252:5000/result";
}
}
Instead of "null" in if condition simply use empty string like "".
function validateForm() {
var a = document.getElementById("IDSub");
if( a.value == "") {
alert("Please fill in an ID");
return false;
} else {
window.location.href = "http://apsrd7252:5000/result";
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form action="http://apsrd7252:5000/result/" method="POST">
<input type="text" id="IDSub" name="hostname" />
<input onclick="return validateForm()" type="submit" value="Submit" placeholder="Host Name" />
</form>
</body>
</html>
I want to save this data in JSON format without using PHP ,when user give the value and press send ,its data add in JSON so that ,I can use this JSON as Database.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Thank you so much for your help :) in advance
You can iterate through your form and collect it's values in an array, which you can encode in JSON format.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit" onclick="logJsonInputs()">
</form>
<script type="text/javascript">
function logJsonInputs() {
var nameFormElements = document.getElementById("name_form").elements;
var inputs = [];
for(var i = 0; i < nameFormElements.length; i++) {
var element = nameFormElements[i];
inputs[element.name] = element.value;
}
var jsonInputs = JSON.stringify(inputs);
console.log(jsonInputs);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function stringifyForm(formObject)
{
var jsonObject = {};
var inputElements = formObject.getElementsByTagName("input");
inputElements = Array.prototype.slice.apply(inputElements); //Because I want to use forEach and getElementsByTagName returns an object.
inputElements.forEach(function(e,i,a)
{
if (e.type != "submit")
{
jsonObject[e.name] = e.value;
}
}
);
$.post("https://www.apiaas.com/consume.php",
{
"data":jsonObject
},
function(data)
{
console.log(data);
}
);
}
function jquerySolution(formObject)
{
var jsonObject = JSON.stringify( $(formObject).serializeArray() );
$.post("https://www.apiaas.com/consume.php",
{
"data":jsonObject
},
function(data)
{
console.log(data);
}
);
}
</script>
</head>
<body>
<form onsubmit="jquerySolution(this);return false;">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>
parts of my code. it was supposed to count 2 if all of your answers were correct.
i am just a begginer at this. the error is that when i open my browser and click the "check?" nothing happens.
<head>
<script language="javascript">
function checker()
{
var myscore = 0;
if(parseInt(document.quiz.num1.value) == 6)
{ myscore = (myscore + 1);}
else
{ myscore;}
if(document.quiz.num2.value == type of "dry" )
{ myscore = (myscore + 1);}
else
{ myscore;}
document.myform.thescore.value = myscore;
}
</script>
</head>
<body>
<form name="quiz">
How many feet are ther in 1 Fathom? <input type="text" id="num1">
<br>
What type of stones can never be found in the ocean? <input type="text" id="num2">
<br>
My Score: <input type="text" id="thescore"><br>
<input type="button" value="Check?" onClick="checker()">
</form>
</body>
here is your answer:
<html>
<head>
<script lang="Java-Script">
var msg;
var sc;
function validateTest()
{
sc=0;
msg=document.frm.num1.value;
if(msg==6)
sc=sc+1;
msg=document.frm.num2.value;
if(msg=='dry')
sc=sc+1;
document.frm.thescore.value=sc;
return;
}
</script>
</head>
<body>
<form name="frm">
How many feet are there in 1 Fathom? <input type="text" name="num1"><br>
What type of stones can never be found in the ocean? <input type="text" name="num2"><br>
My Score: <input type="text" name="thescore"><br>
<input type="button" value="Submit" onclick="validateTest()">
</form>
</body>
</html>
i have already tested this, it will work.