div opens on new page instead of staying on map page

Question

I am trying to display my input form buttons on the right side outside of my map after I have created a marker with the L.draw plugin. However if I click on the created marker, the form buttons open on a new page instead of staying on the page where the map is. Here is my code:

map.on('draw:created', function (e){
  var type = e.layerType;
  layer = e.layer;
  var marker_y = layer.getLatLng().lat;
  var marker_x = layer.getLatLng().lng;

var marker = drawnItems.addLayer(layer);

marker.on('click', function (e){

  document.getElementById('i').innerHTML = 

'<form role="form" id="form" enctype="multipart/form-data" class ="form-horizontal" >'+ 
'<h1>Beschreibung</h1>' +
'<label>text <input type="text" name="text" id="text"></label>' + '<br/>'  +
'<button type="button" class="btn btn-warning" id="ok">Add to Database</button>'+
'</form>';

 }); 

The set up of my div looks like this:

<div class="container">
 <div id="i">
 <div id="map">
</div>