JavaScript Alerts embedded in PHP blank background

[jeffshead]

I'm not sure if I should post this here or on a JavaScript board.

I have a PHP Web page which contains a few forms that will pop up a JavaScript alert if the user tries to submit any one of the forms without filling in each of the input fields. There is an alert for each field.

The JavaScript is embedded in the PHP. The problem I am encountering is that the page goes blank when any one of the alerts pops up. Once the OK button in the alert is clicked, the page comes back. I just want the page to remain visible in the background when an alert pops up. I guess it has something to do with the page refreshing. Most all of the PHP code (including the JavaScript alerts) is at the beginning of the page, before the HTML starts. I read somewhere that the JavaScript would have to be moved to the end of the page to avoid this issue. I’ve tried and tried, but cannot get it to work.

Here is a sample of the code:

...
if( isset($_POST['addNum']) ) {
	   $Error = false;
	   $sg = $_POST['code'];
		 if (!$sg) {
		    $Error = true;
			print "<script type=\"text/javascript\">\n";
			print "window.alert(\"You must enter a number\")\n";
			print "</script>";
      }
		 $rp = $_POST['rePg'];
		 if (!$Error) {
		    if (!$rp) {
		      $Error = true;
			print "<script type=\"text/javascript\">\n";
			print "window.alert(\"You must enter a page\")\n";
			print "</script>";
     }...

I tried changing it to this:

...
if( isset($_POST['addNum']) ) {
	   $Error = false;
	   $sg = $_POST['code'];
		 if (!$sg) {
		    $Error = true;
?>	
<script type="text/javascript">
   window.alert("You must enter a number")
</script>	
<?
      }
		 $rp = $_POST['rePg'];
		 if (!$Error) {
		    if (!$rp) {
		      $Error = true;
?>	
<script type="text/javascript">
   window.alert("You must enter a page")
</script>
<?
}
...

It functioned just the same, so I then took the JavaScript out of the PHP coding and placed it down lower in the page, just before the closing body tag in the HTML.

I tried both of the following:

<script type="text/javascript">
   window.alert("You must enter a number")
</script>
<script type="text/javascript">
   window.alert("You must enter a page")
</script>

and

<script type="text/javascript">
   window.alert("You must enter a number")
   window.alert("You must enter a page")
</script>

(There's actually many more alerts than listed here.)

Both scenarios functioned the same. The page remains in the background (instead of being blank), but now when the page is loaded for the first time or when one of the fields is left blank and submitted, all of the alerts pop up one by one.

Forgive me if this should be posted on a JavaScript board. I wasn't sure. any help would be greatly appreciated😃

[Weedpacket]

That's because in your first code, you submit the form to the server, and the server sends back the script to create the popups as part of its response - they're on a different page, in other words.

In the other case, you have the script to generate the popups on the same page, but you do nothing to prevent the form being submitted, nor do you check that the user is actually trying to submit the form before running them.

Because this is a JavaScript question ("how do I do client-side validation?") I'll move this thread to the client-side board. That doesn't mean that the checks should not also be done on the server as well, of course, but that's largely no different from what's already here: test the fields; build an error message listing what's wrong with the submission; write the form page out again (with values in fields that are valid); write script to generate an alert containing the error message (one alert box, please; who wants to sit there and click through a whole bunch of them?). Better yet, instead of using alert boxes, highlight invalid fields and write the error messages next to them: alert boxes are so 20th Century 🙂.

[bradmasterx]

Try This It Is Client Side.

<script language="javascript">
 function chkForm (page, number){//You will need to add more.
   if(page.value == ""){
       alert("Please enter a page.");
       page.focus();
       return false;
    }
   if(number.value == ""){
       alert("Please enter a number.");
       number.focus();
       return false;
    }
return true; //All of them have a value
 }
</script>
<form action="processor.php" id="form" name="form" onsubmit="chkForm(document.form.page, document.form.number);">
 <input type="text" id="page" value="" />
 <input type="text" id="number" value="" />
</form>

[jeffshead]

Weedpacket;10891363 wrote:

...Better yet, instead of using alert boxes, highlight invalid fields and write the error messages next to them: alert boxes are so 20th Century 🙂.

I agree, but like most of the folks asking questions here, I have no clue where to begin. Based on the snippit I posted, could you give me an example of how to do it? I can do the logic, but don't know enough to code it. I saw a form that displayed a general warning at the top of the form and actually changed the input labels red and added a small error below the labels that needed attention. That's what I wanted to do, but don't know where to begin changing my code.

bradmasterx;10891373 wrote:

Try This It Is Client Side.

I will give this a "whirl" tonight and post results.

Many thanks to both of you🙂