Insert to database multiple options from HTML form via PHP

Question

I have drop-down list, after selecting any value It adding new row with some fields, example shown in image below:

I have insert.php to insert values to MySQL database. But there is problem, that only values from first row are inserted to database.

PHP looks like:

foreach($_POST['CertificateType'] as $key => $val){ 

    $CertificateType = $val;

    $CertificateType = $_POST['CertificateType'][$key]; 
    $STCWCode        = $_POST['STCWCode'][$key];            
    $CertNo          = $_POST['CertNo'][$key];          
    $FromCert        = $_POST['FromCert'][$key];            
    $ToCert          = $_POST['ToCert'][$key];  

    $CertificateType = mysqli_real_escape_string($link, $CertificateType);  
    $STCWCode        = mysqli_real_escape_string($link, $STCWCode);                 
    $CertNo          = mysqli_real_escape_string($link, $CertNo);           
    $FromCert        = mysqli_real_escape_string($link, $FromCert);                 
    $ToCert          = mysqli_real_escape_string($link, $ToCert);      

    $sql3 = "INSERT INTO Tbl (
        CertificateType     
        ,UserId    
        ,STCWCode               
        ,CertNo                 
        ,FromCert               
        ,ToCert
        ,DateCreated
    ) VALUES (
        '$CertificateType',
        '$UserID',  
        '$STCWCode',            
        '$CertNo',          
        '$FromCert',            
        '$ToCert',
        now())";
    if(mysqli_query($link, $sql3)){
        echo "Resume created successfully.";
    } else{
        echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
    }
} 

HTML looks like:

<fieldset class="fieldset-borders">
    <legend>4. Licenses & Certificates</legend>
    <ul class="header"> 
      <li>
        <select id='options' name="CertificateType[]" class="field-style div-format align-left">
          <option selected disabled value="0">Select certificates</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>  
        </select>  
      </li>
    </ul>  
    <ul class="cert" id="cert">     
      <li>
        <ul class="column">         
          <li><p class="test-label11">Name</p></li>                     
        </ul>
      </li>
      <li>
        <ul class="column">         
          <li><p class="test-label11">STCW Code</p></li>                        
        </ul>
      </li>
      <li>
        <ul class="column">         
          <li><p class="test-label11">Cert. No</p></li>                     
        </ul>
      </li>
      <li>
        <ul class="column">         
          <li><p class="test-label11">Place of Issue</p></li>                       
        </ul>
      </li>
      <li>
        <ul class="column">         
          <li><p class="test-label11">Date of Issue</p></li>                        
        </ul>
      </li>
      <li>
        <ul class="column">         
          <li><p class="test-label11">Date of Expire</p></li>                       
        </ul>
      </li>
      </ul>
        <div class="action2" ></div>


</fieldset>

Javascript code you can check at JS FIDDLE

I've created JS FIDDLE to check that part of the form. Have you ideas how to fix It?

Answer 1

You need to create forms with this format

<form action="insert.php" method="post">  
<ul>
    <li>
        <input name="CertificateType[0]" type="hidden">
        <input name="CertificateType[0]['STCWCode']" type="text">
        <input name="CertificateType[0]['CertNo']" type="text">
        <input name="CertificateType[0]['PlaceofIssueCert']" type="text">
        <input name="CertificateType[0]['FromCert']" type="date">
        <input name="CertificateType[0]['ToCert']" type="date">
    </li>
    <li>
        <input name="CertificateType[1]" type="hidden">
        <input name="CertificateType[1]['STCWCode']" type="text">
        <input name="CertificateType[1]['CertNo']" type="text">
        <input name="CertificateType[1]['PlaceofIssueCert']" type="text">
        <input name="CertificateType[1]['FromCert']" type="date">
        <input name="CertificateType[1]['ToCert']" type="date">
    </li>
    ...
</ul>
</form>

When you submit form with this format , you will receive Numeric Key array in $_POST['CertificateType'] in insert.php

array(
  "0" => array(
           "STCWCode" => "somevalue",
           "CertNo" => "somevalue",
           "PlaceofIssueCert" => "somevalue",
           "FromCert" => "somevalue",
           "ToCert" => "somevalue",  
         ),
  "1" => array(
           "STCWCode" => "somevalue",
           "CertNo" => "somevalue",
           "PlaceofIssueCert" => "somevalue",
           "FromCert" => "somevalue",
           "ToCert" => "somevalue",  
         ),
   . . .
)

Here each index will represent one row.This can be retrived using foreach loop as below :

Update your php code as

foreach($_POST['CertificateType'] as $val){ 

$CertificateType = $val;

$CertificateType = $val; 
$STCWCode        = $val['STCWCode'];            
$CertNo          = $val['CertNo'];          
$FromCert        = $val['FromCert'];            
$ToCert          = $val['ToCert'];  

$CertificateType = mysqli_real_escape_string($link, $CertificateType);  
$STCWCode        = mysqli_real_escape_string($link, $STCWCode);                 
$CertNo          = mysqli_real_escape_string($link, $CertNo);           
$FromCert        = mysqli_real_escape_string($link, $FromCert);                 
$ToCert          = mysqli_real_escape_string($link, $ToCert);      

$sql3 = "INSERT INTO Tbl (
    CertificateType     
    ,UserId    
    ,STCWCode               
    ,CertNo                 
    ,FromCert               
    ,ToCert
    ,DateCreated
) VALUES (
    '$CertificateType',
    '$UserID',  
    '$STCWCode',            
    '$CertNo',          
    '$FromCert',            
    '$ToCert',
    now())";
if(mysqli_query($link, $sql3)){
    echo "Resume created successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
} 

Answer 2

Use your fiddle JavaScript and add certificate type in hidden field for every row; and name it RowCertificateType same as other fields for row;

<input type="hidden" name="RowCertificateType[]" value="" />
<!-- set value of this field same as you are showing in li as label for this row; -->

then in your php script use as follows:

foreach($_POST['RowCertificateType'] as $key=> $val){

  $CertificateType = $val;

  $STCWCode = $_POST['STCWCode'][$key];
  $CertNo = $_POST['CertNo'][$key];
  $FromCert = $_POST['FromCert'][$key];
  $ToCert = $_POST['ToCert'][$key];

  $CertificateType = mysqli_real_escape_string($link, $CertificateType);
  $STCWCode = mysqli_real_escape_string($link, $STCWCode);
  $CertNo = mysqli_real_escape_string($link, $CertNo);
  $FromCert = mysqli_real_escape_string($link, $FromCert);
  $ToCert = mysqli_real_escape_string($link, $ToCert);

  $sql3 = "INSERT INTO Tbl (
        CertificateType     
        ,UserId    
        ,STCWCode               
        ,CertNo                 
        ,FromCert               
        ,ToCert
        ,DateCreated
    ) VALUES (
        '$CertificateType',
        '$UserID',  
        '$STCWCode',            
        '$CertNo',          
        '$FromCert',            
        '$ToCert',
        now())";
  if(mysqli_query($link, $sql3)){
    echo "Resume created successfully.";
  }else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
  }
}     

:)

Answer 3

See, what i found is:

1. First, Replace CertificateType[] with CertificateType in <select id='options' name="CertificateType[]" class="field-style div-format align-left"> Because, this dropdown is not multiple. On based upon onchange functionality only you are getiing STCWCode, CertNo, FromCert & ToCert values, which are multiple (Not CertificateType dropdown). What you can do is: you can append one hidden text namely CertificateTypeHidden[] in which value of CertificateType dropdown will get inserted.

2. As i pointed in Ist Point. CertificateType is not multiple. So, it's considering only one value. What you can do is : As i wrote above, instead of CertificateType, you can use CertificateTypeHidden[] Like foreach($_POST['CertificateTypeHidden'] as $key => $val){.

After Changes, code should look like this way. (If you follow above points)

<?php
foreach($_POST['CertificateTypeHidden'] as $key => $val){ 
  $CertificateType = $_POST['CertificateTypeHidden'][$key]; 
  $STCWCode        = $_POST['STCWCode'][$key];  
  $CertNo          = $_POST['CertNo'][$key];   
  $FromCert        = $_POST['FromCert'][$key];   
  $ToCert          = $_POST['ToCert'][$key];  
    .
    .
    .
}
?>

For my testing purpose. I removed foreach($_POST['CertificateType'] as $key => $val){ with foreach($_POST['STCWCode'] as $key => $val){. All appended multiple textbox values coming correctly.

<?php
foreach($_POST['STCWCode'] as $key => $val){ 
  $CertificateType = $_POST['CertificateTypeHidden'][$key]; 
  $STCWCode        = $_POST['STCWCode'][$key];  
  $CertNo          = $_POST['CertNo'][$key];   
  $FromCert        = $_POST['FromCert'][$key];   
  $ToCert          = $_POST['ToCert'][$key];  
    .
    .
    .
}
?>

This is the only issue. All well. Just append one hidden field. (<input type='hidden' name='CertificateTypeHidden[]'>). In which values of selected dropdown come and sit in value attribute of this hidden field. In submit page or insert.php page, do foreach using CertificateTypeHidden.

Go through it. All the best.

Answer 4

you loop over $_POST['CertificateType'], which (with your configuration) will only contain one value (no multiselect on the select field)