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

提问者：小点点

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

我有一个联系我们表单，基本上我想要的是用户点击提交按钮，然后将这些数据存储在服务器上的远程数据库中。问题是我不知道如何将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>

共3个答案

匿名用户

你在错误的标签上有动作。从这里删除它：

<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中使用方法，或者使用处理提交的php文件名获取并添加操作。示例代码

<代码>

更多关于发布和获取功能在这里

和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新手，这里有一些免费的初学者入门教程。（这是我自学的地方，他们是免费的）