Вот что я получил из вашего ответа: модал закроется после отправки через 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">×</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">×</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