At the bottom of my webpage, I have a submit button. I've used this code:
<a onClick="myFunction(); return false;" href="testpage.html">Submit</a>
What I'm trying to do is when my function is called, I'm checking for validation. If it's false, my function raises an alert and the user doesn't leave the current page...which is what I want. When its true though...nothing changes. When it's true I want them to go to the next link.
function myFunction() {
if (localStorage.length != 3) {
alert("Missing Values");
} else {
break;
}
}
It goes to the next link when I put in break, but now the alert doesn't get called even if it's requirements are met. Moreover, whey does the break in the else block get called even when the if block requirements are met?
Well return false cancels the action. So if you do not want to stop the link, you need to remove that.
<a onclick="return myFunction();" href="testpage.html">Submit</a>
Now return true or false from myFunction
function myFunction() {
if (localStorage.length != 3) {
alert("Missing Values");
return false;
}
return true;
}
Rewrite your html to <a onClick="myFunction()" href="testpage.html">Submit</a> and function to:
function myFunction() {
if (localStorage.length != 3) {
event.preventDefault();
}
}
See Fiddle: https://jsfiddle.net/ermakovnikolay/L0q7ocgg/
Related
I have a web form that has a sales force "Web-To-Lead" form action. The end goal is to have the form submit like normal while also loading pdf into a new page.
I have two validations set up for certain form items.
The first one is a captcha validation which looks like so:
var allow_submit = false
function captcha_filled () {
allow_submit = true;
}
function captcha_expired () {
allow_submit = false
}
function check_captcha_filled (e) {
console.log('verify captcha')
if (!allow_submit) {
alert('ERROR: Please verify you are human by filling out the captcha')
return false
}
captcha_expired()
return true
}
(This works as expected.)
The second validation I have is for an input to be :checked in order for the form to submit. That code is as follows:
function fnSubmit() {
if($("input:checkbox[id='chk']").is(":checked") == false){
alert("You must agree to collect and use your personal information.");
return false;
}
}
(This also works as expected.)
The problem comes with trying to integrate my pdf_Download() function while maintaining those validations. Because the form action is already reserved for the web-to-lead, I decided to use an onclick EventListener that generates a new window to open with the desired location. The location uses a <?=$_REQUEST in PHP.
Below is a minimal example of the form and the js I have attempted so far to make this work.
<form action="web-to-lead" method="POST" onSubmit="return fnSubmit() & check_captcha_filled() & pdf_Download()">
<button class="def_btn bluest" name="submit">Contact</button>
<script>
function pdf_Download(e) {
if($("input:checkbox[id='chk']").is(":checked") == false || !allow_submit == false) {
e.preventDefault()
return false
} else {
document.querySelectorAll('button.bluest').addEventListener("click").window.open('<?=$_REQUEST['bf_file']?>');
return true
}
}
</script>
If something is unclear please let me know.
I believe it will work with this
If it doesn't work please add screenshot devtools I will correct the answer
<form action="web-to-lead" method="POST" onSubmit="fnSubmit() && check_captcha_filled() && pdf_Download()">
<button class="def_btn bluest" name="submit">Contact</button>
<script>
function pdf_Download(e) {
if($("input:checkbox[id='chk']").is(":checked") == false || !allow_submit == false) {
e.preventDefault()
return false
} else {
window.open("<?=$_REQUEST['bf_file']?>");
return true
}
}
</script>
When I am Clicking on button of asp.net then on client click I am disabling that clicked button then server side click event is not firing.
My code is as following:
<asp:Button ID="ButtonSend2" runat="server" CssClass="CommonButtonStyle" Text="Send Message" OnClientClick="this.disabled='true';return OnClickSendEmail();"
OnClick="btnSend_Click" ValidationGroup="ValidationGroupCompose" />
and This is my Java script code:
function OnClickSendEmail() {
var value = document.getElementById('CE_ctl00_ContentMain_TextArea_ID').getHTML().replace(/ /g, "").trim();
if (value == "" || value == undefined) {
$j('#ctl00_ContentMain_lblMessage').text('Message body can\'t be blank!');
$j('#ctl00_ContentMain_lblMessage').show()
return false;
} else {
$j('#ctl00_ContentMain_lblMessage').text('');
console.log("Value is returing true");
return true;
}
}
Once the button is disabled, the postback is not made. You could re-enable the button at the end of the processing but there is another problem: the display will not be updated when the browser is busy processing OnClickSendEmail(), so the button will never look disabled.
Here is a possible solution, which involves canceling the postback at first and processing the command asynchronously:
<asp:Button ID="ButtonSend2" runat="server" OnClientClick="this.disabled = true; setTimeout(OnClickSendEmail, 0); return false;" ... />
The postback is then triggered with __doPostBack at the end of the lengthy processing:
function OnClickSendEmail() {
var value = document.getElementById('CE_ctl00_ContentMain_TextArea_ID').getHTML().replace(/ /g, "").trim();
if (value == "" || value == undefined) {
$j('#ctl00_ContentMain_lblMessage').text('Message body can\'t be blank!');
$j('#ctl00_ContentMain_lblMessage').show()
} else {
$j('#ctl00_ContentMain_lblMessage').text('');
console.log("Value is returing true");
__doPostBack('<%= ButtonSend2.UniqueID %>', '');
}
}
On your javascript code, there are two points that can cause not firing at the end. I write on the code the possible points. Also you have include it on ValidationGroupCompose validation, are you sure that is not stopped from there ?
function OnClickSendEmail() {
// !!! if the element not found is throw an error here and not continue at all.
var value = document.getElementById('CE_ctl00_ContentMain_TextArea_ID').getHTML().replace(/ /g, "").trim();
if (value == "" || value == undefined) {
$j('#ctl00_ContentMain_lblMessage').text('Message body can\'t be blank!');
$j('#ctl00_ContentMain_lblMessage').show()
// !!!! if comes here and return false, then is NOT firing, not continue.
return false;
} else {
$j('#ctl00_ContentMain_lblMessage').text('');
// !!!! if comes here and you not use a browser that support the console, function, is thrown an error and not continue to fire up.
console.log("Value is returing true");
return true;
}
}
Debug your javascript to see whats going wrong, also remove the console.log from your final code.
<script>
function someFunc() {
if (1==2) {
return true;
} else {
alert("Not submitting");
return false;
}
}
</script>
This is from stackoverflow here
prevent form submission (javascript)
I want to know what the purpose of the obvious false statement 1==2 returns true is for?
In general, to stop a form from submitting you would need to do two things:
Place an "onsubmit" event on the form tag
define the event handler in javascript and return false in that function
So, basically, in HTML you would need:
<form ... onsubmit="return someFunc()">
And in the javascript code you would need:
function someFunc() {
return false;
}
The part with 1 == 2 its for developing purposes only i would imagine, just a mechanism of making the forms to never submit.
When moving on from the developing environment this should be done in a more clever configurable way.
You might as well have a function like this:
function someFunc() {
if (1 > 0) {
return true;
} else {
alert("Not submitting");
return false;
}
}
That validation is only meant to always stop the from from submitting.
Or, a function like this:
function someFunc() {
alert("Not submitting");
return false;
}
I am attempting to include an If statement in some Javascript on my .aspx page.
I declare FinishedPacking at the beginning of the page as False. Then when a user clicks the orderSubmit button, the if Statement evaluates if the value is indeed false, if so, display an alert. So far the if statement does not work. If I use just the alert with no if statement it displays the alert:
var FinishedPacking = false;
$("#orderSubmit").click(function (e) {
if (FinishedPacking = false) {
alert("The order is not finished.")
}
ClearScreen();
GetOrder();
}):
As stated if I do not include the if statement, the alert works when I click the order button. Not sure why this simple If statement is not being picked up.
You need the double-equals
if (FinishedPacking = false)
should be
if (FinishedPacking == false)
Try this
var FinishedPacking = false;
$("#orderSubmit").click(function (e) {
if (FinishedPacking == false) {
alert("The order is not finished.")
}
ClearScreen();
GetOrder();
}):
You need 2 ='s signs
if (FinishedPacking == false) {
You are trying to ASSIGN false to the variable FinishedPacking inside your condition (which is wrong) you want to COMPARE the values.
I have 3 javascript functions:
validateClk(), validateAmPm() and getClks()
And on two occurring events, they get executed as follows:
OnChange - executes validateClk() and validateAmPm()
OnClick - executes getClks() (getClks() returns a boolean value)
All 3 functions run correctly, but the problem is, after getClks() has finished execution and returns a boolean, the next function postClocks() doesn't run. I'm very sure that the code for postClocks() is correct as well. If I don't use the return statement for getClks() then the getClks() function doesn't work as expected.
Please help :(
<script type='text/javascript'>
function validateClk() {
....
var clks = clocks.value;
if (clks == "") {
alert('Enter time');
}
else { ... }
}
</script>
<script type='...'>
function validateAMPM() {
...
var ampm= ap.value;
if (ampm=="") {
alert('Enter am or pm');
}
}
</script>
<script type='text/...'>
function getClks() {
var clks= clock.value;
var ampm= ap.value;
if (clks==" && ampm="") {
alert('Enter time and am/pm');
return false;
}
else { ... }
return true;
}
</script>
<... onChange="validateClk(); validateAmPm();" />
<... button label="Submit" onClick="return getClks(); postClocks(); return false;" />
It's because you explicitly coded a return in there.
return getClks();
postClocks();
return false;
That code will always just exit after that first return statement. I suggest removing it.
have all of your custom functions return boolean then change the onclick event to this:
onClick="if(!getClks() || !postClocks()) return false;"
assuming you don't want to continue if invalid
You wrote
onClick="return getClks(); postClocks(); return false;"
You have to remove the first "return".