Jannice Camaso Jannice Camaso - 6 months ago 26
jQuery Question

multiple form using jquery

First this is my first page which you will input how many forms you have to insert.

<table>
<form method="post" action="additem.php">
<tr>
<td>How many records to insert? </td>
<td><input type="text" name="num" size="2" /></td>
</tr>
</form>
</table>


Second will go to
additem.php
and will display form depending on the number you insert. For example you entered 2 , then it will display 2 forms. Display any numbers of forms are ok. the only problem is my jquery. The first form is only working but the 2nd , 3rd and so on are not.

<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function showForm() {
var selopt = document.getElementById("opts").value;
if (selopt == "branch") {
document.getElementById("f2").style.display = "block";
document.getElementById("f1").style.display = "none";
}
if (selopt == 0) {
document.getElementById("f2").style.display = "none";
document.getElementById("f1").style.display = "none";
}
if (selopt == "vicma") {
document.getElementById("f1").style.display = "block";
document.getElementById("f2").style.display = "none";
}
}
</script>
<table>
<tbody>
<?php
$numbers=$_POST['num'];
for($i=1;$i<=$numbers;$i++){
?>

//This is my javascript which i have 2
values in first dropdown and will appear
another dropdown of the choosen value
on the first.Only first is working and others not.//
<input type="hidden" value="<?php echo $numbers;?>" name="numbers" />
<tr>
<td><font color="black">*</font>Serial No: </td>
<td><input type="text" value="<?php if(isset($_POST['serialnumber'])) echo htmlspecialchars($_POST['serialnumber']);?>" name="serialnumber[]"><br></td>
</tr>
<tr>
<td> Requested Dept:</td>
<td>
<select name ="type" id="opts" onchange="showForm()">
<option value="">Select Option</option>
<option value="vicma">Vicma</option>
<option value="branch">Branch</option>
</select>
</td>
</tr>
<tr>
<td>
<div id="f1" style="display:none">
<select name="user1[]" id="opts" onchange="showForm()">
<option value="ACCOUNTING" >ACCOUNTING</option>
<option value="CNC">CNC</option>
<option value="CONCESSION">CONCESSION</option>
<option value="HR">HR</option>
<option value="INVENTORY">INVENTORY</option>
<option value="SALES AND MARKETING">SALES AND MARKETING</option>
<option value="WAREHOUSE">WAREHOUSE</option>
<option value="MIS">MIS</option>
</select>
</div>
<div id="f2" style="display:none">
<select name="user[]" id="opts" onchange="showForm()" >
<?php
$sql = "SELECT * FROM branch_tb";
$result = $conn->query($sql);
while($row=mysqli_fetch_array($result)){
$bid = $row['id'];
$name = $row['branchname'];
?>
<option value ="<?=$bid?>"><?=$name?> </option><?}?>
</select>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>

Answer

Try this

<script type="text/javascript"> 
    $('.drop').change(function(){
         var id = $(this).data('id');
         var selopt = $(this).val();
         if (selopt == "branch") {
             $('#first'+id).hide();
             $('#second'+id).show();
          }
         if (selopt == 0) {
             $('#first'+id).hide();
             $('#second'+id).hide();
         }
         if (selopt == "vicma") {
             $('#first'+id).show();
             $('#second'+id).hide();
         }
    });
</script>
<table>
    <tbody>
    <?php
        $numbers=$_POST['num'];
        for($i=1;$i<=$numbers;$i++){
    ?>

    //This is my javascript which i have 2 
    values in first dropdown and will appear 
    another dropdown of the choosen value 
    on the first.Only first is working and others not.//    
    <input type="hidden" value="<?php echo $numbers;?>" name="numbers" />
    <tr>
        <td><font color="black">*</font>Serial No: </td>
        <td><input type="text"  value="<?php if(isset($_POST['serialnumber'])) echo htmlspecialchars($_POST['serialnumber']);?>" name="serialnumber[]"><br></td>
    </tr>
    <tr>
        <td> Requested Dept:</td>
        <td>
            <select name ="type"  data-id="<?=$i?>" class="drop">
                <option value="">Select Option</option>
                <option value="vicma">Vicma</option>
                <option value="branch">Branch</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <div id="first<?=$i?>" style="display:none">
                <select name="user1[]" data-id="<?=$i?>" class="drop"  >
                    <option value="ACCOUNTING" >ACCOUNTING</option>
                    <option value="CNC">CNC</option>
                    <option value="CONCESSION">CONCESSION</option>
                    <option value="HR">HR</option>
                    <option value="INVENTORY">INVENTORY</option>
                    <option value="SALES AND MARKETING">SALES AND MARKETING</option>
                    <option value="WAREHOUSE">WAREHOUSE</option>
                    <option value="MIS">MIS</option>
                </select>
            </div>
            <div id="second<?=$i?>" style="display:none">
                <select name="user[]" data-id="<?=$i?>" class="drop" >
                <?php
                    $sql = "SELECT * FROM branch_tb";
                    $result = $conn->query($sql);
                    while($row=mysqli_fetch_array($result)){
                    $bid = $row['id'];
                    $name = $row['branchname'];
                ?>
                <option value ="<?=$bid?>"><?=$name?> </option><?}?> 
                </select>                  
            </div>
        </td>
    </tr>
    <?php } ?>
    </tbody>
</table>