CODEWITHSUNDEEP
javascriptphphtmlformspopup
I Need Help
I Need Help

Reputation: 87

Form popup box error

I have a PHP form and its action link is another PHP page which adds the data the user has entered into a database and then redirects them to another page.

I'm trying to display a popup before sending the PHP form to its action page. The problem I'm faced with is that anytime I press the submit/create button, the pop up appears for like a second and then automatically disappears on its own.

Through troubleshooting, I've figured out that the problem arises within the form tag, as when the button is out of the form it performs perfectly.

My code:

<?php
session_start();
?>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#dialogoverlay{
    display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;
    z-index: 10;
}
#dialogbox{
    display: none;
    position: fixed;
    background: #000;
    border-radius:7px; 
    width:550px;
    z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; 
padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; 
color:#FFF; }
#dialogbox > div > #dialogboxfoot{  }
#dialogbox > div > #dialogboxfoot2{ }
</style>
<script>
function CustomAlert(){
this.render = function(dialog){
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    var dialogoverlay = document.getElementById('dialogoverlay');
    var dialogbox = document.getElementById('dialogbox');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH+"px";
    dialogbox.style.left = (winW/2) - (550 * .5)+"px";
    dialogbox.style.top = "100px";
    dialogbox.style.display = "block";
    document.getElementById('dialogboxhead').innerHTML = "Are you sure?";
    document.getElementById('dialogboxbody').innerHTML = dialog;
    document.getElementById('dialogboxfoot').innerHTML = '<button 
onclick="Alert.ok()">Cancel</button>';
    document.getElementById('dialogboxfoot2').innerHTML = '<button 
  onclick="Alert.ok()">Continue</button>';
}
this.ok = function(){
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
<title></title>
 <link rel="stylesheet" href="./css/form.css">
 <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
<div id="dialogboxfoot2"></div>
</div>
</div>
<header>
<nav>
    <div class="main-wrapper">
    <div id="branding">
    <!--  <li><h1><span><a href="index.php">ProjectNet</a></span></li> -->
    <h1>ProjectNet</h1>
    </div>
    <nav>
      <ul>
        <li class="current"><a href="homepage.php">Home</a></li>
        <li><a href="">Profile</a></li>
        <li><a href="">Members</a></li>
        <li><a href="">Inbox</a></li>
        <li><a href="about1.php">About</a></li>
      </ul>
    </nav>
</nav>
</header>

<section id="showcase1">
<div class="container">  
<form id="contact" action="includes/form_process.php" method="POST">
<h3>Creating a Group</h3>
<h4>Please fill out the sections below.</h4>
<fieldset>
  <input placeholder="Project title" type="text" name="name">
</fieldset>
<fieldset>
  <textarea placeholder="Description of the project...." type="text" 
name="message" ></textarea>
</fieldset>
<fieldset>
<button onclick="Alert.render('You are about to create a new group.')" 
name="submit" type="submit">Create</button>
</fieldset>
</form>
</div>
</section>
</body> 
</html>

Upvotes: 0

Views: 230

Answers (1)

eMerzh
eMerzh

Reputation: 625

It seems that you want to "pause" the submit until the user confirms or cancel his request? much like a confirm() will do ?

Then it's a bit more complicated than that, you have to "cancel" the submit first by returning "false" (like after onclick="Alert.render('You are about to create a new group.'); return false" or by calling event.preventDefault()(and adding event to your params)

Then you'll need to work out your "confirm" button so it does something : by resubmitting your form (and letting it go this time) or by doing a redirect or any other methods.

Upvotes: 1

Related Questions