How to check for Empty textboxed and fill it with a value on a button click

Hi , i am making a project where there will be a text box with a Button beside it . when i enter a text in that box and click the button it should go of from the first text box and should be added to the target text box and sit should check if it is empty and should get added to the second target text box. the button should be disabled once i click it(i managed to do that), but when i'm trying to enter the text it is getting updated in the second target text box leaving the first blank, could you please help me out with this for all the target boxes, also forgot to mention the target textboxes are to be in read only mode. below is the code

<html>
<head>
<script type="text/javascript">
function move(){
    if(document.getElementById('tgt1').length==0)
{
 document.getElementById('tgt1').value = document.getElementById('Allocation').value;
}
else if(document.getElementById("tgt1").length!=0)
{
    document.getElementById('tgt2').value = document.getElementById('Allocation').value;
}
document.getElementById("Send").disabled=true;
}
function UnBlock()
{
    document.getElementById("tgt1").value="";
    document.getElementById("Send").disabled=false;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
    margin-top: 20px;
    margin-left: 30px;

}
</style>
</head>
<body>
<form name="myform">
<input type="text" name="Allocation" size="100" align="middle"> 
<input type="button" value="Allocate" id="Send" name="submit" onClick="move()"/><br/>
<br/><br/><br/><br/><br/><br/>
<table>
<tr>
<input type="text" id="tgt1" size="100"><td><input type="button" value="unlinkme" onclick="UnBlock()"</td>
<br/>
<input type="text" id="tgt2" size="100" >
<br/>
<input type="text" id="tgt3" size="100" readonly="true">
<br/>
<input type="text" id="tgt4" size="100" readonly="true">
<br/>
<input type="text" id="tgt5" size="100" readonly="true">
<br/>
<input type="text" id="tgt6" size="100" readonly="true">
<br/>
<input type="text" id="tgt7" size="100" readonly="true">
<br/>
<input type="text" id="tgt8" size="100" readonly="true">
<br/>
<input type="text" id="tgt9" size="100" readonly="true">
<br/>
<input type="text" id="tgt10" size="100" readonly="true">
<br/>
</form>
</body>
</html>

Thanks, Rakesh

View Answers

July 5, 2012 at 3:46 PM

Here is a code which check for Empty textbox and fill it with a value on a button click. When you enter a text in a textbox and click the button, it will get added to the target text box and check if second target box is empty. If it is empty, value will get added to the second target text box. The button will get disabled once you click it.

<html>
<script>
function dis(){
var v=document.getElementById("txt").value;
document.getElementById("txt1").value=v;
document.getElementById('txt1').readOnly=true;
var mystring=document.getElementById('txt2').value; 

if(!mystring.match(/\S/)){
document.getElementById("txt2").value=document.getElementById("txt1").value;
document.getElementById('txt2').readOnly=true;
}
document.getElementById("b").disabled=true;
}

</script>
<pre>
<input type="text" name="txt" id="txt">
<input type="button" id="b" value="Allocate" onclick="dis();">
Target Textbox1: <input type="text" id="txt1">
Target Textbox2: <input type="text" id="txt2">
</pre>
</html>