Ajax Html Forms with PHP, Jquery and MYSQL, - php

Question

I understand this question may be entirely juvenile however I have been trying to debug it for an entire afternoon, not using an IDE other than sublime. would be really glad to receive any help and format this question nicely for future begineers when it works.
currently
my html.
<?php
//connect to the server & database
$connect = mysqli_connect('localhost','root','root','ikea');
if(!$connect)
{
echo "failed to connect ".mysqli_connect_error();
}
// query the database
$query = 'SELECT * from department
where iconpath Like "image%"
order by name asc';
$result = mysqli_query($connect,$query);
// retrieve the resultset
while( $row[] = $result->fetch_object());
?>
<form id="question2" method="POST">
<div class="form-group input-group">
<select style="width:8.7cm;" id="member_choice" class="form-control">
<option value="">-- Select One --</option>
<?php foreach($row as $option) : ?>
<option value="<?php echo $option->name; ?>"><?php echo $option->name; ?></option>
<?php endforeach; ?>
</select><br/><br/>
<button id="q2-submit" name="q2-submit" style="margin-left:5cm;" type="submit" class="btn btn-default btn-add"> Get Departments! </button>
</div>
</form>
my jquery
$('#question2').on('submit', function()
{
alert("submit!");
// AJAX STUFF HERE
$.post('q3.php', function(data)
{
console.log("here1");
$(".return").html(data);
});
});
and currently experimenting with my php trying to get it to return "content"
<?php
echo "content";
?>

Answer 1

Your question keeps changing. Honestly, I recommend you go through a tutorial on how to submit a form using AJAX with jQuery, like this one.
You should use submit handler instead of a click handler. Also your selector is wrong.
HTML
added name attribute to the <select> tag.
<form id="question2" method="POST" action="q2.php">
<div class="form-group input-group">
<label>Select Member Card Number</label>
<select name="member_choice" style="width:8.7cm;" id="member_choice" class="form-control">
<option value="">-- Select One --</option>
<?php foreach($row as $option) : ?>
<option value="<?php echo $option->name; ?>"><?php echo $option->name; ?></option>
<?php endforeach; ?>
</select><br/><br/>
<button style="margin-left:5cm;" type="submit" class="btn btn-default btn-add"> Get Departments! </button>
</div>
</form>
<div id="content"></div>
JQUERY
$('#question2').on('submit', function(event)
{
// stop form from submitting normally
event.preventDefault();
var $form = $(this);
var url = $form.attr('action');
$.post(url, $form.serialize(), function(data)
{
console.log("here1");
$('#content').html(data.content);
});
});
PHP (q2.php)
<?php
$content = $_POST['member_choice'];
echo json_encode($content);
?>

Answer 2

Your click handler doesn't prevent the form from submitting (the page gets refreshed) so you never see the ajax response. Use a submit handler instead:
$('#question2').on('submit',function(e)
{
var name = $('#department_choice :selected').val();
console.log("here");
$(".return").html("asdad");
$.post('q2.php', function(data)
{
console.log("here1");
$(".return").html(data);
});
return false;//prevent form submit
});