Inserting Row in Table inside Form tag autosubmitting in firefox/chrome
Posted
by
user1861489
on Stack Overflow
See other posts from Stack Overflow
or by user1861489
Published on 2012-11-28T23:00:11Z
Indexed on
2012/11/28
23:03 UTC
Read the original article
Hit count: 180
JavaScript
|forms
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>
© Stack Overflow or respective owner
