Refreshing a single DIV using AJAX - php

Question

There's a DIV, that display images using an external php. HTML passes the item name (user input text) to AJAX as a POST.
I'm trying to update only this DIV using AJAX but it refreshes the entire webpage? How can I fix this so only <div class="imgSlots" id="auto"> is refreshed when Submit button is pressed?
php file:
if( isset($_POST['submit']) ){
$resData = htmlentities('img/'.$_POST['val1']).'/';
}
if( isset($resData) ) {
$files = '*.*';
$fin = glob($resData.$files);
$counts = count($fin);
$imgs = array();
$div= '';
foreach ($imgs as $fin) {
$div .= '<div class="imgSlots" id="imgSlots">';
$div .= '<li><div class="imgSlotsInner"><input type="image" src="'.$fin.'"/><testDes>"'.basename($fin.$files).'"</testDes></div></li>';
$div .= '</div>';
}
echo $div;
}
HTML
<div class="searchBar">
<form action="" method="post">
Furniture item:
<input type="text" name="val1" id="val1" />
<input type="button" value="Submit" id="btn" />
</form>
</div>
<div class="menuList">
List of Furniture:
<select id='myList' name="mList" onchange='document.getElementById("val1").value = this.value;'><option value="">Furniture Available</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function(e) {
e.preventDefault();
$.ajax({
url: 'php/filep.php',
type: 'POST',
data: $('#submit').val(),
success: function(data, status) {
$("#imgSlots").html('');
$("#imgSlots").html(data);
}
});
$("imgSlots").fadeOut("slow");
});
});
</script>

Answer 1

you need to do some changes like below (and i hope this is what you need)
in html create div with id imgslots like below
<div class="imgSlots" id="imgSlots">
</div>
in js do like this
var val1 = $('#val1').val();
then in data
data: {'val1':val1},
and in php
if( isset($_POST['val1']) ){
$resData = htmlentities('img/'.$_POST['val1']).'/';
}
and in loop
$list= '';
foreach ($imgs as $fin) {
$list.= '<li><div class="imgSlotsInner"><input type="image" src="'.$fin.'"/><testDes>"'.basename($fin.$files).'"</testDes></div></li>';
}
echo $list;

Answer 2

The way you doing it your submit button has 2 action :
the submit action as a type submit button
the onclick action that you set from jquery
You have two options
Override the form submit action (also remove the onclick event)
var form = $('<My form selector>');
form.submit(function () {
$.ajax({
type: post,
url: "your url",
data: form.serialize(),
success: function(jsonObj){
}
});
});
The other solution is to delete the type submit form the button and keep you onclick event as it is. Also in ajax request in data: you have to put an object with the data you want to sent.