Question

我试图在Bootstrap中验证一个表单，这个工作正常。但是，只要我插入我的PHP代码以将表单数据插入数据库，它就会停止工作。

作为输出，Script不起作用，也会自动禁用提交选项。任何想法为什么会发生这种情况？

 <!-- language: lang-php  -->

<?php 
session_start();
include 'form/db_connection.php';
include 'form/functions.php';

if (isset($_POST['submit']))
{
    //$name = filter_input(INPUT_POST, 'name',FILTER_SANITIZE_STRING);
    //$name=filter_string('name');
    $name = $_POST['name'];

    $sql1 ="INSERT INTO student (name)
    VALUES ('$name')";

    $res1 = mysqli_query($conn, $sql1);  

    if($res1)
    {
        //$last_id = mysqli_insert_id($conn);
        header("Location: successful_message.php");
        //echo 'Successful';
       // . " Last inserted ID is: " . $last_id;
    }
    else 
    {
       // echo "Failed";
        header("Location: form1.php");
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/ecmascript"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<title>Form</title>
</head>
<body>
  <div class="container-fluid">
    <div class="container">
      <form id="contactForm" method="post" action="form1.php" class="form-horizontal">
        <div class="form-group">
          <label class="col-xs-3 control-label">Name</label>
          <div class="col-xs-4">
            <input type="text" class="form-control" name="name" placeholder="First name" />
          </div>
          <div class="form-group">
            <div class="col-xs-9 col-xs-offset-3">
              <button type="submit" name="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>
      </form>
      <script>
      $(document).ready(function() {
        // Generate a simple captcha
        function randomNumber(min, max) {
          return Math.floor(Math.random() * (max - min + 1) + min);
        }
    
        function generateCaptcha() {
          $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
        }
    
        generateCaptcha();
    
        $('#contactForm').formValidation({
          framework: 'bootstrap',
          icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
          },
          fields: {
            firstName: {
              row: '.col-xs-4',
              validators: {
                notEmpty: {
                  message: 'The first name is required'
                },
                regexp: {
                  message: 'Name only contains Letter',
                  regexp: /^[A-Z a-z]*$/
                }
              }
            },
            lastName: {
              row: '.col-xs-4',
              validators: {
                notEmpty: {
                  message: 'The last name is required'
                }
              }
            },
            phoneNumber: {
              validators: {
                notEmpty: {
                  message: 'The phone number is required'
                },
                regexp: {
                  message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
                  regexp: /^[0-9\s\-()+\.]+$/
                }
              }
            },
            email: {
              validators: {
                notEmpty: {
                  message: 'The email address is required'
                },
                emailAddress: {
                  message: 'The input is not a valid email address'
                }
              }
            },
            message: {
              validators: {
                notEmpty: {
                  message: 'The message is required'
                },
                stringLength: {
                  max: 700,
                  message: 'The message must be less than 700 characters long'
                }
              }
            },
            captcha: {
              validators: {
                callback: {
                  message: 'Wrong answer',
                  callback: function(value, validator, $field) {
                    var items = $('#captchaOperation').html().split(' '),
                        sum   = parseInt(items[0]) + parseInt(items[2]);
                    return value == sum;
                  }
                }
              }
            }
          }
        })
        .on('err.form.fv', function(e) {
            // Regenerate the captcha
            generateCaptcha();
        });
      });
    </script>
  </div>
  <!--End container -->
</div>
<!-- End container-fluid -->
</body>
</html>

脚本和查询在Bootstrap中不起作用

0 个答案: