Ajax提交不显示数据

Question

I'm new to ajax and found a problem that i can't solve. I have a form on index.html with a input "ID" and a getdata.php that will use the ID to complete an url and use XPath to extract content of that url.

I want use ajax for that to avoid the page refresh (maybe this is not the best approach, I am open to other suggestions if this is the case) but nothing is showing when I hit the submit button, if I use the form without ajax it works fine. My code is:

Ajax

<script type="text/javascript">
    $(function () {
        $('button[type=submit]').click(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "getdata.php",
                data: $("#getlist").serialize(),
                beforeSend: function () {
                      $('#list').html('<img src="728.GIF" />');
                },
                success: function (data) {
                      $('#list').html(data);
                }
            });
        });
    });
</script>

form

<form class="form form-inline form-multiline" enctype="multipart/form-data" method="POST" action="" id="getlist">
   <br>
   <div class="form-group col-md-offset-4">
       <label for="id">ID</label>
       <input type="text" class="form-control" id="id" name="id" placeholder="e.g 2071">
   </div>
   <br>
   <div class="panel panel-primary">
      <div class="panel-heading">
         <h3 class="panel-title">List</h3>
      </div>
   </div>
   <div class="form-group col-md-offset-4" id="list" name="list"></div>
   <div class="col-md-12 text-right">
       <br>
       <button type="submit" class="btn btn-primary btn-default"><span class="glyphicon glyphicon-fire"></span> Submit</button>
   </div>