javascript - Get the selected values from a list and show it in a new page -


i trying selected values in list , add paragraph in page. example in list in page test1.php if select symfony , laravel in page test2.php should show "your selected values symfony,laravel" still receiving result in alert not new page can see here enter image description here

here code.

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 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> selected values  <?php echo  $_post["hidden_framework"]; ?> </p>   </body> </html> 

any suggestion please how adjust code message shown in new page test2.php when licking on submit button instead of alert. thank much.

you can try below code. give alert if no framework selected , on submit redirect new page.

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

Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

jquery - Responsive Navbar with Sub Navbar -