jQuery, array form radio button name problem.
- by borayeris
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>click div to select hidden options</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<style type="text/css">
.clickDiv {
width:50px;
height:50px;
cursor:crosshair;
}
.red {border:1px #000 solid;}
.green {border:1px #000 solid;}
.redBG {background:#F00;}
.greenBG {background:#0F0;}
</style>
<script type="text/javascript">
$(function() {
$('div.clickDiv.red').click(function(){
var secilenMadde=$(this).attr('madde');
$('div#write').text(secilenMadde);
$('input[name='+secilenMadde+'][value=red]').attr('checked', 'checked');
$('div.clickDiv.red[madde='+secilenMadde+']').addClass('redBG');
$('div.clickDiv.green[madde='+secilenMadde+']').removeClass('greenBG');
});
$('div.clickDiv.green').click(function(){
var secilenMadde=$(this).attr('madde');
$('div#write').text(secilenMadde);
$('input[name='+secilenMadde+'][value=green]').attr('checked', 'checked');
$('div.clickDiv.green[madde='+secilenMadde+']').addClass('greenBG');
$('div.clickDiv.red[madde='+secilenMadde+']').removeClass('redBG');
});
});
</script>
</head>
<body>
<div id="write"></div>
<form id="formId" name="formName" method="post">
<table>
<tr>
<td><div class="clickDiv red" madde="line1"></div></td>
<td><div class="clickDiv green" madde="line1"></div></td>
</tr>
<tr>
<td><div class="clickDiv red" madde="line2"></div></td>
<td><div class="clickDiv green" madde="line2"></div></td>
</tr>
</table>
<label for="line1red"><input id="line1red" type="radio" name="line1" value="red" /> Red</label>
<label for="line1green"><input id="line1green" type="radio" name="line1" value="green" /> Green</label><br />
<label for="line2red"><input type="radio" name="line2" value="red" /> Red</label>
<label for="line2green"><input type="radio" name="line2" value="green" /> Green</label>
</form>
</body>
</html>
This works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>click div to select hidden options</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<style type="text/css">
.clickDiv {
width:50px;
height:50px;
cursor:crosshair;
}
.red {border:1px #000 solid;}
.green {border:1px #000 solid;}
.redBG {background:#F00;}
.greenBG {background:#0F0;}
</style>
<script type="text/javascript">
$(function() {
$('div.clickDiv.red').click(function(){
var secilenMadde=$(this).attr('madde');
$('div#write').text(secilenMadde);
$('input[name='+secilenMadde+'][value=red]').attr('checked', 'checked');
$('div.clickDiv.red[madde='+secilenMadde+']').addClass('redBG');
$('div.clickDiv.green[madde='+secilenMadde+']').removeClass('greenBG');
});
$('div.clickDiv.green').click(function(){
var secilenMadde=$(this).attr('madde');
$('div#write').text(secilenMadde);
$('input[name='+secilenMadde+'][value=green]').attr('checked', 'checked');
$('div.clickDiv.green[madde='+secilenMadde+']').addClass('greenBG');
$('div.clickDiv.red[madde='+secilenMadde+']').removeClass('redBG');
});
});
</script>
</head>
<body>
<div id="write"></div>
<form id="formId" name="formName" method="post">
<table>
<tr>
<td><div class="clickDiv red" madde="line[1]"></div></td>
<td><div class="clickDiv green" madde="line[1]"></div></td>
</tr>
<tr>
<td><div class="clickDiv red" madde="line[2]"></div></td>
<td><div class="clickDiv green" madde="line[2]"></div></td>
</tr>
</table>
<label for="line1red"><input id="line1red" type="radio" name="line[1]" value="red" /> Red</label>
<label for="line1green"><input id="line1green" type="radio" name="line[1]" value="green" /> Green</label><br />
<label for="line2red"><input type="radio" name="line[2]" value="red" /> Red</label>
<label for="line2green"><input type="radio" name="line[2]" value="green" /> Green</label>
</form>
</body>
</html>
This doesn't.
I need input names as an array but it breaks my script. Why?
