单击提交时如何显示我的模态?
如果没有模态,输出就是成功
这是我的身体HTML
<form action="" method="post">
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<input type="checkbox" name="hobby[]" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="hobby[]" value="Membaca"> Membaca <br>
<input type="checkbox" name="hobby[]" value="Menulis"> Menulis <br>
<input type="checkbox" name="hobby[]" value="Memancing"> Memancing <br>
</div>
</div>
<div class="row">
<div class="offset-5 col-sm-7">
<input type="submit" name="proses" class="btn btn-primary" value="Proses" data-toggle="modal" data-target="#exampleModal">
</div>
</div>
</form>
这是我的模态表演:
<!-- AWAL MODAL -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<h3>OUTPUT : </h3>
<?php
if (isset($_POST['proses'])) :
if (!empty($_POST['hobby'])) :
foreach ($_POST['hobby'] as $selected) :
echo $selected . "</br>";
endforeach;
endif;
endif;
?>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- AKHIR MODAL -->
我的模式只是不提交信息
好的,当您whant时,这是显示值的模态:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p id="checkid"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<form>
<h3>Please select:</h3>
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<input type="checkbox" name="values" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="values" value="Membaca"> Membaca <br>
<input type="checkbox" name="values" value="Menulis"> Menulis <br>
<input type="checkbox" name="values" value="Memancing"> Memancing <br>
</div>
</div>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" >modal</button>
</body>
</html>
<script>
$(document).ready(function(){
$("#button1").click(function() {
var p=$("#myModal1 #checkid");
$(p).html("you have selected:");
$.each($("input[name='values']:checked"), function() {
$(p).html($(p).html() + '<br>' + $(this).val());
});
});
});
</script>