个人中心
gpt4 book ai didi

javascript - 表单弹出框按钮操作链接

转载 作者：行者123 更新时间：2023-11-30 11:21:43 25 4
gpt4 key购买 nike

我有一个 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>

最佳答案

在你的表单中你有这个:

<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 block 中添加一个新函数:

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

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

关于javascript - 表单弹出框按钮操作链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49599879/

25 4 0
文章推荐： java - 如何使用 Powermockito 以便跳过私有(private)无效方法
文章推荐： ios - 我如何处理对单个按钮的多次单击操作以进行 api 调用并从 api 获取真实响应
文章推荐： java - BIRT 报告未释放与数据库的连接？
文章推荐： ios - 如何使用 if 语句来确定在 tableView 中使用哪个数组？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com