Question

我试图在列表中获取所选值，并将其添加到另一页中的段落中。例如，在页面test1.php的列表中，如果你选择Symfony和Laravel，那么在页面test2.php中它应该显示你所选择的值是Symfony，Laravel＆＃34; 我仍然收到警报而不是新页面的结果，你可以在这里看到

这是我的代码。

test1.php

<!DOCTYPE html>
<html>
 <head>
  <title>Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">Select your framework</h2>
   <br />
   <div class="col-md-4" style="margin-left:200px;">
    <form method="post" id="multiple_select_form">
     <select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
      <option value="Laravel">Laravel</option>
      <option value="Symfony">Symfony</option>
      <option value="Codeigniter">Codeigniter</option>
      <option value="CakePHP">CakePHP</option>
      <option value="Zend">Zend</option>
      <option value="Yii">Yii</option>
      <option value="Slim">Slim</option>
     </select>
     <br /><br />
     <input type="hidden" name="hidden_framework" id="hidden_framework" />
     <input type="submit" name="submit" class="btn btn-info" value="Submit" />
    </form>
    <br />

   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('.selectpicker').selectpicker();

 $('#framework').change(function(){
  $('#hidden_framework').val($('#framework').val());
 });

 $('#multiple_select_form').on('submit', function(event){
  event.preventDefault();
  if($('#framework').val() != '')
  {
   var form_data = $(this).serialize();
   $.ajax({
    url:"test2.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     //console.log(data);
     $('#hidden_framework').val('');
     $('.selectpicker').selectpicker('val', '');
     alert(data);
    }
   })
  }
  else
  {
   alert("Please select framework");
   return false;
  }
 });
});
</script>

test2.php

<!DOCTYPE html>
<html>
<head>

</head>
 <body>
<p> Your selected values are 
<?php
echo  $_POST["hidden_framework"];
?>
</p>
  </body>
</html>

有任何建议请如何调整我的代码，以便在舔取提交按钮而不是此提醒时，消息将显示在新页面test2.php中。非常感谢你。

Answer 1

只需将target="_blank"添加到您的表单，它就会打开包含您回复的新窗口，并删除AJAX，因为您想要重定向/新标签。

<form method="post" id="multiple_select_form" target="_blank">

Answer 2

您可以尝试以下代码。如果没有选择框架，将提醒您，并且在提交时将重定向到新页面。

<!DOCTYPE html>
<html>
 <head>
  <title>Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">Select your framework</h2>
   <br />
   <div class="col-md-4" style="margin-left:200px;">
       <form method="post" action="test2.php" id="multiple_select_form">
     <select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
      <option value="Laravel">Laravel</option>
      <option value="Symfony">Symfony</option>
      <option value="Codeigniter">Codeigniter</option>
      <option value="CakePHP">CakePHP</option>
      <option value="Zend">Zend</option>
      <option value="Yii">Yii</option>
      <option value="Slim">Slim</option>
     </select>
     <br /><br />
     <input type="hidden" name="hidden_framework" id="hidden_framework" />
     <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </form>
    <br />

   </div>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 $('.selectpicker').selectpicker();

 $('#framework').change(function(){
  $('#hidden_framework').val($('#framework').val());
 });

 $('#submit').click(function(){

  if($('#framework').val() != '')
  {
      $("#multiple_select_form").submit();
      return true;

  }
  else
  {
   alert("Please select framework");
   return false;
  }
 });
});
</script>

从列表中获取选定的值并将其显示在新页面中

2 个答案: