jQuery/Ajax works with input tupe button, but not submit

Can anyone explain why this works when the input type=”button” but not when type=”submit”? Should I be using one over the other?

<p class="submit"><input type="button" name="button-submit" id="button-submit" class="button button-primary" value="button"></p>

jQuery("#button-submit").click(function() {
	var tempVar = jQuery("#mdba-ID").val();
	jQuery.ajax({
		type: 'POST',
		url: myAjax.ajaxurl,
		data: {
			"action": "get_from_db",
			"tempVar": name
		},
		success:function(data){
			jQuery('#mdba-name').val(data);
		}
	});
});

<p class="submit"><input type="submit" name="submit-submit" id="submit-submit" class="button button-primary" value="submit"></p>

jQuery( "#submit-submit" ).submit(function( event ) {
	var tempVar = jQuery("#mdba-ID").val();
	jQuery.ajax({
		type: 'POST',
		url: myAjax.ajaxurl,
		data: {
			"action": "get_from_db",
			"tempVar": name
		},
		success:function(data){
			jQuery('#mdba-name').val(data);
		}
	});
	event.preventDefault();
});