Home » Archive

Articles tagged with: JQuery

JavaScript, web development »

[19 Oct 2010 | One Comment | ]

Multiple html buttons within single HTML label

When placing multiple html buttons within single html label, the following issue was found. Especially when using with the JavaScript functions for both buttons. The following code demonstrates the problem clearly. This example uses JQuery library
HTML code
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Div Drag/Resize Demo</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
 
$().ready(init);
function init(){
$(‘#txtinsert’).click(function(){alert("button1")});
$(‘#display’).click(function (){alert("button2")});
$(‘#display1′).click(function (){alert("button3")});
}
</script>
</head>
<body>
<label>
<input name="txtinsert" type="button" id="txtinsert" value="Insert Test" />
<input name="display" type="button" id="display" value="display" />
<input name="display1" type="button" id="display1" value="display1" />
</label>
</body>
</html>
 
In the …