my bootstrap form of symfony not saved data through ajax

my bootstrap form of symfony not saved data through ajax

My bootstrap form of symfony doesn't save data through Ajax,how can I save
this form data through Ajax,any suggestions for saving this form data.
here is my form:
{% extends '::base.html.twig' %}
{% block body -%}
<h1>Proposals creation</h1>
<form class="form-horizontal" role="form" action="{{
path('proposals_create') }}" method="post" {{ form_enctype(form) }}
id="form1" >
<div class="form-group">
<label for="inputProposalname" class="col-lg-2 control-label">Proposal
name</label>
<div class="col-lg-3">
<input type="text" class="form-control" maxlength="255"
required="required" id="email" placeholder="Proposalname">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="inputDescription" class="col-lg-2
control-label">Description</label>
<div class="col-lg-3">
<textarea required="required" class="form-control" rows="3"
id="description"></textarea>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="inputTemplateId" class="col-lg-2 control-label">Template
Id</label>
<div class="col-lg-3">
<input type="number" class="form-control" maxlength="255"
required="required" id="templateid" placeholder="Template id">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="inputClientId" class="col-lg-2 control-label">Client Id</label>
<div class="col-lg-3">
<input type="number" class="form-control" maxlength="255"
required="required" id="clientid" placeholder="Client id">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="inputStatus" class="col-lg-2 control-label">Status</label>
<div class="col-lg-3">
<input type="text" class="form-control" maxlength="255"
required="required" id="status" placeholder="Status">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="inputCreatedby" class="col-lg-2 control-label">Created by</label>
<div class="col-lg-3">
<input type="number" class="form-control" maxlength="255"
required="required" id="createdby" placeholder="Created by">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="inputUpdatedby" class="col-lg-2 control-label">Updated by</label>
<div class="col-lg-3">
<input type="number" class="form-control" maxlength="255"
required="required" id="updated by" placeholder="Updated by">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="inputCreateddatetime" class="col-lg-2
control-label">Createddatetime</label>
<div class="col-lg-3">
<input type="datetime" class="form-control" maxlength="255"
required="required" id="createddatetime" placeholder="Created
datetime">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label for="inputUpdateddatetime" class="col-lg-2
control-label">Updateddatetime</label>
<div class="col-lg-3">
<input type="datetime" class="form-control" maxlength="255"
required="required" id="updateddatetime" placeholder="Updated
datetime">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default" >Create</button>
</div>
</div>
</form>
<div id="result"></div>
<ul class="record_actions">
<li>
<a href="{{ path('proposals') }}">
Back to the list
</a>
</li>
</ul>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('js/jquery-1.10.2.js') }}"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").submit(function(e) {
e.preventDefault();
var url = $(this).attr('action');
var data = $(this).serialize();
alert("hello"+data);
$.ajax({
type: "POST",
url: url,
data: data,
}).done(function( result ) {
if(result.success) {
$('#result').css({'color':'black','background-color':'#8F8','display':'Block','width':'200px'});
$('#result').html('Proposals Record Inserted');
setTimeout(function(){
$('#result').hide();
},3000);
}
});
this.reset();
});
});
</script>
{% endblock %}
and here is my controller for json response:
if($request->isXmlHttpRequest()) {
$response = new Response();
$output = array('success' => true, 'description' =>
$entity->getdescription(), 'id' => $entity->getId(),
'proposalname' => $entity->getproposalname(), 'templateid' =>
$entity->gettemplateid(), 'clientid' => $entity->getclientid(),
'status' => $entity->getstatus(), 'createdby' =>
$entity->getcreatedby(), 'updatedby' => $entity->getupdatedby(),
'createddatetime' => $entity->getcreateddatetime(),
'updateddatetime' => $entity->getupdateddatetime());
$response->headers->set('Content-Type', 'application/json');
$response->setContent(json_encode($output));
return $response;
}