Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142353

Input type="file" data empty when posted

$
0
0

I'm working on a Vehicle damage form where users can click picture of their vehicle.

enter image description here

How it works?

  1. They choose a description of the photo they want to click.
  2. Then they click on Add button
  3. 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'));


}

Viewing all articles
Browse latest Browse all 142353

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>