Javascript 从列表中获取所选值并在新页面中显示_Javascript_Php_Jquery_Ajax_Html

Javascript 从列表中获取所选值并在新页面中显示

javascript php jquery ajax html

Javascript 从列表中获取所选值并在新页面中显示,javascript,php,jquery,ajax,html,Javascript,Php,Jquery,Ajax,Html,我正在尝试获取列表中的选定值，并将其添加到另一页的段落中。例如，在test1.php页面的列表中，如果您选择Symfony和Laravel，那么在test2.php页面中，它应该显示您选择的值是Symfony和Laravel 我仍然在一个警报中收到结果，而不是你在这里看到的新页面这是我的密码 test1.php <!DOCTYPE html> <html> <head> <title>Tutorial</title> &l

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

这是我的密码

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时，点击提交按钮，而不是此警报。非常感谢。

只需将target=\u blank添加到表单中，它将打开包含您的响应的新窗口，并在您想要重定向/new选项卡时删除AJAX

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

只需将target=\u blank添加到表单中，它将打开包含您的响应的新窗口，并在您想要重定向/new选项卡时删除AJAX

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

您可以尝试下面的代码。如果未选择框架，将向您发出警报，并在提交时重定向到新页面

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

您可以尝试下面的代码。如果未选择框架，将向您发出警报，并在提交时重定向到新页面

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

当我们不希望用户在页面之间切换时，我们使用ajax。在您的情况下，您希望用户移动到另一个页面，因此这里不需要ajax。只需使用带有提交按钮的常规表单。您需要重定向，而不是Ajax！当我们不希望用户在页面之间切换时，我们使用ajax。在您的情况下，您希望用户移动到另一个页面，因此这里不需要ajax。只需使用带有提交按钮的常规表单。您需要重定向，而不是Ajax！如何在另一个jsp中填充此数据？请建议Can$_POST[隐藏框架]；语法将选择该值？如何在另一个jsp中填充该数据？请建议Can$_POST[隐藏框架]；语法将选择该值？