Есть ли решение для отображения выбранных записей из всплывающего окна для выбора поля - PullRequest
0 голосов
/ 12 января 2020
  1. У меня есть один выпадающий список.
  2. Если из выпадающего списка выбрана какая-либо опция, поэтому отображается одно всплывающее окно.
  3. Я просто хочу, чтобы выбранное пользователем значение из всплывающего окна отображало это значение в поле выбора.
  4. значение должно отображаться из того поля выбора, которое генерирует всплывающее окно. Вот мой код.

$("#select-me").on('change', function() {
    //alert($(this).val());
    if ($(this).val() == 1) {
      $("#myModal_first").modal('show');
    }else if($(this).val() == 2) {
      $("#myModal_second").modal('show');
    }
   });
.modal {
   text-align: center;
   }
   @media screen and (min-width: 768px) { 
   .modal:before {
   display: inline-block;
   vertical-align: middle;
   content: " ";
   height: 100%;
   }
   }
   .modal-dialog {
   display: inline-block;
   text-align: left;
   vertical-align: middle;
   }
   .modal.show .modal-dialog {
   width: 100% !important;
   }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<section class="ftco-section contact-section ftco-degree-bg">
   <div class="container bg-light">
      <div class="row block-9">
         <div class="col-md-12 pr-md-12">
            <form method="post" id="backtestForm" action="<?php echo $_SERVER['PHP_SELF']; ?>">
               <div class="form-group">
                  <label for="sel1">Select list:</label>
                  <select class="form-control" id="select-me">
                     <option value="1">Moving Average</option>
                     <option value="2">Exponential Moving Average</option>
                  </select>
               </div>
               <div class="form-group">
                  <div id="myModal_first" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
                           </div>
                           <button type="button" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <div id="myModal_second" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <div class="row block-9">
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="#">
                                          <option>SELECT THE OPTIONS</option>
                                          <option value="open">OPEN</option>
                                          <option value="close">CLOSE</option>
                                          <option value="low">LOW</option>
                                          <option value="high">HIGH</option>
                                       </select>
                                    </div>
                                 </div>
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="#">
                                          <option>SELECT THE OPTIONS</option>
                                          <option>1</option>
                                          <option>2</option>
                                          <option>3</option>
                                          <option>4</option>
                                          <option>5</option>
                                          <option>6</option>
                                          <option>7</option>
                                          <option>8</option>
                                          <option>9</option>
                                          <option>10</option>
                                       </select>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <button type="button" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
               </div>
            </form>
            <?php echo "<h1>Hello</h1>"; ?>
         </div>
      </div>
   </div>
</section>

Как видите. У меня есть проблема после того, как значение выбрано из всплывающего окна, поэтому эти записи должны отображаться в поле выбора, которое генерирует всплывающее окно.

1 Ответ

0 голосов
/ 13 января 2020

Вот что я получил из вашего ответа: модал закроется после отправки через 3 секунды, вам нужно создать страницу php и изменить эту Your_php_submit_page.php на созданную вами страницу для вставки данных из модала. Когда модальное закрытие, поданные данные будут отображаться в основном списке выбора. если вы не хотите закрывать модальные и хотите показывать субмитированные данные в поле выбора в модальном режиме, вам нужно удалить эту функцию setTimeout totaly в ajax.

здесь мы go Ajax:

$(document).ready(function(){
	$('#SecondForm').submit(function(event){
	event.preventDefault();
	var formValues = $(this).serialize();
		$.ajax({
		url:"Your_php_submit_page.php",
		method:"POST",
		data:formValues,
		dataType:"JSON",
			success:function(data){
				if(data.error === 'ok'){
					$('#SecondForm').hide();
					$('#result').html('<p class="success">All gone well modal will close after 3 seconds.<p>');
					setTimeout(function() {
					$('#myModal_second').remove();
					$('.second2').remove();
					window.location.reload();
					}, 3000);
				} else {
					$('#result').html(data.error);
					$('#SecondForm')[0].reset();
				}
			}
		});
	});	
	$('#change').change(function(){
	  var title = $(this).val();
	  $('#myModal_second').modal('show');
	});
});
.modal {
   text-align: center;
   }
   @media screen and (min-width: 768px) { 
	   .modal:before {
	   display: inline-block;
	   vertical-align: middle;
	   content: " ";
	   height: 100%;
	   }
   }
   .modal-dialog {
	   display: inline-block;
	   text-align: left;
	   vertical-align: middle;
   }
	   .modal.show .modal-dialog {
	   width: 100% !important;
   }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<section class="ftco-section contact-section ftco-degree-bg">
   <div class="container bg-light">
      <div class="row block-9">
         <div class="col-md-12 pr-md-12">
            <form method="post" id="backtestForm" action="<?php echo $_SERVER['PHP_SELF']; ?>">
               <div class="form-group">
                  <label for="sel1">Select list:</label>
					<select id="change">
					  <option value="">Select One</option>
					  <option value="this">This</option>
					  <option value="that">That</option>
					</select>
               </div>
               <div class="form-group">
                  <div id="myModal_first" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
                           </div>
                           <button type="button" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <div id="myModal_second" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content second2">
                           <div class="modal-body">
                              <div class="row block-9">
							  <h4 class="modal-title">Our Modal title</h4>
								<form id="SecondForm">
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="#">
                                          <option>SELECT THE OPTIONS</option>
                                          <option value="open">OPEN</option>
                                          <option value="close">CLOSE</option>
                                          <option value="low">LOW</option>
                                          <option value="high">HIGH</option>
                                       </select>
                                    </div>
                                 </div>
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="#">
                                          <option>SELECT THE OPTIONS</option>
                                          <option>1</option>
                                          <option>2</option>
                                          <option>3</option>
                                          <option>4</option>
                                          <option>5</option>
                                          <option>6</option>
                                          <option>7</option>
                                          <option>8</option>
                                          <option>9</option>
                                          <option>10</option>
                                       </select>
                                    </div>
                                 </div>
							</form>
                              </div>
                           </div>
                           <button type="submit" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <input type="submit" value="Send Message" class="btn btn-primary py-3 px-5">
               </div>
            </form>
            <?php echo "<h1>Hello</h1>"; ?>
         </div>
      </div>
   </div>
</section>

Пример Jsfiddle

...