在提交链接到php中的其他页面后保持模态打开

时间：2018-02-28 13:44:23

标签： javascript php jquery html bootstrap-modal

我搜索了所有可能的答案，但我找不到合适的答案。 我有一个html页面，我想要显示模态窗体。这个表单在另一个用php编写的页面中。模态正在运行，它也是与数据库的连接。但是当我点击提交按钮并且信息不正确时，它会将我重定向到php页面。想要保留在模态中，并且看起来需要填写必填字段。

P.S。如果我不太清楚，我很抱歉，这是我的第一篇文章。

html代码（index.php）：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en" dir="ltr">
    
<head profile="http://www.w3.org/1999/xhtml/vocab">
    <link rel="shortcut icon" href="styles/icons/favicon.png" type="image/png" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Hackaton | IBM Watson</title>
	<link type="text/css" rel="stylesheet" href="styles/style.css" />
    <link type="text/css" rel="stylesheet" href="styles/modal.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
   <!-- Modal -->
    <script type="text/javascript">
    <!--//--><![CDATA[//><!-- 
    $(document).ready(function(){
        $('.openPopup').on('click',function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#myModal').modal({show:true });
            });
        });
    });
    //--><!]]>
    </script>
    <!-- Smooth scroll-->
    
</head>
<body class="html front not-logged-in no-sidebars page-node parallax-active sff-7 slff-7 hff-7 pff-7 form-style-1 wide" >
<!-- There is more code here but not important for this-->

<a class="btn-primary btn openPopup" data-href="form_group.php"><span>Grupo</span></a>
                    <!-- Modal -->
                     <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog" role="document">
                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-body">
        
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Also more code here-->
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

php代码（form_group.php）：

＆＃13;
＆＃13; 
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Formulario de Registro Grupo</title>
	<link rel="stylesheet" href="styles/form.css" />
    <link type="text/css" rel="stylesheet" href="styles/fonts/lato-font.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="body-form">

<?php 
//Variables for SQL
$servername = "localhost";
$username = "prueba";
$password = "";
$dbname = "";
//define variables and set to empty values
$error = false;
$nameErr = $emailErr = $phoneErr = $teamErr = $ideaErr = "";
$name = $email = $phone = $idea = $team = "";


if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
    $error = true;
  } else {
    $name = test_input($_POST["name"]);
    $error = false;
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Only letters and white space allowed";
      $error = true;
    }
  }
  
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
    $error = true;
  } else {
    $email = test_input($_POST["email"]);
    $error = false;
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Invalid email format";
      $error = true;
    }
  }
    
  if (empty($_POST["phone"])) {
    $phoneErr = "Phone is required";
    $error = true;
  } else {
    $phone = test_input($_POST["phone"]);
    $error = false;
    // check if phone number is valid
    if (!preg_match("/^[0-9+]+$/",$phone)) {
      $phoneErr = "Invalid phone number";
      $error = true;
    }
  }

  if (empty($_POST["idea"])) {
    $ideaErr = "Your idea is required";
    $error = true;
  } else {
    $idea = test_input($_POST["idea"]);
    $error = false;
  }
//Falta el checkbox
  if (empty($_POST["team"])) {
    $teamErr = "Team is required";
    $error = true;
  } else {
    $team = test_input($_POST["team"]);
    $error = false;
  }
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}

if(isset($_POST['submit'])) {
    if(!$error){
        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);

        //Check connection
        if ($conn->connect_error){
            die("Connection failed: " . $conn->connect_error);
        }
        // prepare and bind
        $stmt = $conn->prepare("INSERT INTO form_grup (name, email, phone, idea, team) VALUES (?, ?, ?, ?, ?)");
        $stmt->bind_param("sssss", $name, $email, $phone, $idea, $team);

        $stmt->execute();
        $stmt->close();
        $conn->close();

        echo "<script>
            location.replace('index.php#participa')
            </script>";

    }
    else{
         echo "<script>
            </script>";
    }
}
?>
<form id="sign-form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  <h3 class="header">Take part as a team</h3>  
       
	 <label class="label-form" for="idea">Your idea <br>
        <input class="input-text" type="text" name="idea" value="<?php echo $idea;?>" />
     </label> <br>
     <label class="error"><?php echo $ideaErr;?></label>
	 <br><br>

	 <label class="label-form" for="team">Your team description <br>
        <input class="input-text" type="text" name="team" value="<?php echo $team;?>" />
     </label><br>
     <label class="error"><?php echo $teamErr;?></label>
	 <br><br>
	 
     <label class="label-form" for="name">Name <br>
        <input class="input-text" type="text" placeholder="Name" name="name" value="<?php echo $name;?>">
     </label><br>
     <label class="error"><?php echo $nameErr;?></label>
	 <br><br>            
      
     <label class="label-form" for="email">E-mail <br>
        <input class="input-text" type="text" placeholder="E-mail" name="email" value="<?php echo $email;?>">
     </label><br>
     <label class="error"><?php echo $emailErr;?></label>
	 <br><br>
	  
	 <label class="label-form" for="phone">Phone/WhatsApp <br>
        <input class="input-text" type="text" placeholder="+XXX XXXXXXXXX" name="phone" value="<?php echo $phone;?>"/>
     </label><br>
     <label class="error"><?php echo $phoneErr;?></label>
	 <br><br>
	
     <input class="i-submit" type="submit" name="submit" value="Take part">  
</form>

<?php

?>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

这是模式： enter image description here

这是在提交clik之后发生的事情而不填写字段： enter image description here

2 个答案:

答案 0 :(得分：1)

看看preventDefault()功能。它会阻止您的操作完成。喜欢：

$('button').click(() => {
    this.preventDefault();
});

将阻止按钮默认操作。

或者您可以将表单作为ajax post或get请求发送。

像这样：

$.post('index.php', { username: yourUsername }, (data) => {
    //here you have your server response.
});

答案 1 :(得分：0)

首先说你发布的代码我会从头开始编写它，有些东西需要进行审核，但要解决你的问题，请在thisBook.rSheet.Range(i, "T") = Application.WorksheetFunction.CountIfs( _ thisBook.sSheet.Cells("K2", "K" & sSheet.Cells(Rows.Count, "K").End(xlUp).Row), "APPROVED", _ thisBook.sSheet.Cells("M2", "M" & sSheet.Cells(Rows.Count, "M").End(xlUp).Row), ">=" & (rSheet.Range(i, "S").Value2 - 6), _ thisBook.sSheet.Cells("M2", "M" & sSheet.Cells(Rows.Count, "M").End(xlUp).Row), "<=" & (rSheet.Range(i, "S").Value2))

中更改一点javascript 
index.php

Pssss .....用PHP编写的验证代码不能很好地工作，因为不检查必要的字段。例如，当您仅编译<script type="text/javascript"> $(document).ready(function() { $('.openPopup').on('click', function() { var dataURL = $(this).attr('data-href'); // Load from form_group.php only the form for view using target #sign-form $('.modal-body').load(dataURL + ' #sign-form', function() { $('#myModal').modal({show: true}); }); }); }); // Rebind form submit interceptor after each ajax $(document).ajaxComplete(function() { $('#sign-form').submit(function() { // Need to use $.post() instead $.load() becouse your php code manage only $_POST $.post('form_group.php', $(this).serialize() + '&' + $.param({'submit': true}), function(response) { // Load from form_group.php only the new form view based on erros $('.modal-body').html($(response).filter('#sign-form')); }); return false; }); }); </script> 字段时，表单将验证，因为您最后检查它。

相关问题
最新问题