Trying to populate on select dropdowns with each blocks with different forms how can i do?

PHP
1 
  <div class="container">
            <form action="actionpage.php" method="post" name="ronel" enctype="multipart/form-data">
            <input type="hidden" name="ronel"> 
            <div class="row">
            <div class="col-md-12">
                    
                        <div class="col-25"><label>1. P.O Number:*</label>
                        <input type="number" style="position:absolute; left:14.2%;" name="ponum" placeholder="P.O Number.."></div>
                        <br><div class="col-25"><label>2. P.O Date:*</label>     
                        <input style="position:absolute; left:14.2%;" type="date" required name="podate"></div>
                        <br>
                        <div class="col-25"><label>3. Remarks:*</label>
                        <textarea style="position:relative; left:3%;" name="textarea" placeholder="Remarks.."></textarea></div>        
            
        
                        <br><div class="col-25"><label>4. P.O Quantity:*</label>    
        <select name="nationality" id = "ddlPassport" onchange = "ShowHideDiv()">
        <option value="Select Quantity here">Select here</option>
        <option value="1">1</option>
        <option value="2">2</option>
        </select></div>      
<hr>
                    
 <div class="row"  id="stocks" style="display: none">                   
  <table class="table table-bordered" style="width:100%; border: solid 1px;" >
    <thead>
      <tr>
        <th>Sl</th>
        <th>Item Selection</th>
        <th>P.O Quantity</th>
        <th>Unit No.</th>
        <th>P.O Date</th>
        <th>StockIn Qty</th>
        <th>Delivery Date</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>
    
    </tbody>
  </table>

<script type="text/javascript">
    function ShowHideDiv() {
        var ddlPassport = document.getElementById("ddlPassport");
        var stock = document.getElementById("stocks");
        stocks.style.display = ddlPassport.value == "1" ? "block" : "none";
    }
</script>     
    </div>

<div class="row"  id="stock1" style="display: none">                   
  <table class="table table-bordered" style="width:100%; border: solid 1px;" >
    <thead>
      <tr>
        <th>Sl</th>
        <th>Item Selection</th>
        <th>P.O Quantity</th>
        <th>Unit No.</th>
        <th>P.O Date</th>
        <th>StockIn Qty</th>
        <th>Delivery Date</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>
        
      <tr>
        <td>2.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>
    
    </tbody>
  </table>

<script type="text/javascript">
    function ShowHideDiv() {
        var ddlPassport = document.getElementById("ddlPassport");
        var stock = document.getElementById("stock1");
        stock1.style.display = ddlPassport.value == "2" ? "block" : "none";
    }
</script>     
    </div>                
    </div>

select1
select1889×247 5.82 KB

on select 1 i am not being able to show blocks but on select 2 i can show two sets of tables where as i want to show only one table on select 1

select
select1008×343 28.1 KB

select2 i am able to show blocks with tables but how do i show only one block in select1 tag? please help!

2

okay so i have figured it out myself but now i need to insert data’s in the database how can i please help guys?


> How can i insert into DB help please

<div class="col-25"><label>4. P.O Quantity:*</label>

    <select name="quantity" id="selector" onchange="yesnoCheck(this);">
        <option value="select">Select Here</option>
        <option value="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
    </select>
    </div><script>            
   function yesnoCheck(that) 
{
    if (that.value == "one") 
    {
        document.getElementById("first").style.display = "block";
    }
    else
    {
        document.getElementById("first").style.display = "none";
    }
    if (that.value == "two")
    {
        document.getElementById("second").style.display = "block";
    }
    else
    {
        document.getElementById("second").style.display = "none";
    }
    if (that.value == "three")
    {
        document.getElementById("third").style.display = "block";
    }
    else
    {
        document.getElementById("third").style.display = "none";
    }
                }</script>
                
<hr>
<div id="first" style="display: none;">
    <h5>Insert Details</h5>
   <table class="table table-bordered" style="width:100%; border: solid 1px;" >
    <thead>
      <tr>
        <th>Sl</th>
        <th>Item Selection</th>
        <th>P.O Quantity</th>
        <th>Unit No.</th>
        <th>P.O Date</th>
        <th>StockIn Qty</th>
        <th>Delivery Date</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>
    </tbody>
  </table>
<br/>
</div>
<div id="second" style="display: none;">
    <h5>Insert Details</h5>
    <table class="table table-bordered" style="width:100%; border: solid 1px;" >
    <thead>
      <tr>
        <th>Sl</th>
        <th>Item Selection</th>
        <th>P.O Quantity</th>
        <th>Unit No.</th>
        <th>P.O Date</th>
        <th>StockIn Qty</th>
        <th>Delivery Date</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>        
        <tr>
        <td>2.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>
    </tbody>
  </table><br/>
</div>
<div id="third" style="display: none;">
    <h5>Insert Details</h5>
   <table class="table table-bordered" style="width:100%; border: solid 1px;" >
    <thead>
      <tr>
        <th>Sl</th>
        <th>Item Selection</th>
        <th>P.O Quantity</th>
        <th>Unit No.</th>
        <th>P.O Date</th>
        <th>StockIn Qty</th>
        <th>Delivery Date</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>        
        <tr>
        <td>2.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>
        <tr>
        <td>3.</td>
        <td>
        <select required name="itemselect" id="">
        <option value="">Select here</option>  
        <option value="kg">Pen</option>
        <option value="gm">Teabag</option>
        <option value="cm">Pencil</option>
        <option value="ltr">Paper Ream</option>
        <option value="packet">Tray</option>
        <option value="boxes">Gift</option>
        <option value="carton">Battery</option>
            <option value="mg">Diary</option></select>       
           </td>
        <td><input type="number" style="width:100px;" name="poqty" placeholder="P.O qty.."></td>
        <td><input type="number" style="width:100px;" name="unitno" placeholder="Unit Number.."></td>
        <td><input type="date" style="width:122px;" name="Deliverydate" placeholder="Delivery Date.."></td>
        <td><input type="number" style="width:100px;" name="stockqty" placeholder="stockin no.."></td>
        <td><input type="date" style="width:122px;" name="stockqty" placeholder="delivery date.."></td>   
      </tr>
    </tbody>
  </table><br/>
</div>
<br />
</div>             

                
    </div>
            
<script src="js/jquery.min.js"></script>
  <script src="js/popper.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/main.js"></script>	
   
            
       
                    
      <input type="submit" value="Submit" name="ronel"  onClick="confSubmit(this.form);">
      
                  
  </form>
</div>
<script type="text/javascript">
                function confSubmit(form) {
                    if (confirm("Are you sure you want to submit the form?")) {
                        form.submit();
                    } else {
                        alert("You decided to not submit the form!");
                    }
                }
</script>
  </div>
        </div>          
            </div>
3

Add IDs to the <tr> elements so you can show/hide each row according to the value from the <select> element. Then you only need one table.

4

yes thanks i have added id’s but how can i insert them to my database using form?

5

I think you’ll need to do something about the field naming if you want to be able to insert more than one row into your table at the same time. Either suffix with a unique identifier (the table row number, for example) or use arrays.

I don’t see a form opening tag either, though that may be before the code that you posted in the forum.

Once you’ve got that sorted, you can just var_dump($_POST) in the form processing code and see what has come from the form, validate it and then handle the insert.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.