Refreshing a single DIV using AJAX

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 :

1. the submit action as a type submit button
2. 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.