Even after clicking cancel the form gets submitted - javascript

I am doing a form submission, and I am displaying a confirmation box asking the user that if they really want to continue. But even if the user clicks on cancel, the form is still getting submitted.
<form onsubmit="return confirm('If you enter the incorrect number, the search will still be conducted and charge you for the cost of the search. do you want to continue?.')" action="http:example.com/" id="customersearch" name="customersearch" role="form" method="post" accept-charset="utf-8" novalidate="novalidate">
How can I avoid this? Can anyone kindly tell me how to stop the form from getting submitted when the user clicks cancel?

#Akshay Vasu, try with below solution, you need to call onsubmit event of form
function validateForm() {
if(confirm('If you enter the incorrect number, the search will still be conducted and charge you for the cost of the search. do you want to continue?.'))
{
$("myform").submit();
}
else{
alert("Invalid");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myForm" action="/action_page.php"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Here is working code snippet your code is also working fine:
<form onsubmit="return confirm('If you enter the incorrect number, the search will still be conducted and charge you for the cost of the search. do you want to continue?.')" action="http:example.com/" id="customersearch" name="customersearch" role="form" method="post" accept-charset="utf-8" novalidate="novalidate">
<input type="submit" value="submit">
</form>

just put
<button type="button">Cancel</button>
for cancel and it will work.

Related

Angular js' $isEmpty functionality in form input

My code looks something like this -
<form name="myForm" ng-submit="!myForm.phone.$isEmpty(this.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>
Now I can't submit the form even if I fill the phone number field.
But if I code like this :
<form name="myForm" ng-submit="!myForm.phone.$isEmpty(myForm.phone.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>
Its perfectly working now.
So the difficulty is with 'this'. I cant even check the context of this, it should be the the context of $scope.myForm.phone, but somehow it isn't. Can someone please explain.
That's not what ng-submit is for. ng-submit is a function or expression called when the form is submitted. It's nothing to do with validation. If you want to ensure the text field is not empty before it's submitted you just need to add required and then if it is empty myForm.$invalid will be true.
Is this what you are trying to do:
html
<form name="myForm" ng-submit="submit(phone)">
<input name="phone" type="text" ng-model="phone.value" required>
<button type="submit" ng-disabled="myForm.$invalid" >submit</button>
</form>
controller
$scope.submit = function(phone){
console.log('phone', phone);
}
$scope.phone = {
value: ''
};
update
The this that you passed into the ng-submit is a reference to your controller. Since you have the name attribute set to myForm you can access the form model via this.myForm and the phone model via this.myForm.phone. So if you wanted to use $isEmpty to verify if the field is empty you would have to use:
this.myForm.phone.$isEmpty(this.myForm.phone.$viewValue)
ng-submit is used to provide a handler for the moment when the form IS submitted.
What you're looking for is disabling submit button with ng-disabled
<form name="myForm" ng-submit="functionInController()" action="/my/url" method="get">
<input name="phone" required>
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
</form>
Pay attention to required directive added to the input. Which makes sure this field is not empty for submit

jQuery disabled form is submitted on enter

I have one jQuery form in which I am disabling the submit of form till the jQuery is initialized.
Code looks something like this
<form id="loginForm" role="form" class="form-horizontal col-md-8" action="">
<input type="email"/>
<input type="password"/>
<input type="submit" class="disabled">
</form>
(code is bit simplified.)
Notice class 'disabled'
On jQuery side, I'm doing this
$().ready(function() {
$("#loginBtn").removeClass("disabled"); // This ensures that javascript was loaded before button is pushable
});
The problem is when the page is loading button is disabled and user is not allowed to click on it. But when button is disabled and user fills up the form and press enter. The form is getting submitted.
I want to stall submission of form (via any means) till the jQuery is properly loaded.
How can I achieve this?
You know that setting class="disabled" on a button, doesn't actually disable it, right? ;-)
I think that you need something like this:
<form id="loginForm" role="form" class="form-horizontal col-md-8" action="">
<input type="email"/>
<input type="password"/>
<input type="submit" disabled>
</form>
$(function() {
$("#loginForm input[type=submit]").attr("disabled", null);
});
See JSFiddle here
Try this :
modify your login form submit button as below
$("#loginForm").submit(function() {
if($("#loginBtn").hasClass("disabled")) return false;
//rest of your code as it is
.....
}
NOTE - as per your html, submit button don't have id="loginBtn", please add it.
Just added onsubmit="return false"And it worked.
<form id="loginForm" role="form" class="form-horizontal col-md-8" action="" onsubmit="return false">

Input value from different form

I have two forms on my page...
<form method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="submit" name="form2_submit_pushed/>
</form>
On my php side I want to be able to know the value of the text input "name" when I push the submit button of the second form. Kind of like....
if(isset($_POST['form2_submit_pushed']))
{
echo $_POST['name']; //or something else?
}
The reason behind is that first form has a bunch of data that I don't want in the second form submission.
You could do something like this...this code uses jQuery:
<form id="form1" method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
<input type="hidden" name="form2_submit_pushed" id="form2_submit_pushed">
</form>
<form id="form2" method="post" action="">
<input type="submit" name="form2_submit_pushed"/>
</form>
<script>
$('#form2').submit(function(event) {
//prevent form2 from submitting and submit form1 instead...
event.preventDefault();
//before submitting, indicate that the "form2_submit_pushed" button was pushed
$('#form2_submit_pushed').val(true);
//submit form1
$('#form1').submit();
});
</script>
...but why you would want to I don't know. Why not make all the controls part of the same form? HTML is designed to send info from only one form (at a time) to the server...
UPDATE: Sorry, I didn't notice your line where you explain your reason for wanting to do this. If you want more explicit control over what gets sent to the server I recommend using AJAX to submit the form. Look at https://api.jquery.com/serializeArray/ and https://api.jquery.com/jQuery.ajax/
Correct me if I am wrong here, but I beleive normal HTML will only post the inputs from the form you are posting from. One option would be to have a hidden input on the second form which gets updated via javascript during the input's change event.
So, you could do something like this (I don't recommend inline javascript but it should get you in the right direction):
<form method="post" action="">
<input type="text" name="name" id="name" onchange="document.getElementById('hiddenname').value=this.value"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="hidden" name="hiddenname" id="hiddenname"/>
<input type="submit" name="form2_submit_pushed/>
</form>
Then you just need to get it using
$_POST['hiddenname'];

Lost form validation when changed button type

I have a form which validates that an option is selected using a returned boolean from a function:
<form id="checkoutForm" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" name="paypal">
And I was submitting the form with this standard image button:
<input name="submit" type="image" src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" value="Checkout">
However I've been updating and am using a CSS button instead so submit the form as so:
Checkout with PayPal
I can just use the standard button like so:
<input name="submit" type="submit" class="shopbutton" value="Checkout">
But this causes me some other small issues and I'd like to know how to ensure the form validates using the other method?
TIA
Edit: I should also mention that when using the <a href type button that the button is declared outside of the <form> tags.
You are bypassing the onsubmit when directly submitting the form with javascript. This is one example why client-sided validation is bad.
One solution to your problem would be to append your a link like this:
Checkout with PayPal
And then just add some error count to the validation function, and submit within the function if no errors were found, like so:
function validateForm() {
var errors = 0;
if(inputFieldHere.value.length<3) errors++;
if(errors) return false; //Or display some error or something
else document.forms["checkoutForm"].submit();
}
Try this:
<!DOCTYPE html>
<html>
<head>
<title>element</title>
<script type="text/javascript">
function checkme() {
if (!document.form.agree.checked) {
missinginfo = "You must agree to the Terms and Conditions\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
alert("Text information");
return true;
}
}
function submit_form()
{
if(checkme() == true)
{
document.forms["form"].submit();
}
}
</script>
</head>
<body>
<form name="form" id="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
<label for="agree"> I´ve read terms and conditions and I´m ready to shop</label>
<input type="submit" name="btnSubmit" value="Submit" class="submit">
</form>
Submit form
</body>
</html>
I suggest keeping <input> button inside the form as hidden (e.g. with style="display:none;").
This way you may keep <a> to submit form with onclick, and keep validation in place (I wouldn't be surprised if validation code looks for some reason for <input type="submit" /> inside a form)

How do I enable enter key submit?

So two questions here: If I use <input type="button" onclick="validate()"> then the enter key wouldn't work. However, I can use type="submit" but how would I invoke validate()?
You can have the form validate on submit, which is better anyways:
<form ... onsubmit="return validate()">
<input type="submit" />
</form>
You can return false from your validation function to prevent the form from submitting. The form will validate regardless of whether it's submitted via the return key or the button being clicked.

Categories

Resources