Проблем с изпращане на форма

Имам един проблем в една форма трябва да сложа tabs с полета за попълване. Проблема е ,че когато кликна върху бутоните на tabs-а формата задейства. Сложих
$('form').on('submit', function(event) {
event.preventDefault(); за да предотвратя това, но сега пък submit- бутона спря да работи и не мога да изпратя формата.

Моля , ако може някой да ми помогне !
------------------------

<form name="form1" method="post" action="">

<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'London')">London</button>
<button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Paris')">Paris</button>
<button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Tokyo')">Tokyo</button>
</div>

<div id="London" class="w3-container w3-border city">
<h2>London</h2>
<p> <textarea name="textarea_1"></textarea></p>
</div>

<div id="Paris" class="w3-container w3-border city" style="display:none">
<h2>Paris</h2>
<p> <textarea name="textarea_2"></textarea></p>
</div>

<div id="Tokyo" class="w3-container w3-border city" style="display:none">
<h2>Tokyo</h2>
<p> <textarea name="textarea_3"></textarea></p>
</div>
</div>

<input type="submit" name="Submit" value="Submit">

</form>



<script>
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks.className = tablinks.className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";


$('form').on('submit', function(event) {
event.preventDefault();
});

}
</script>

Ето така го направи и ще работи.