如何将引导按钮链接到php代码

How to link bootstrap button to php code?

本文关键字：链接 php 代码按钮更新时间：2023-09-26

我有一个联系我们的表格，基本上我想要的是让用户单击提交按钮，然后将此数据存储在服务器上的远程数据库中。问题是我不知道如何将javascript和php的东西链接到按钮。

这是我的代码：

<html>
<head>
    <title>Contact Us</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head> 
<body>
<script type="text/javascript">
    function verify(){
        var forename = document.getElementById("forename").value;
        var surname = document.getElementById("surname").value;
        var comments = document.getElementById("comments").value;
        if(forename == null || forename == ""){
            alert("Forename is empty");
            return false;
        }
        else if(surname == null || surname == ""){
            alert("Surname is empty");
            return false;
        }
        else if(comments == null || comments == ""){
            alert("Comments is empty");
            return false;
        }
        document.register.submit();
    }
    </script>
    <div class="container">
        <h1>Contact Us</h1>
    </div>
    <form>
        <div class="container center_div">
            <div class="panel panel-default">
                <div class="row">
                <fieldset class="form-group">
                    <label for="Forename">Forename</label>
                    <input type="text" class="form-control" id="forename" placeholder="Forename">
                </fieldset>
                <fieldset class="form-group">
                    <label for="Surname">Surname</label>
                    <input type="text" class="form-control" id="surname" placeholder="Surname">
                </fieldset>
                <fieldset class="form-group">
                    <label for="Contact Us">Contact Us</label>
                    <input type="text" class="form-control" id="comments" placeholder="Comments">
                </fieldset>
                <div class="row">
                    <div class"col-md-2">
                        <button type="button" action="contactus.php" class="btn btn-success">Submit</button>
                    </div>
                </div>  
            </div>
        </div>
    </form> 
</body>
</html>

您对错误的标签执行了操作。从此处删除它：

<button type="button" action="contactus.php" class="btn btn-success">Submit</button>

把它放在这里：

<form action="contactus.php">

另外，将您的按钮从类型"按钮"更改为"提交"

<button type="submit" class="btn btn-success">Submit</button>

这只是语义，但也许是一个重要的区别：按钮不是引导按钮。这是一个 HTML 按钮。你正在使用引导 css 来设置它的样式。

更新：OP询问如何让"JavaScript的东西"工作。这是一种方法：

我喜欢 id，所以在你的表单标签中添加一个 id。我也想明确表单提交方法，因此也将其添加到表单标签中：

<form id="myForm" action="contactus.php" method="post">

神奇的JavaScript东西

var form = document.forms.myForm
form.onsubmit = function() {
          var forename = document.getElementById("forename").value;
          var surname = document.getElementById("surname").value;
          var comments = document.getElementById("comments").value;
          if (forename == null || forename == "") {
            alert("Forename is empty");
            return false;
          } else if (surname == null || surname == "") {
            alert("Surname is empty");
            return false;
          } else if (comments == null || comments == "") {
            alert("Comments is empty");
            return false;
          }
          document.register.submit();
}

这是一个小提琴演示。注意：我从演示中的表单标签中删除了该操作，因为它不知道"contactus.php"是什么。

另一个注意事项：如果您只是想使用 JavaScript 函数来验证表单字段是否已填写，那么最好使用所需的 HTML 输入属性。

例如：

<input type="text" class="form-control" id="forename" placeholder="Forename" required>

这是一个小提琴演示，展示了它是如何工作的。

在

表单中使用方法POST或GET并添加具有处理提交的php文件名的操作。示例代码

<form action="example.php" method="post" > <input type="text" name="user_name" placeholder="Name"> <input type="text" name="user_surname" placeholder="Surname"> <input type="email" name="user_email" placeholder="Email"> <input type="password" name="user_pass" placeholder="Password"> <input type="submit" name="submit"> </form>

有关发布和获取功能的更多信息，请单击此处

和 HTML 在此处提交

作为一个初学者，我首先建议你使用jQuery而不是纯粹的javascript。一方面，它打字要少得多，而且（恕我直言）更容易掌握。你在jQuery中编码，在幕后jQuery在运行时将其转换为javascript。

由于您使用的是引导程序，因此您已经加载了jQuery库（或者您应该拥有它 - 您的代码缺少它）。按 Ctrl+U 查看链接示例中的页面代码。无论如何，由于它包含在页面上，因此您不妨使用它。

您的示例代码，已修复：

jsFiddle 演示

<html>
<head>
    <title>Contact Us</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"   integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="   crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function(){
            $('#btnSubmit').click(function(){
                var forename = $("#forename").val();
                var surname = $("#surname").val();
                var comments = $("#comments").val();
                if(forename == null || forename == ""){
                    alert("Forename is empty");
                    return false;
                }
                else if(surname == null || surname == ""){
                    alert("Surname is empty");
                    return false;
                }
                else if(comments == null || comments == ""){
                    alert("Comments is empty");
                    return false;
                }
                $('#frmContact').submit();
            });
        }); //END document.ready
    </script>
</head> 
<body>
    <div class="container">
        <h1>Contact Us</h1>
    </div>
    <div class="container center_div">
        <form id="frmContact" action="contactus.php" method="post">
            <div class="row">
                <fieldset class="form-group">
                    <label for="Forename">Forename</label>
                    <input type="text" class="form-control" id="forename" placeholder="Forename">
                </fieldset>
            </div><!-- .row -->
            <div class="row">
                <fieldset class="form-group">
                    <label for="Surname">Surname</label>
                    <input type="text" class="form-control" id="surname" placeholder="Surname">
                </fieldset>
            </div><!-- .row -->
            <div class="row">
                <fieldset class="form-group">
                    <label for="Contact Us">Contact Us</label>
                    <input type="text" class="form-control" id="comments" placeholder="Comments">
                </fieldset>
            </div><!-- .row -->
            <div class="row">
                <div class="col-xs-8">&nbsp;</div>
                <div class="col-xs-4">
                    <button id="btnSubmit" type="button" class="btn btn-success">Submit</button>
                </div>
            </div><!-- .row -->
        </form>
    </div><!-- .container -->
</body>
</html>

由于您不熟悉jQuery，这里有一些免费的初学者级教程可以帮助您入门。（这是我学习自己的地方，他们是免费的）