How to retrieve the values from an form to another html? - javascript

My code is ...
<form name="myForm" action="demo_form.html" onsubmit="return validateForm()" method="GET">
<input type="text" name="StuserID" id="basic" value="" placeholder="userID" />
<input type="submit" value="Login"/>
So, when I pressed the Login it will call method validateForm() and returns the boolean
function validateForm()
{
var x=document.forms["myForm"]["StuserID"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
}
Firstly, if the userId is null it should show an alert "Name must be filled out" and return false. In my case, it is succeeding and move to demo_form.html. How can I make it so that form submission and continuing to demo_form.html is only done when function returns true?
Secondly, how do I get the userid in demo_form.html from the form when pressing the login button?

you have to use php file to retrieve data from html form.your html code form should be
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="GET">
<input type="text" name="StuserID" id="basic" value="" placeholder="userID" required />
<input type="submit" value="Login"/>
and then
function validateForm()
{
var x=document.getElementById["StuserID"].value;
if (x=="")
{
alert("Name must be filled out");
return false;
}
else
{
return true;
}
}
your should use following code for demo_form.php file
<?php
$user = $_GET['StuserID'];
echo $user;
?>

1) Because false prevent the default behavior of form submit.
2) Create a session and use userid in session variable

I did't got exact error but in my case this following code works you can try this also
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
alert("sdfdfsf");
// return false;
var x=document.forms["myForm"]["StuserID"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.html" onsubmit="return validateForm()" method="GET">
<input type="text" name="StuserID" id="basic" value="" placeholder="userID" />
<input type="submit" value="Login"/>
</form>
</body>
</html>
and you can use jquery function also
Like .submit

Related

Prevent HTML form from POSTing if it doesn't pass client side validation

Basically, I have this very simple HTML form, when I submit, it does POST to /productos and runs a JS script that validates the form, if its not correct, it displays an error, all good.
But one thing I want to do is to "cancel" the POST if the form doesn't pass that validation, is there any way to do it?
I have thought about making the POST from the javascript function instead of from the form itself, but I have no idea how to do that
html:
<form name="registro" action="/productos" method='post' onsubmit="return validacion()">
<div>titulo</div>
<input type="text", name="titulo"/>
<input type="submit">
</form>
js validation:
function validacion(){
var titulo=document.registro.titulo.value;
if (titulo == ""){
alert("error, titulo cant be empty")
} else if (titulo.length > 100){
alert("error, titulo cant be more than 100 characters long")
}
make validacion() return true or false
function validacion(){
var titulo=document.registro.titulo.value;
if (titulo == ""){
alert("error, titulo cant be empty")
return false;
} else if (titulo.length > 100){
alert("error, titulo cant be more than 100 characters long")
return false;
}
return true;
}
<!DOCTYPE html>
<html>
<body>
<form name="registro" action="/productos" method="post">
<div>titulo</div>
<input type="text", name="titulo" required="required" />
<input type="submit">
</form>
</body>
</html>
no need for javascript run abounts are needed.
Its easier to use standard html5 with xhtml compatibility method, like this, for form validation:
<!DOCTYPE html>
<html>
<body>
<form name="registro" action="/productos" method="post">
<div>titulo</div>
<input type="text", name="titulo" required="required" />
<input type="submit">
</form>
</body>
</html>

Validate all form data before submitting

I have created a form in HTML and have use onblur event on each and every field and it is working very fine. The problem is when i click on submit button(which will send data to a servlet) the data is submitted even if it is invalid. Here is an example.
<html>
<head>
<script>
function check()
{
if(checkName()==true)
return true;
else{
alert('vhvh');
return false;
}
}
function checkName()
{
var uname=document.enq.Name.value;
var letters = /^[A-Za-z, ]+$/;
if(uname.match(letters))
{
document.getElementById('Name').style.borderColor = "black";
return true;
}
else
{
document.getElementById('Name').style.borderColor = "red";
//alert('Username must have alphabet characters only');
//uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="enq" method="post" action="Enquiry" onsubmit="check()">
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br>
<input class="button" type="submit">
</form>
</body>
</html>
How can i resolve this issue?
use
<input class="button" type="button">
and put a onclick event like this:
<input class="button" type="button" onclick="this.submit()">
so you can manipulate data before you subimit it.
There is an "onsubmit" event that allows you to control form submission. Use it to call your validation functions, and only then decide if you want to allow the user to submit the form.
http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html
You have to use it in the following way if you want it to prevent the form submission:
<form onsubmit="return check()">

javascript onsubmit event for multiple functions check doesn't work

In mi validation form I have two input fields in order to write email and confirm it.
Before the submit informations, two confirms are needed:
1-email must seems an email,
2-email one must match the email two.
I can handle these statements each one using two separate javascript functions but i fail when I try to check them all in the onsubmit event attribute. If I write a correct email adress, the form reach the action destination, even if the confirm email doesn't match.
Looking around the web doesn't help me.
Here u are the code (html/javascript):
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Email Validation</title>
<script type="text/javascript">
function isEmail(email, output) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById(email).value;
if (regex.test(email)) {
return true;
} else {
document.getElementById(output).innerHTML = 'wrong email';
return false;
}
}
function compareEmail(email, emailToCompare, output){
var email = document.getElementById(email).value;
var emailToCompare = document.getElementById(emailToCompare).value;
if(emailToCompare == email){
document.getElementById(output).innerHTML = 'ok!';
return true;
}else{
document.getElementById(output).innerHTML = 'emails dont match!';
return false;
}
}
function check(){
return isEmail() && compareEmail();
}
</script>
</head>
<body>
<form action="file.php" method="post" onSubmit="return check()">
<p>Email</p>
<input type="text" name="email" maxlength="50" id="email">
<div id="email_result">
</div>
<br/>
<p>Confirm email</p>
<input type="text" onpaste="return false;" autocomplete="off" name="email" maxlength="50" id="confirm_email" onKeyUp="return compareEmail('email', 'confirm_email', 'confirm_email_result')">
<div id="confirm_email_result">
</div>
<input type="submit" name="submit" value="Register" onclick="return isEmail('email', 'email_result');">
</form>
</body>
The double control doesn't work with the follow script too:
function check(){
if (isEmail() && compareEmail()){
return true;
}else{
return false;
}
}
Nothing changes if I use:
onSubmit="return check()"
or
onSubmit="check()"
in the form event attribute.
You are missing the parameters in the function calls:
function check(){
return isEmail('email', 'email_result') && compareEmail('email', 'confirm_email', 'confirm_email_result');
}
Side note: You have declared variables in the functions with the same name as the parameters. It still works at it is, but the variables are not actually created but will overwrite the parameter values, so the code is a bit confusing.

Javascript won't stop php form submission

Javascript gives error window, but it won't stop the form submission. I'm stumped at this point and can't find an exact answer. Here is the code, thanks:
function newNameValidate() {
var x = document.forms["checkIn"]["newName"].value;
if (x==null || x=="") {
alert("Tech name must be filled out");
return false;
}
return true;
}
Here is the HTML:
<form name="checkIn" onsubmit="newNameValidate(checkIn)" action="check_in_complete.php" method="POST">
<input type ="submit" class="input" value="CHECK IN">
You must return the value of the function, onclick="return foo();"
As others have said, you need to return the value returned from the function, but a better option is to use unobtrusive JavaScript:
<form name="checkIn" action="check_in_complete.php" method="POST">
Script:
window.onload = function() {
document.forms["checkIn"].onsubmit = newNameValidate;
}
It can be done like:
<form name="checkIn" id="checkIn" action="check_in_complete.php" method="POST">
<input type ="button" class="input" value="CHECK IN" onclick="newNameValidate()">
</form>
<script>
function newNameValidate() {
var x = document.forms["checkIn"]["newName"].value;
if (x==null || x=="") {
alert("Tech name must be filled out");
return false;
}else{
checkIn.submit();
}
}
</script>

Javascript form validation not working

I can't understand why my javascript isn't working... Do i need to declare a variable somewhere?
<script type="text/javascript">
function validation(form) {
      
if(form.first_name.value == '' ) {

alert('Please enter your first name');
 form.first_name.focus();
return false;
}
if(form.00N30000006S4uq.value == '') {

alert('Please enter the high end of your budget');
 form.company.focus();
return false;
}
return true;
}
</script>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead" method="POST" onsubmit="return validation(this);">
As mentioned by #ReturnTrue, the NAME must begin with a letter. That is why your script is failing.
In your case since the field is auto-generated, if you know the flow of the elements in the form then you can reference the form elements array, like this...
form.elements[2].value
where form.elements[2] is form.00N30000006S4uq. That will do the job.
Example:
function validation(form) {
if(form.elements[0].value == '' ) {
alert('Please enter your first name');
form.first_name.focus();
return false;
}
if(form.elements[2].value == '') {
alert('Please enter the high end of your budget');
form.company.focus();
return false;
}
return true;
}
<form action="" method="POST" onSubmit="return validation(this);">
<input type="text" name="first_name" />
<input type="text" name="company" />
<input type="text" name="00N30000006S4uq" />
<input type="submit" name="submit" />
</form>
Form names need to begin with a letter. "00N30000006S4uq" fails because it begins with a number.
See: http://www.w3.org/TR/html401/types.html#type-cdata

Categories

Resources