We have a requirement that if a user clicks on any link, he should not be able to click on any other link.to achieve this, we have written a java script with incrementing counter.In case , if a user has already clicked on any link we are showing a alert box with some message.On IE its working fine, In Firefox , I am getting the alert for second click but firefox does not stop the processing of first request and refreshes the page even if alert box is untouched.
We are submitting the forms through explicit java scripts.
Hi All PFB the snippets
<script>
var counter = 0;
function incrementCount(){
if(counter>0){
alert('Your request already in progress. Please wait.');
return false;
}else{
counter=counter+1;
return true;
}
}
</script>
Form submission script:
<script>
function fnTest() {
if(incrementCount()){
document.FormName.method = "POST";
document.FormName.action = "SomeURL";
document.FormName.submit();
}else{
return false;
}
}
</script>
Link through which we are submitting the form
<span>Test</span>
Your question is unclear. If a user clicks on a submit button he should not be able to click a link? You'll need to post your code.
With regards to the form post my guess is you didn't return false onsubmit
"On IE its working fine, In Firefox ,
I am getting the alert for second
click but firefox does not stop the
processing of first request and
refreshes the page even if alert box
is untouched"
Well, what's wrong. Firefox is submitting the first request as you want and it shows an alert on the second click. How is IE different? Is FF doing a double submit?
PS: You dont really need to use a counter. Use this code :
var handlers = {
alert : function(){
alert('Your request is already in progress. Please wait.')
return false
},
submitForm : function(){
this.onclick = handlers.alert //this refers to the a tag
document.FormName.submit()
}
}
document.getElementById('mysubmitlink').onclick = handlers.submitForm
And on your link becomes:
`<span>Test</span>`
You can allways return false on your onsubmit call.
Related
I am attempting to simply capture when my form is dirty and if it has been changed, alert the user before they leave the page without saving.
Here is my current code:
<script>
var form = $('#MyForm'),
originalForm = form.serialize()
$(window).bind('beforeunload', function () {
if (form.serialize() != originalForm) {
return 'You have unsaved changes';
}
});
</script>
Nothing happens above. I can use beforeunload method just fine until I attempt to add the "dirty" field check, then nothing occurs.
Any help?
I have a simple JS statement, which kind of "protects" me from using special characters in a login form on my website:
$("#login_button").click(function(){
formChecker();
});
function formChecker() {
var checkLogin = document.forms["loginForm"]["username"].value;
if ((checkLogin.indexOf("!") > -1) || (checkLogin.indexOf("#") > -1) || (checkLogin.indexOf("#") > -1)) {
alert("Special characters not allowed! Please use A-Z and numbers.");
document.location = "http://mywebsite.com/";
}
}
It works fine in Chrome. Whenever someone is using one of these characters, he is getting redirected instantly, so the php login script is not executed.
The problem occures when I am using it in Internet Explorer. It actually redirects my page but the php script is executed anyway. I have also tried window.location but it doesnt work at all in IE. What is the problem with this browser? Is the scipt priority different in different browsers?
What I mean is that on IE, even though the user is redirected, when he comes back to the website, he is logged in, but he shouldnt be. The chrome browser does not log in the user because page is redirected and it is how it should work.
This is not how to do form validation. There is no guarantee that click will be called on the button (eg the form might be submitted by pressing Enter); you aren't preventing the form from being submitted by doing a redirect (it's a race condition which might happen first); and also alert-and-redirect is pretty user-hostile.
You should be picking up the submit event on the form itself, and cancelling the event if you don't want the form to submit. For example add a div with id="formErrorMessage" to the page and then:
var goodUsernamePattern = /^[a-zA-Z0-9_-]+$/;
$('#loginForm').on('submit', function(event) {
if (!goodUsernamePattern.test(this.username.value)) {
event.preventDefault();
$('#formErrorMessage').text('Please enter a good username blah');
}
});
I have an alert where if the answer is OK then it should redirect the user to a different page and if they click cancel they should stay on the page. But no matter what button they press it will redirect them to the new page. What is going on?
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
window.location.replace = "send_PhysiologicalMeasures.html";
}
}
</script>
Your HTML button is wrapped in an a tag, which is effectively a link. a elements will always take you to their link specified in href, so just remove that a element: change your HTML to:
<button class="button PhysiologicalMeasures" onclick ="validation()">Record Physiological Measures</button>
Another method would be to change the link's onclick to return the status:
Link
and the JS:
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
return true;
}
return false;
}
</script>
By returning false, you will prevent the execution of the link, and returning true will allow the link to work.
You can see it here: https://jsfiddle.net/am0adszu/
In checkout page of my magento store, I need to clear some inputs when an alert box is showed and user press OK. Is possible to do that?
I have no control over the javascript alert. So I think in a script that detect an alert with a specific message and clear inputs when button of that alert is clicked.
UPDATE
Fixed!
file: opcheckout.js
line: 888
I add location.reload(); because document.location.reload(true); not work on IE. Thanks everybody!
Probably try overriding default alert and write a custom function like below,
var c_alert = alert;
window.alert = function (str) { //override default alert
c_alert(str + ' my message');
location.reload();
//or write code to clear input fields here
}
//below seems to be triggered from somewhere where you don't have control.
alert('test');
Javascript
if(confirm('your confirmation text')){
document.location.reload(true);
}
Make it refresh after the alert. The javascript code shouldn't execute before the alert is gone
I need to submit a form to a new window and then submit slightly altered values to the same form in the original window. I have the following function to do that.
//Now lets create the page making function!
function createInternetPage() {
//Start by checking to see if the internet page has been requested.
req_int = document.getElementById("marterial_internet").checked;
if (req_int == true){
//If it has, create the internet page.
//Send the completed form to submit in a new window, creating the broadcast page.
document.getElementById("new_material").setAttribute("target","_blank");
document.forms["new_material"].submit();
//Add "(Internet)" to the current form title
var title = document.getElementById("material_title").value;
var title_new = title + " (Internet)";
title = document.getElementById("material_title").value = title_new;
//Then submit the form on the existing window to make the internet page.
document.getElementById("new_material").setAttribute("target","_self");
document.forms["new_material"].submit();
}
//If it has not been requested then just submit the normal form.
else {
//alert("NOT Checked");
document.getElementById("new_material").setAttribute("target","_self");
document.forms["new_material"].submit();
}
}
Everything work great EXCEPT that the form on the original window never gets submitted. It changes the material_title value to add " (Internet)" after it but doesn't submit the form.
Any ideas why this is and a work around to get this working?
EDIT:
When adding a setTimeout delay, see below, the same thing is happening. Everything runs except for the last form submit.
function delay() {
//Send the completed form to submit in a new window, creating the broadcast page.
document.getElementById("new_material").setAttribute("target","_blank");
document.forms["new_material"].submit();
}
function delay2(){
var title = document.getElementById("material_title").value;
var title_new = title + " (Internet)";
title = document.getElementById("material_title").value = title_new;
//Then submit the form on the existing window to make the internet page.
document.getElementById("new_material").setAttribute("target","_self");
document.forms["new_material"].submit();
}
//Now lets create the page making function!
function createInternetPage() {
//Start by checking to see if the internet page has been requested.
req_int = document.getElementById("marterial_internet").checked;
if (req_int == true){
//If it has, create the internet page.
delay()
//Add "(Internet)" to the current form title
setTimeout('delay2()',10000);
}
//If it has not been requested then just submit the normal form.
else {
//alert("NOT Checked");
document.getElementById("new_material").setAttribute("target","_self");
document.forms["new_material"].submit();
}
}
You do not give enough time for the form to do the actions. You need to break up the requests. Use a setTimeout to do the second action.
If you are submitting to the same domain, you can always use Ajax to make the first submission and not open up a new window.
Better, is have the server handle the requests and make a second submission.