CODEWITHSUNDEEP
javascriptphphtmlformspopup
I Need Help
I Need Help

Reputation: 87

Form popup box button action link

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

The other PHP page is looking for this:

if (isset($_POST['submit'])) {

Previously I was having trouble displaying a popup before sending the PHP form to its action page once the sumbit/create button was clicked as the popup box never appeared once the button was clicked. That has now been resolved using the following on the button tag within the form (return false):

<button onclick="Alert.render('You are about to create a new group.'); return false" type="submit">Create</button>

Now the issue I'm faced with is that I'm not able to action link the button to the php page which will add the data the user has entered into a database.

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(); document.getElementById(\'contact\').submit();" name="submit">Continue</button>';
    }
    function createForm()
{
    Alert.render('You are about to create a new group.');
    return false;
}
    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="redirect"></div>
  <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="homepage.php">ProjectNet</a></span></li>
        </div>
        <nav>
          <ul>
            <li><a href="homepage.php">Home</a>
                <ul>
                    <li><a href="findGroup.php">Find A Group</a></li>
                    <li><a href="groupForm.php">Create A Group</a></li>
                    <li><a href="">Find New Members</a></li>
                </ul>
            </li>
            <li><a href="">Members</a></li>
            <li><a href="">Profile</a></li>
          </ul>
        </nav>

            <div class="nav-login">
                <?php
                    if (isset($_SESSION['u_id'])) {
                        echo '<form action="includes/logout.inc.php" method="POST">
                              <button type="submit" name="submit">Logout</button>
                              </form>';
                    } else {
                        echo '<form action="includes/login.inc.php" method="POST"> 
                              <input type="text" name="uid" placeholder="Username/Email">
                              <input type="password" name="pwd" placeholder="Password">
                              <button type="submit" name="submit">Login</button>
                              </form>
                              <a href="signup.php">Sign up</a>';
                    }
                ?>
        </div>
    </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="return createForm()" type="submit">Create</button>
    <!--name="submit"-->
    </fieldset>
  </form>
</div>
</section>
      <footer>
        <div class="wrapper">
        <nav>
          <ul>
            <li><a href="about1.php">About</a></li>
            <li><a>&copy; 2018 ProjectNet</a></li>
          </ul>
        </nav>
        </div>
      </footer>
  </body> 
</html>

Upvotes: 1

Views: 538

Answers (1)

Gynteniuxas
Gynteniuxas

Reputation: 7093

In your form you have this:

<button onclick="Alert.render('You are about to create a new group.'); return false" type="submit">Create</button>

You're returning false, thus preventing from submitting the form, regardless of which option in modal was pressed. To solve this, add something like this:

document.getElementById('dialogboxfoot2').innerHTML = '<button onclick="Alert.ok(); document.getElementById(\'contact\').submit();" name="submit">Continue</button>';

Notice this added part:

document.getElementById(\'contact\').submit();

It should submit the form for you.

Slight improvement:

Button code:

<button onclick="return createForm()" type="submit">Create</button>

And in JavaScript block add a new function:

function createForm()
{
    Alert.render('You are about to create a new group.');
    return false;
}

This will do the same thing but I think it's more eye-catching.

Upvotes: 3

Related Questions