In my web application, in the login page, I have a checkbox. After entering the username/password, if the user doesn't tick the checkbox (T&C), he should not be taken to the home page, and an alert error message will be shown.
I have tried the following code. But it is not working. That is, an alert message is shown. But the user is taken to the next page(home page). I tried returning false, but no luck.
Can anyone tell how to fix this?
function doSubmit() {
var checkbox = document.getElementById("terms");
if (!checkbox.checked) {
alert("error message here!");
return;
}
document.getElementById("f").submit();
}
I am calling doSubmit from
<input id="proceed" onclick="doSubmit()" type="submit" value="${fn:escapeXml(submit_label)}" />
Instead of using onclick in input, try using the below in the form tag:
onsubmit="return doSubmit()"
And the js functions as:
function doSubmit() {
var checkbox = document.getElementById("terms");
if (!checkbox.checked) {
alert("error message here!");
return false;
}
}
Try changing the input type to button instead of submit, delegating the submit action to JS function:
<input id="proceed" onclick="doSubmit()" type="button" value="${fn:escapeXml(submit_label)}" />
Before you submit your form, you should check the checkbox's status, if it's not checked, prevent the from from submit. In jQuery, the following code does the tricks.
$(form).submit(function(e){
if($(this).find("#terms").is('checked')){
e.preventDefault();
alert('error messge goes here');
}
}
Related
Yes this question has been asked for, no the answers don't seem to be working for me.
Simply put, here's the code:
<form id="frm1" onsubmit="preventDefault();">
Message: <input type="text" name="message"><br>
<input type="button" onclick="sendMessage()">
</form>
<script>
function sendMessage() {
var message = document.getElementById("frm1").message.value;
socket.emit('browsermsg', {data: message})
}
$("frm1").submit(function (e) {
e.preventDefault();
sendMessage();
alert("call some function here");
});
</script>
using onsubmit="preventDefault();" doesn't have any effect, where as using "onsubmit="return false;" prevents the from from being submitted at all when enter is pressed.
I want the form to submit when enter is pressed, but then to also not reload the page. I'm failing to see where in code the page feels the need to reload when the enter key is pressed at all, I'm assuming it's something built into JS?
$("frm1").submit(function (e) { should be $("#frm1").submit(function (e) {
As you are selecting from by Id, this is how you use the selector with id $('#Id')
Can we run a js function on a submit button and php on the same button. I have a submit button that sends form data to a database using php, but I want a second action (JavaScript function) to take place once the button is clicked as well. Is that possible?
You can add onclick() event to submit button. it will execute before submitting the form.
var buttonClick = () => {
alert("Do what you want to do!"); // Add your second work here
}
<form action="yourfile.php">
<input type="submit" onclick="buttonClick();">
</form>
The correct method is to call the javascript function on the onsubmit attribute in the form with a return state. Thus the form will wait until the JavaScript returns true before proceeding with submit.
The HTML
<form action="something.php" onsubmit="return someJsFunction()">
<!-- form elements -->
<input type="submit" value="submit">
</form>
The JavaScript
function someJsFunction(){
//your validations or code
if(condition == false){
return false; // This will prevent the Form from submitting and lets
// you show error message or do some actions
}else{
return true; // this will submit the form and handle the control to php.
}
}
You can do this with the jQuery submit callback for this
$("form").submit(function(){
alert("Submitted");
});
see. https://www.w3schools.com/jquery/event_submit.asp
I'm trying to implement new invisible recaptcha by google.
But i have required inputs and should validate the form before recaptcha execute.
I got an error on recaptcha callback function like that:
Uncaught TypeError: document.getElementById() submit is not a function
So how can i submit the form after validate and recaptcha executed?
HTML:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form id="form" action="?" method="post">
Name: (required) <input id="field" name="field">
<div id='recaptcha' class="g-recaptcha"
data-sitekey="6LcAmBAUAAAAAFukLQIkOIICuBBxKEdn-Gu83mcH"
data-callback="onSubmit"
data-size="invisible"></div>
<button id='submit'>submit</button>
</form>
<script>onload();</script>
Javascript:
function onSubmit(token) {
alert('Thanks ' + document.getElementById('field').value + '!');
document.getElementById('form').submit(); // This is error line
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("Please enter your name.");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
JSFiddle: http://jsfiddle.net/dp1cLh28/6/
I found the solution.
Issue is button id named as submit (button id="submit") conflicting with .submit() function.
When i change the button id, it works!
Change the button id:
<button id='action'>Submit</button>
^ submit > action or whatever
Check your domain whitelist
I had this error and could not solve it until I found out the error was that I simply had not added the correct domain to the domain whitelist.
The domain error does not appear on the console and I had not noticed the tab that displays the error on the page (below):
In my case, I had an input (type="submit") tag in the form instead of a button. The name of the input was conflicting with the submit function.
The solution was to give the input tag a name different from "submit":
<input type="submit" name="anything-except-submit">
I had to name the tag explicitly, because the name was defaulting to "submit" from the type attribute.
It is also important to note that the callback will only be called when the user successfully solves the reCAPTCHA, so if your callback is doing any form validation you must call
grecaptcha.reset();
if the validation fails. That means that the user will have to solve the reCAPTCHA again, but otherwise he would not be able to submit the form after making corrections.
I am trying to submit my form named 'vform' by using javascript and ajax.Here
Button named 'show' is being used to show the 'div' containing form named vform and that form calls codevalidate function and there it submits the form using some ajax code..Where i am getting error is vform.submit().Here's the html and js code(I know error is in if condition but do not know where)
html:
<button id="show" onClick="javascript:codefield(); return false";>Apply for Discount</button>
<div id="apply" style="display:none">Voucher code<br>
<form id="vform" name="vform" action="" method="post" onsubmit="javascript:codevalidate(); return false;" >
<input type="text" name="code" id="code"><br>
<span id="error" style="color:red"></span><br>
<input type="submit" name="btn" value="apply" id="btn" ></form>
</div>
javascript:
function codevalidate()
{
if(document.getElementById('code').value!=="")
{
$.post("couponajax.php",{code:$("#code").val()},
function(data)
{
if(data=='1')
{
//alert("success");
vform.submit();
return true;
}
else
{
document.getElementById('error').innerHTML="You have entered a wrong code!";
return false;
}
});
}
else
{
document.getElementById('error').innerHTML="Code can't be empty!";
return false;
}
return false;
}
codefield function is just displaying the div on onclick event and ajax call is just checking whether the code exists in database or not..if exists returns 1 else 0.
The problem is alert message is being displayed but form is not being submitted. How can I fix this problem?
I think you are missing jquery selector.
Try to replace
vform.submit();
with
$("#vform").submit();
or you can call submit button click event like
$("#btn").click();
You are not selecting the form.
Try changing;
vform.submit();
To:
$("#vform").submit();
Please try this one, works for me.
document.getElementById("vform").submit();
Try this
document.forms["vform"].submit();
Hope this helps.
You don't have to submit form with code.
Just call validation function and control submit flow with preventDefault function.
var codevalidate = function(e) {
if (!validationCode) { // if validation code didn't pass
e.preventDefault(); // prevent form from submitting
}
}
// register callback that will be called when user submits form
document.getElementById("vform").addEventListener('onsubmit', codevalidate);
That way form will be submitted by user only if validation pass.
Also check if your data is actually returning '1' by calling console.log(data);
Form will be submitted to the current address if action is empty, is that ok?
The thing is that:
action attribute of your form element is empty. So it is being submitted but to the same page from which it is calling the .submit() method.
so you should specify action attribute first of all like:
<form id="vform" name="vform" action="vfrom_submit.php" method="post"
onsubmit="javascript:codevalidate(); return false;" >
.....
</form>
Also try changing
vform.submit();
to:
$("#vform").submit();
//OR
// document.getElementById("vform").submit();
// Although vform.submit() can also work.
Hope it helps, cheers :)!
You should use:
document.getElementById("vform").submit();
Update:
Try removing "return false;" from onsubmit attribute and remove "vform.submit();" from the if condition as well.
I'm using ajaxSubmit on my web form. I also need to pop-up a div that shows "Processing the request" with a dimmed background upon user's click on the submit.
The code I'm using right now is like this:
<script type="text/javascript">
$(document).ready(function() {
$("#CustomerService").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "processor.aspx",
success : function() {window.location.replace("Thankyou.aspx")},
failure : function() {}
})
});
</script>
<script type="text/javascript">
function DimScreen()
{
document.getElementById("DimBlackScreen").style.visibility = "visible";
}
</script>
And my HTML part for the submit button:
<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" onclick="DimScreen();" />
Well the problem here is: whether the form passes the validation or not, the pop-up div will always show up, which is not the case I want.
Is there any way to make it detect if the form validation has passed and then display the div?
Many thanks for your help.
If you are using jquery version 1.4 or above try this:
$(document).ajaxStart(function() {
$("#DimBlackScreen").show();
}).ajaxStop(function() {
$("#DimBlackScreen").hide();
});
or if you are using less version of jquery 1.4 try this
$().ajaxStart(function() {
$("#DimBlackScreen").show();
}).ajaxStop(function() {
$("#DimBlackScreen").hide();
});
Remember put all these stuff in document.ready
$(document).ready(function() {
$("input#Send").click(function(e){
e.preventDefault(); //prevent default submit action,, use ajax instead
$('#DimBlackScreen').show();
$("#CustomerService").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "processor.aspx",
success : function() {
$('#DimBlackScreen').hide();
window.location.replace("Thankyou.aspx"); //or $('body').html('Thank you!');
},
failure : function() {}
});// end validationEngine
}); //end click
});//end document.ready
<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" />
Ok, inspired by the other two answers from alsahin and Kundan, I figured it out myself:
The only thing needs to be changed is how ajax handles the failure of validation. So I changed
failure : function() {}
to
failure : function() {document.getElementById("DimBlackScreen").style.visibility = "hidden";}
So that the pop-up "processing" div actually shows every time user clicks on the Submit button, but resets to hidden if the form doesn't pass validation.
I'm happy with my current code, but if you have any better ideas, please let me know.