Confirm alert when leaving page if form is filled - javascript

I need help. I want to display confirm alert if user leave page and if form is filled or at least some of the fields on form are filled. I have following code that is functioning in Chrome but not working in Firefox. Also the alert is displayed even when the form fields are empty.
Following is my code,
$(window).bind('beforeunload', function () {
return ''; //Are you sure you want to leave?';
});
So I need help so I can produce alert in Firefox, and all other browsers when form is completely or partially filled but not produce any alert when form is empty. I tried making use of viewstate. Checking if viewstate value is different then produce alert, but it's not working as I expected
another piece of code I tried is
window.onbeforeunload = function (e) {
var message = "Your confirmation message goes here.",
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
};
But the above code does not check if form is filled or not. I want alert when form is partially or completely filled

I didnt test this but here is a quick shot at it:
$(window).bind('beforeunload', function () {
$('input').each(function () {
if(this.value.length > 0){
alert('you entered data');
return false;
}
});
});

This should work, just give a try.It will take care of empty spaces also.
$( window ).unload(function() {
if(!$.trim(this.value).length) {
alert('Fill Data')
}
});

Related

Dirty form check - beforeunload confirmation not working

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?

creating jquery function that redirects focus to input if blank, otherwise perform normal search

i am working on a jquery script for normal wordpress search form, where if user does not type anything in search the focus() goes to the input field and stops the search to happen, otherwise let the search run normally when something is typed in.
i have the following script that works for the if check and if nothing is typed in, the focus() is redirected. but my problem now is when a normal search happens, the search input button is not clicking/working. when i remove e.preventDefault(); the search button then works, but the if check on if nothing is typed in does no work because by the time the click is checked, the page has refreshed. i have to add e.preventDefault() in order for my if to check and run. if i am using e.preventDefault() incorrectly, or you have any insight into this issue as a whole, i would greatly appreciate it.
jQuery(document).ready(function($) {
var $searchField = $('.search-field'),
$searchFieldValue = $searchField.val();
$('.search-submit').click(function(e){
console.log($searchField);
console.log($searchFieldValue);
if ($searchFieldValue === '') {
e.preventDefault();
$searchField.get(0).focus();
}
})
});
You should be getting the value when someone clicks, not just on initial pageload, otherwise you won't get the changed value
jQuery(document).ready(function($) {
$('.search-submit').click(function(e){
var $searchField = $('.search-field'),
var searchFieldValue = $searchField.val();
if (searchFieldValue === '') {
e.preventDefault();
$searchField.get(0).focus();
}
});
});

Windows alert javascript with redirect function

This is my script
<script>
function myAlert() {
alert("You have changed your username, you will be logged out in order changes to be applied");
}
</script>
and this is my button
<input type="submit" value="Save" name="btnPass" class="button" onclick="myAlert()";/>
I wanted to know if there's a way how to add a redirect script when the "okay" button at the alert is click. how can i add it on my script? how can i add it on my script? thanks!
Use confirm instead of alert
The Window.confirm() method displays a modal dialog with an optional message and two buttons, OK and Cancel.
function myAlert() {
var confirmed = confirm("You have changed your username, you will be logged out in order changes to be applied");
// If OK button is clicked
if (confirmed) {
window.location.href = 'google.com';
}
return false; // To stop form from submitting
}
#Tushar is correct on using the confirm dialog. Below is a modified version of his answer sure to work
function myAlert() {
var confirmed = confirm("You have changed your username, you will be logged out in order changes to be applied");
// If OK button is clicked
if (confirmed == true) {
window.open("path-to-logout script","_self");
}
}

alerting users before they leave page if they filled some fields

I want to use two javascript events: onbeforeunload and inside it I need to use onhashchange. The point is on leaving the page if user has filled some fields then the confirmation message appear warning user whether they want to stay on page or leave.
My code is following
window.onbeforeunload = function (e) {
window.onhashchange = function (r) { return ''; }
};
But the above code does not seem to be working? what am I doing wrong?
[Updated]
Again, what I am trying to achieve is I want to alert a user if the leave the page and if they have filled some fields on the page
You can try
window.onbeforeunload = function (e) {
if (content on page changed) { confirm("Do you want to leave page?") }
};
window.onhashchange = function (r) { if (content on page changed) { confirm("Do you want to leave page?") } }
I have just given pseudo code, you can replace with actual code.
Basic mistake is you are trying to bind event onhashchange in onbeforeunload.

Firefox submitting form even in the case of alerts

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.

Categories

Resources