I have four inputs in my web page. The requirement is when the user fills the 1 input then its value should fill in 3 input and 3 input color should change into red same for second input. But when we fill 1 input then 4 input color changes to red.
Here’s an example http://jsfiddle.net/SXzyR/
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('input').blur(function(){
txtval()
})
})
</script>
<script type="text/javascript">
function txtval(){
document.getElementById('myid3').value = document.getElementById('myid1').value;
document.getElementById('myid4').value = document.getElementById('myid2').value;
document.getElementById('myid3').style.color="#ff0000"
document.getElementById('myid4').style.color="#ff0000"
}
</script>
</head>
<body>
1
<input type="text" id="myid1" value="Enter name"/>
2
<input type="text" id="myid2" value="Enter name"/>
3
<input type="text" id="myid3" value="Enter name"/>
4
<input type="text" id="myid4" value="Enter name"/>
</body>
check this jsFiddle…
http://jsfiddle.net/SXzyR/8/
the problem was becuase your blur function was for all input element…..
modified a bit of your code so you don’t have to change or add any attributes.. jus need to check conditions