Member Avatar for mundetas

i have a form that on post it runs a php page.But when the result is successful it opens a notification page. The problem is that it opens both the php page and the notification all I would like to do is to show the nofication page. php page runs the confirmation then if the result is successful then the nofication is used. I used "window.open" in javascript.Please can someone help

  • 3 Contributors
  • 2 Replies
  • 102 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by essential

Dani AI

Generated

— the behavior is normal: the form submission is navigating the main window to the PHP action while the page’s JavaScript also opens a new window, so both appear. ’s idea to navigate the current window is a valid option, and ’s popup helper already implements a pattern that opens/updates a secondary window. The simplest decision is whether the main page should navigate at all. If it should not, stop the form’s navigation and send the data in the background; if it should, let the server respond or redirect the browser to the notification.

A reliable client-side pattern is: prevent the default submit, post with fetch/XHR, and show the notification only after a successful response. Because some browsers block popups that are opened asynchronously, open a small blank popup synchronously on submit and set its location once the server reply arrives. Example:

form.addEventListener('submit', function (e) {
  e.preventDefault();
  const popup = window.open('', 'notify', 'width=400,height=300'); // opens synchronously
  fetch(this.action, { method: 'POST', body: new FormData(this) })
    .then(r => r.json())
    .then(data => {
      if (data.success) popup.location = 'notification.php';
      else { popup.close(); /* handle error */ }
    })
    .catch(() => popup.close());
});

Alternatives: submit the form to a hidden iframe (keep the main page unchanged—see the form target attribute), or let the server send an HTTP redirect so the browser replaces the main window with the notification (PHP header('Location: ...')). References: fetch usage (MDN), event.preventDefault (MDN), window.open behavior (MDN), form target attribute (MDN), PHP header (php.net).

Recommended Answers

All 2 Replies

Member Avatar for Menster

Hi there,
If you don't want to display two pages, try using "window.location", instead of "window.open".

Member Avatar for essential

You could try this:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

div { 
   padding : 0; 
   margin : 0; 
   border : none; }


/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var win;
var popUp = function( mypage, myname, w, h ) {

   var winW = (( screen.width ) ? screen.width : (( window.clientWidth ) ? window.clientWidth : window.innerWidth ));

   var winH = (( screen.Height ) ? screen.Height : (( window.clientHeight ) ? window.clientHeight : window.innerHeight ));

   w = (( w ) ? (( winW ) - w ) : winW );
   h = (( h ) ? (( winH ) - h ) : winH );
   var opened = "active";

   var winprops = "";
   winprops += "width=" + w;
   winprops += ", height=" + h;
   winprops += ", top=0, left=0";
   winprops += ", scrollbars=yes";
   winprops += ", menubar=yes";
   winprops += ", toolbar=yes";
   winprops += ", resizable=yes"; 
   winprops += ", location=yes";
   
   if ( window.status === mypage ) {
      if ( typeof win !== "undefined" ) {
         if ( typeof (( win.opener ) ? win.opener : win.parent ) !== "undefined" ) { 
         win.focus();
         return false;
         } else {
         win = window.open( mypage, target = opened, myname, winprops );
         win.focus();
         return false;
         }
      } else { 
      win = window.open( "", target = opened, myname, winprops );
      win.focus();
      return false; 
      }      
   } else if ( window.status !== mypage ) {
      if ( typeof win !== "undefined" ) {
         if ( typeof (( win.opener ) ? win.opener : win.parent ) !== "undefined" ) {
         win.location.href = mypage;
         window.status = mypage;
         win.focus();
         return false;
         } 
      }
   } win = window.open( mypage, target = opened, myname, winprops );
     window.status = mypage;
     return false;
};
var validate = function( form ) {
   if ( form.txt.value ) {
   popUp("notification.php", "Your Title", 250, 250 );
   return true; 
   } alert( "Please enter some text!" );
   form.txt.focus();
   return false;
};
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testform" name="tesform" action="./test.php" method="post" onsubmit="return validate( this );">
<div>
<label for="txt">Test field: <input type="text" id="txt" name="txt" size="30" value="" /></label> <input type="submit" value=" -submit- " /></div>
</form>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.