I have a form that will have dynamic elements inserted with javascript and am experiencing some strange behavior. When I click the button to add another element to the table in the form, it adds the element but seems to to a form post immediately (without intending to submit the form yet)
I have created a simplified example of the page that has the same behavior. the first table element is created on page load and subsequent elements are added when clicking on the button. this form works successfully in IE. does anyone have an idea of how to prevent this behavior?
here is the code sample.
<!DOCTYPE html>
<html>
<head>
<title>Test Creating Form</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
td{font-family:verdana;}
</style>
<script type="text/javascript">
var counter = 0;
function makeTitle(title){
if(counter){
title += " " + counter;
}
counter++;
var tbl = document.getElementById('tbl');
var tr = tbl.insertRow(-1)
var td1 = tr.insertCell(-1);
td1.innerHTML = title;
}
function load1(){
makeTitle('Primary Specimen');
}
</script>
</head>
<body onload="load1();">
<form action="formtest.htm" method="post" name="testForm" id="testForm">
<table id="tbl" border="1"></table>
<button onclick="makeTitle('Alternate Specimen')" id="clone" >Add Another Specimen</button>
</form>
</body>
</html>
Button tags default to
type="submit"; addtype="button".