Javascript - How to cancel a Post form with a confirmation message? - javascript

Here is the code to Receive the POST :
{{velocity}}
#if ($request.getMethod() == "POST")
$request.getParameter("servicename")
#end
{{/velocity}}
Here is the code to Send the POST :
{{velocity}}
{{html}}
Here is the code for the javascript :
<script type="text/javascript">
function validateForm()
{
c = confirm("Are you sure ?");
if(c == true){
alert("The foo has been created");
}else{
alert("The foo creation has been canceled.");
return false;
}
}
</script>
Here is the code for the html form :
<form name="myForm" action="$doc.getURL('view')" method="post" onsubmit="return validateForm()">
<input type="hidden" name="xaction" value="createservice" />
Foo Name:
<input type="text" name="servicename" />
<input type="submit" value="Create" />
</form>
{{/html}}
{{/velocity}}

I don't know if this will help you but the following code works:
<html>
<head>
<script type="text/javascript">
function foo() {
if (confirm("Are you sure?")) {
alert("OK");
return true;
}
else {
alert("KO");
return false;
}
}
</script>
</head>
<body>
<form method="post" onsubmit="return foo()">
<input type="text" />
<input type="submit" value="Go" />
</form>
</body>
</html>
And then you can get rid of foo:
<form method="post" onsubmit="return confirm('Are you sure?')">

Related

return false but submit

i try two way to solve this problem
<form method="post">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit" onclick="return check();">subscribe</button>
</form>
and other way is
<form method="post" onsubmit="return check();">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit">subscribe</button>
</form>
my js is
function check() {
var email = document.getElementById("testId").value;
var exptext = /^[A-Za-z0-9_\.\-]+#[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email)==false){
alert("error");
document.addjoin.email.focus();
return false;
}else{
alert("complete");
return true;
}
}
alert show "error" but submit wrong email.
What did I do wrong?
<form method="post" id="form">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit">subscribe</button>
</form>
<script>
let form = document.querySelector('#form');
form.addEventListener('submit', function(e) {
e.preventDefault();
check();
});
</script>
<script>
function check() {
let email = document.getElementById("testId").value;
let exptext = /^[A-Za-z0-9_\.\-]+#[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email) === false){
alert("error");
document.addjoin.email.focus();
return false;
} else {
alert("complete");
return true;
}
}
</script>
This should work
You just need to remove the onclick="return check();"
Then you just need to add document.getElementById("btnValidate").onclick = check; to your js and it would work

unable set required attribute to true with javascript

I have a form.When I submit that form the require attribute of the text field of that form should be set to true.I am trying this with javascript.But unable get the positive result.My code is
<html>
<head>
<script>
function validate()
{
alert("ok");
document.getElementById("sample").required = true;//method-1
document.getElementById("sample").setAttribute("required","")//method-2
}
</script>
</head>
<body>
<form method="post" action="" onsubmit="validate()">
<input type="text" id="sample">
<input type="submit" value="submit">
</form>
</body>
</html>
in both these methods I am unable to set required to true.any help please...
You can return on form submit like below example. This is reference url.
<form name="myForm" action="/action_page.php"onsubmit="return validateForm()" method="post">
See Demo
With element.required = true;
function validate() {
var el = document.getElementById("sample");
if (el.value) {
alert(el.value);
return true;
} else {
alert('Value is required..');
el.required = true; //method-1
return false;
}
}
<form method="post" action="#" onsubmit="return validate()">
<input type="text" id="sample">
<input type="submit" value="submit">
</form>
With element.setAttribute("required", "");
function validate() {
var el = document.getElementById("sample");
if (el.value) {
alert(el.value);
} else {
alert('Value is required..')
el.setAttribute("required", "");
return false;
}
}
<form method="post" action="" onsubmit="return validate()">
<input type="text" id="sample">
<input type="submit" value="submit">
</form>

javascript form validation_error in if condition

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>

Trying to post data with form, and check input field if empty

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>

Something is going wrong with this onclick

<!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

Categories

Resources