How to set the modal shows something based on a button click? - php

Question

I really want that my Modal shows something based on which button inside it i press, but i have no idea of how to do this.
Actually i tried to use if(isset($_POST['buttoname'])
but looks like this dowsn't work `
This is my modal , i just want to place the content on the right side (which is white ) , but actually it doesn't work.
Here's the code i tried to use
<!-- Modal Settings -->
<div class="modal fade" id="Settings" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px">
<button type="button" class="close" data-dismiss="modal" style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px">×</button>
<h4 style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px"><span class="fa fa-gear"></span> Settings</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="list-group col-sm-1">
<form method="post" href="#">
<button type="submit" name="Profile" href="#" class="list-group-item">First </button>
<button type="submit" name="Logins" href="#" class="list-group-item">First </button>
<button type="submit" name="Security" href="#" class="list-group-item">First </button>
</form>
</div> <!-- List -->
</div>
<?php
if(isset($_POST['Profile'])){
echo' <div class="container">
<div class="col-sm-11">
<p> This is a test</p>
</div>
</div>';
}
?>
</div>
<div class="modal-footer" style="background-color: #f9f9f9;">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
<!-- Modal Settings -->

Answer 1

You need to actually post the button click to have it stored in the $_POST. So just leave the form action empty and it will post this form to the url you already are in.
But this will refresh the page so if you want to make it without refreshing you will need to use javascript.
For example if you are using jquery and you are if you are using bootstrap
In you html put some placeholder div instead of this php if:
</div> <!-- List -->
</div>
<div id="placeholder"></div>
</div>
And in your javascript code:
$("button[name='Profile']").click(function() {
$("#placeholder").html("YOUR HTML CODE");
});