onunload or beforeunload help???

New Coder · December 9, 2008

Hello all,

My javascript knowledge is limited, so I'm not sure what I'm after can be done.

I have a php page with a form that contains 2 text areas for user comments. This page is navigated to from a previous page that contains a number of questions which are saved in a database.

The problem is people are filling in the two text areas on the last page and then just closing the browser thinking that they have auto saved in the db against their answers record (there is a save button after the textareas) which isn't the case. So I am not always getting all the comments made.

If a user clicks the "Save Comments" button the comments are saved and they are redirected to my home page and all is well

I can't have the comment textareas on the same page as the questions for many reasons.

I have looked into onunload and beforeunload but I'm limited on my knowledge.

I currently have:

<Script Language="JavaScript">

window.onbeforeunload = function () {   return "Have you clicked the 'Save Comments' button.  If you haven't, your comments will not be saved."}

</script>

Which is ok, in that if a user goes to close the browser it asks if they have saved, but it is also triggered by the user pressing the "Save Comments" button, which I can see annoying users that do press the save button.

What would be ideal, would be something like:

<head>
<Script Language="JavaScript">
function close_action() 
{
var where_to= confirm("Have you finished your comments?");
if (where_to== true)
{
     window.location="save_comments.php";
}
else
{
return
  }
}
</script>
</head>
<body onUnload="close_action()">

or

<head>
<Script Language="JavaScript">
function close_action() 
{
var where_to= confirm("Have you finished your comments?");
if (where_to== true)
{
     window.location="save_comments.php";
}
else
{
window.location="make_comments.php"; //or window.location=""; to stay on current page
  }
}
</script>
</head>
<body onUnload="close_action()">

but this doesn't work, also save_comments.php needs to revieve some variables from the make_comments.php form. I have also tried window.location="save_comments.php?comments=$comments";

and

window.location="save_comments.php?comments=<?php echo $comments ?>";

Am I close?

Any help much appreciated.

Many Thanks in advance.

RichardRotterdam · December 9, 2008

using two forms is probably not the best way but here is the js solution

js

<script type="text/javascript">
var submitClicked=false;
function submitForm(){
submitClicked=true;
}

window.onbeforeunload = function () {
if(!submitClicked){
	return "Have you clicked the 'Save Comments' button.  If you haven't, your comments will not be saved.";
}
}

</script>

html(you just need the submit button)

<form action="somepage">
	<input onclick="submitForm()"  type="submit" id="submit" name="submit" />
</form>

New Coder · December 10, 2008

Thanks Dj Kat,

That almost works but I didn't mention I already have another script that checks for both textareas being filled in, sorry should have mentioned this.

<form action="save_comments.php" method="post" onsubmit="return formCheck(this);">
<center><h3>Comments</h3>
<br>
<textarea name="comments" cols="60" rows="4></textarea>
<br><br>
<h3>Suggestions</h3>
<br>
<textarea name="suggestions" cols="60" rows="4"></textarea>
<br><br></center>
<input type="submit" value="Save Comments">
</form>

and script:

<script language="JavaScript">
<!--

function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("comments", "suggestions");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Comments", "Suggestions");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
	var obj = formobj.elements[fieldRequired[i]];
	if (obj){
		switch(obj.type){
		case "select-one":
			if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "select-multiple":
			if (obj.selectedIndex == -1){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "text":
		case "textarea":
			if (obj.value == "" || obj.value == null){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		default:
		}
		if (obj.type == undefined){
			var blnchecked = false;
			for (var j = 0; j < obj.length; j++){
				if (obj[j].checked){
					blnchecked = true;
				}
			}
			if (!blnchecked){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
		}
	}
}

if (alertMsg.length == l_Msg){
	return true;
}else{
	alert(alertMsg);
	return false;
}
}
// -->
</script>

Now the problem is if a user fills in one box this script will prompt them to fill out the other and on doing so it must be then changing the property of submitclicked in the other script. therefore if they then close the browser it will close but the comments again aren't saved.

Is there a way round this?

Many Thanks

RichardRotterdam · December 10, 2008

you missed a double quote in the form after rows somewhere dunno where but its in this html code

This is your function combined with mine and its done

html

<form action="save_comments.php" method="post" onsubmit="return formCheck(this);">
   <center><h3>Comments</h3>
   <br>
   <textarea name="comments" cols="60" rows="4"></textarea>
   <br><br>
   <h3>Suggestions</h3>
   <br>
   <textarea name="suggestions" cols="60" rows="4"></textarea>
   <br><br></center>
   <input type="submit" value="Save Comments">
</form>

js

<script language="JavaScript">
<!--
var submitClicked=false;
window.onbeforeunload = function () {
   if(!submitClicked){
      return "Have you clicked the 'Save Comments' button.  If you haven't, your comments will not be saved.";
   }
}

function formCheck(formobj){
   // Enter name of mandatory fields
   var fieldRequired = Array("comments", "suggestions");
   // Enter field description to appear in the dialog box
   var fieldDescription = Array("Comments", "Suggestions");
   // dialog message
   var alertMsg = "Please complete the following fields:\n";
   
   var l_Msg = alertMsg.length;
   
   for (var i = 0; i < fieldRequired.length; i++){
      var obj = formobj.elements[fieldRequired[i]];
      if (obj){
         switch(obj.type){
         case "select-one":
            if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
               alertMsg += " - " + fieldDescription[i] + "\n";
            }
            break;
         case "select-multiple":
            if (obj.selectedIndex == -1){
               alertMsg += " - " + fieldDescription[i] + "\n";
            }
            break;
         case "text":
         case "textarea":
            if (obj.value == "" || obj.value == null){
               alertMsg += " - " + fieldDescription[i] + "\n";
            }
            break;
         default:
         }
         if (obj.type == undefined){
            var blnchecked = false;
            for (var j = 0; j < obj.length; j++){
               if (obj[j].checked){
                  blnchecked = true;
               }
            }
            if (!blnchecked){
               alertMsg += " - " + fieldDescription[i] + "\n";
            }
         }
      }
   }

   if (alertMsg.length == l_Msg){
      submitClicked=true;
  return true;
   }else{
      alert(alertMsg);
  submitClicked=false;
      return false;
   }
}
// -->
</script>

Adam · December 10, 2008

You could improve this script. See you're still popping up saying 'have you saved your changes?' when they may have not changed anything or already saved.

Very simple to implement. Just create a var, say "saved"? When you load the content they are going to change, set it to true. Use an "onchange" event to change the value to "false" as they change the contents. then obviously When you run your "onbeforeunload" function just do a quick check to see if they've already saved or if they've not made changes... if they have don't need to bother with the pop up! Will improve user experience! Just an idea..

A

New Coder · December 10, 2008

Yes thats how ideally I would like it to work, but it's beyond me... ???

Also my first script needs to be in the body section and the new one only works when in the head section...

Cheers

Sign In

onunload or beforeunload help???

Recommended Posts

New Coder

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

New Coder

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

New Coder

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information