Enable html form field one by one

Question

I Have a form with field ABA11,ABA12,ABA13........Which is used to update the data. In this form all the field should be remained in disabled mode except the first field ABA11 initially.once the ABA11 field is filled then only ABA12 will be enabled to enter data.Once the data is entered and it is saved in data base after that this filled should also be in disable mode.And this process to be continued for other field

<?php
$status11=disabled;
if(htmlentities($result->aba11)==null){
    $status11=enabled;
}
?>
<td><input type="datetime-local"  name="aba11" id="aba11" value="<?php echo htmlentities($result->aba11);?>" class="form-control" <?php echo $status11?> ></td> 
<?php
$status12=disabled;
if(htmlentities($result->aba11)!=null and htmlentities($result->aba12)== null ){
    $status12=enabled;
}
?>
<td><input type="datetime-local" name="aba12" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba12);?>" class="form-control" <?php echo $status12?>></td>
<td><input type="text" name="aba13" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba13);?>" class="form-control"></td>
</tr>

<tr>
<th class= "col-md-1.5" align="centre">0.0.1M NaOH</th>
<th class= "col-md-2" align="centre">60 Degree C</th>

<td><input type="datetime-local"  name="aba21"onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba21);?>" class="form-control" ></td> 
<td><input type="datetime-local" name="aba22" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba22);?>" class="form-control" ></td>
<td><input type="text" name="aba23" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba23);?>" class="form-control" ></td>
</tr>

<tr>
<th class= "col-md-1.5" align="centre">0.5M HCL</th>
<th class= "col-md-2" align="centre">60 Degree C</th>

<td><input type="datetime-local"  name="aba31" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba31);?>" class="form-control" ></td> 
<td><input type="datetime-local" name="aba32" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba32);?>" class="form-control" ></td>
<td><input type="text" name="aba33" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba33);?>" class="form-control"></td>
</tr>

<tr>
<th class= "col-md-1.5" align="centre">Freeze Drying</th>
<th class= "col-md-2" align="centre"> </th>
<td><input type="datetime-local"  name="aba41" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba41);?>" class="form-control" ></td> 
<td><input type="datetime-local" name="aba42" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba42);?>" class="form-control" ></td>
<td><input type="text" name="aba43" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba43);?>" class="form-control"></td>
</tr>
</table>

I tried it with the using if condition but i am not able to achieve it.Kindly suggest any clue or my mistake in this.I have entered the if condition only aba12.

Answer 1

I have modified part of your code to do it. First of all, there is no way you can do it with PHP because it is executed before the page is loaded in the server side, so you will need to use javascript for this.

I have removed the PHP code for enabling/disabling the input elements. I made the solution just for the two first elements (you will have to do it for the rest, so when you get to the page, your aba11 is enabled and the rest are disabled. Once you set an input in aba11 (as you have an event oninput), it calls the javascript function disable_items with a number (this number indicates wich of the fields we are working on. The javascript function disables the actual element and enables the next one.

<td><input type="datetime-local"  oninput="disable_items(1)" name="aba11" id="aba11" value="<?php echo htmlentities($result->aba11);?>" class="form-control" <?php echo $status11?> ></td> 

<td><input type="datetime-local" disabled oninput="disable_items(2)" name="aba12" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba12);?>" class="form-control" <?php echo $status12?>></td>
<td><input type="text" disabled name="aba13" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba13);?>" class="form-control"></td>
</tr>

<tr>
<th class= "col-md-1.5" align="centre">0.0.1M NaOH</th>
<th class= "col-md-2" align="centre">60 Degree C</th>

<td><input type="datetime-local"  disabled name="aba21"onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba21);?>" class="form-control" ></td> 
<td><input type="datetime-local" disabled name="aba22" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba22);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba23" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba23);?>" class="form-control" ></td>
</tr>

<tr>
<th class= "col-md-1.5" align="centre">0.5M HCL</th>
<th class= "col-md-2" align="centre">60 Degree C</th>

<td><input type="datetime-local"  disabled name="aba31" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba31);?>" class="form-control" ></td> 
<td><input type="datetime-local" disabled name="aba32" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba32);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba33" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba33);?>" class="form-control"></td>
</tr>

<tr>
<th class= "col-md-1.5" align="centre">Freeze Drying</th>
<th class= "col-md-2" align="centre"> </th>
<td><input type="datetime-local" disabled name="aba41" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba41);?>" class="form-control" ></td> 
<td><input type="datetime-local" disabled name="aba42" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba42);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba43" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba43);?>" class="form-control"></td>
</tr>
</table>

<script>
function disable_items(option) {
    if (option==1){
        document.getElementById("aba11").disabled=true;
        document.getElementById("aba12").disabled=false;
    }
    if (option==2){
        document.getElementById("aba12").disabled=true;
        document.getElementById("aba13").disabled=false;
    }   
}

</script>