I'm working on a Vehicle damage form where users can click picture of their vehicle.
How it works?
- They choose a description of the photo they want to click.
- Then they click on Add button
- I append input type file as a child in the div (which is inside the form element).
Issues?
These appended input type files are not passing data to next page.
What I tried?
I added input type file field in my html code and it worked perfectly. I was able to get data on next page via PHP. But when I'm adding the same file element via javascript, it's not passing data. My $_FILES array shows empty.
HTML Code
<div class="meet-mainbody">
<form action="tst.php" method="POST" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-6">
<h3>Panel Damage</h3>
</div>
<div class="col-sm-3"><input type="radio" name="panel_damage" class="meet-checkbox" value="No" checked onclick="shwPanelPhoto('panDamag', 'N')"/> NO</div>
<div class="col-sm-3"><input type="radio" name="panel_damage" class="meet-checkbox" value="Yes" onclick="shwPanelPhoto('panDamag', 'Y')"/> YES</div>
</div>
<br>
<div class="row hid_field" id="panDamag">
<div class="col-sm-6">
<select name="panvalues" class="meet-select" id="panDamType">
<option value="">Choose a Photo Description</option>
<?php
$getPanD = "SELECT S.OptionName, S.Active FROM table1 Q
LEFT JOIN table2 L on Q.QuestionID = L.QuestnID
LEFT join table3 S on L.OptionID = S.SelectID
WHERE Q.QuestionID = '15' and S.SelectType = 'AddedBox' and S.Active = 'true'";
$getPanDPass = sqlsrv_query($conn, $getPanD, $params, $options);
if($getPanDPass){
while($PDrow = sqlsrv_fetch_array($getPanDPass, SQLSRV_FETCH_ASSOC)){
echo'<option value="'.$PDrow['OptionName'].'">'.$PDrow['OptionName'].'</option>';
}
}
echo '</select>';
?>
</select>
</div>
<div class="col-sm-6"><button type="button" class="panel-button" onclick="AddChooseFile('shwChoos')">ADD</button></div>
</div>
<br>
<div id="shwChoos"></div>
<br><br>
<!--- end code here---->
<center><input id="sub_btn" type="submit" class="meet-button meet-disabled " name="submit" value="Submit" disabled /></center>
</form>
</div>
Here is the code where I'm adding input type file via javacsript
function AddChooseFile(opt){
var typ = document.getElementById('panDamType').value;
var par = document.getElementById('shwChoos');
var cnt = par.childElementCount;
console.log('count is '+cnt);
//create elements
var elm1 = document.createElement('div');
elm1.setAttribute('class', 'row');
elm1.setAttribute('id', '');
// elm1.innerHTML = '<div class="col-sm-4"><b>'+typ+'</b></div>'+
// '<div class="col-sm-4"><input type="file" name="mtu" accept="image/*" capture required ></div>'+
// '<div class="col-sm-4"><i class="fas fa-trash" onclick=""></i></div>';
var elm2 = document.createElement('input');
elm2.setAttribute('type', 'file');
elm2.setAttribute('name', 'mtu');
elm2.setAttribute('accept', 'image/*');
elm1.appendChild(elm2);
par.appendChild(elm1);
par.appendChild(document.createElement('br'));
}
