Question

我有一个PHP表单，其操作链接是另一个PHP页面，它将用户输入的数据添加到数据库中。

另一个PHP页面正在寻找：

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

之前我在点击sumbit / create按钮之前将PHP表单发送到其操作页面时显示弹出窗口时遇到问题，因为单击该按钮后弹出框从未出现过。现在已经在表单中的按钮标记上使用以下内容解决了这个问题（返回false）：

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

现在我遇到的问题是我无法将按钮链接到php页面，这将把用户输入的数据添加到数据库中。

我的代码：

    <?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>

Answer 1

在你的表格中你有这个：

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

您正在返回false，从而无法提交表单，无论模式中的哪个选项被按下。要解决此问题，请添加以下内容：

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

请注意这个增加的部分：

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

它应该为您提交表格。

轻微改进：

按钮代码：

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

在JavaScript块中添加一个新函数：

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

这将做同样的事情，但我认为它更引人注目。

表单弹出框按钮操作链接

1 个答案: