Fatal编程技术网
  • javascript/
  • Javascript 如何将引导按钮链接到php代码？

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

javascript php html twitter-bootstrap

Javascript 如何将引导按钮链接到php代码？,javascript,php,html,twitter-bootstrap,Javascript,Php,Html,Twitter Bootstrap,我有一个联系我们表单，基本上我想要的是用户点击提交按钮，然后将这些数据存储在服务器上的远程数据库中。问题是我不知道如何将javascript和php链接到按钮 这是我的代码： <html> <head> <title>Contact Us</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https:

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


联系我们
函数验证（）{
var forename=document.getElementById（“forename”）.value；
var姓氏=document.getElementById（“姓氏”）.value；
var comments=document.getElementById（“comments”）.value；
如果（名字==null | |名字==“”）{
警报（“名字为空”）；
返回false；
}
else if（姓氏==null | |姓氏==“”）{
警惕（“姓氏为空”）；
返回false；
}
else if（注释==null | |注释==“”）{
警告（“注释为空”）；
返回false；
}
document.register.submit（）；
}
联系我们
名字
姓
联系我们
提交
在表单POST中使用方法，或者使用处理提交的php文件名获取并添加操作。 示例代码

更多关于post和get函数的信息

和html提交

在表单POST中使用方法，或者使用处理提交的php文件名获取并添加操作。 示例代码

更多关于post和get函数的信息

和html提交

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

<button type="button" action="contactus.php" class="btn btn-success">Submit</button>
这是一本书。注意：我在演示中删除了表单标记中的操作，因为它不知道“contactus.php”是什么

另一个注意事项：如果使用JavaScript函数的唯一目的是验证表单字段是否已填写，那么最好使用

例如：

<input type="text" class="form-control" id="forename" placeholder="Forename" required>
下面是一个演示其工作原理的示例。

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

<button type="button" action="contactus.php" class="btn btn-success">Submit</button>
这是一本书。注意：我在演示中删除了表单标记中的操作，因为它不知道“contactus.php”是什么

另一个注意事项：如果使用JavaScript函数的唯一目的是验证表单字段是否已填写，那么最好使用

例如：

<input type="text" class="form-control" id="forename" placeholder="Forename" required>
这里展示了它的工作原理。

作为初学者，我首先向您推荐。首先，它的打字更少，而且（imho）更容易掌握。您可以在jQuery中编写代码，而幕后jQuery会在运行时将其转换为javascript

因为您使用的是引导（或者您应该拥有它——您的代码缺少它）。按Ctrl+U以查看链接示例中的页面代码。不管怎么说，既然它包含在页面上，你也可以使用它

您的示例代码，已修复：


联系我们
$（函数（）{
$（'#btnsupmit'）。单击（函数（）{
var forename=$（“#forename”）.val（）；
变量姓氏=$（“#姓氏”）.val（）；
var comments=$（“#comments”）.val（）；
如果（名字==null | |名字==“”）{
警报（“名字为空”）；
返回false；
}
else if（姓氏==null | |姓氏==“”）{
警惕（“姓氏为空”）；
返回false；
}
else if（注释==null | |注释==“”）{
警告（“注释为空”）；
返回false；
}
$（'frmContact'）。提交（）；
});
}); //结束文件.ready
联系我们
名字
姓
联系我们
提交
因为您是jQuery的新手，所以需要开始。（这是我自学的地方，它们是免费的）

作为一个初学者，我首先建议你。首先，它的打字更少，而且（imho）更容易掌握。您可以在jQuery中编写代码，而幕后jQuery会在运行时将其转换为javascript

因为您使用的是引导（或者您应该拥有它——您的代码缺少它）。按Ctrl+U以查看链接示例中的页面代码。不管怎么说，既然它包含在页面上，你也可以使用它

您的示例代码，已修复：


联系我们
$（函数（）{
$（'#btnsupmit'）。单击（函数（）{
var forename=$（“#forename”）.val（）；
变量姓氏=$（“#姓氏”）.val（）；
var comments=$（“#comments”）.val（）；
如果（名字==null | |名字==“”）{
警报（“名字为空”）；
返回false；
}
else if（姓氏==null | |姓氏==“”）{
警惕（“姓氏为空”）；
返回false；
}
else if（注释==null | |注释==“”）{
警告（“注释为空”）；
返回false；

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();
}



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



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