<div class="container text-center">
<form id="contactForm">
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" name="email" class="form-control" id="exampleFormControlInput1" value="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select name="select" class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple name="multiple" class="form-control" id="exampleFormControlSelect2">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea name="text" class="form-control" id="exampleFormControlTextarea1" rows="3">Hello World!!!</textarea>
</div>
<button type="button" class="btn btn-primary httpbin">Submit</button>
</form>
<br />
<div class="result"></div>
</div>
$(document).ready(function(){
$('.httpbin').click(function(){
var datastring=$("#contactForm").serialize();
$.ajax({
type:"POST",
url:"https://httpbin.org/post",
data:datastring,
dataType:"json",
success:function(data){
var obj=JSON.stringify(data);
$('.result').append('<div class="alert alert-success"><ul class="list-group"><li class="list-group-item active">Result Json</li><li class="list-group-item"><textarea class="form-control" rows="3">'+obj+'</textarea></li><li class="list-group-item active">Result Parse</li><li class="list-group-item">Email: '+data['form']['email']+'</li><li class="list-group-item">Select: '+data['form']['select']+'</li><li class="list-group-item">Multiple: '+data['form']['multiple']+'</li><li class="list-group-item">Text: '+data['form']['text']+'</li></ul></div>');
},
error:function(){
$('.result').append('error handing here');
}
});
});
});
