Trying to upload multiple files with text box but, on submission, the form the name, date text has no value

This code allows me to save the file correctly and also saves the name to database, but the textbox (Name, date) value is empty despite it having an inputted value.

Here are the PHP and HTML Files with JavaScript.

index.html

<html>
<head>
    <title>Load files</title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#savepr').submit(function (e) {
                e.preventDefault();
                var myfiles = document.getElementById("myfiles");
                var files = myfiles.files;
                var data = new FormData();

                for (i = 0; i < files.length; i++) {
                    data.append('file' + i, files[i]);
                }

                $.ajax({
                    url: 'php/saveorder.php',
                    type: 'POST',
                    contentType: false,
                    data: data,
                    processData: false,
                    cache: false
                }).done(function (msg) {
                    $('#savemodal').modal('hide');
                    setTimeout(function () {
                        swal({
                                title: "Nice!",
                                text: "Done Saving Request  !",
                                type: "success",
                                confirmButtonText: "OK"
                            },
                            function (isConfirm) {
                                if (isConfirm) {
                                    window.location.href = "index.php";
                                }
                            });
                    }, 1000);
                });
            });
        })
        ;
    </script>
</head>
<body>
    <form role="form" className='savepr' name="savepr" id="savepr" encType="multipart/form-data" method="post">
        <div id="upload">
            <div className="fileContainer">
                <input id="myfiles" type="file" name="myfiles[]" multiple="multiple"/>
                <input id="date" type="date" name="date"/>
                <input id="name" type="name" name="name"/>
            </div>
            <button className="btn btn-success btn-flat" id="submit" name="submit">Confirm</button>
        </div>
    </form>
    
    <div id="loadedfiles">
    </div>
</body>
</html>

JavaScript
​x
 
<html><head>    <title>Load files</title>    <script src="jquery.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {            $('#savepr').submit(function (e) {                e.preventDefault();                var myfiles = document.getElementById("myfiles");                var files = myfiles.files;                var data = new FormData();​                for (i = 0; i < files.length; i++) {                    data.append('file' + i, files[i]);                }​                $.ajax({                    url: 'php/saveorder.php',                    type: 'POST',                    contentType: false,                    data: data,                    processData: false,                    cache: false                }).done(function (msg) {                    $('#savemodal').modal('hide');                    setTimeout(function () {                        swal({                                title: "Nice!",                                text: "Done Saving Request  !",                                type: "success",                                confirmButtonText: "OK"                            },                            function (isConfirm) {                                if (isConfirm) {                                    window.location.href = "index.php";                                }                            });                    }, 1000);                });            });        })        ;    </script></head><body>    <form role="form" className='savepr' name="savepr" id="savepr" encType="multipart/form-data" method="post">        <div id="upload">            <div className="fileContainer">                <input id="myfiles" type="file" name="myfiles[]" multiple="multiple"/>                <input id="date" type="date" name="date"/>                <input id="name" type="name" name="name"/>            </div>            <button className="btn btn-success btn-flat" id="submit" name="submit">Confirm</button>        </div>    </form>        <div id="loadedfiles">    </div></body></html>​

This is the PHP insert query.

$queryadd=mysqli_query($link,"insert  into attachment
    (FILENAME,DATE,NAME) VALUES (
    '".$name."','".$DATE."','".$NAME."')");

JavaScript
 
$queryadd=mysqli_query($link,"insert  into attachment    (FILENAME,DATE,NAME) VALUES (    '".$name."','".$DATE."','".$NAME."')");​

Answer

You never add the form values to the data being sent to the server, only the files:

var data = new FormData();
for (i = 0; i < files.length; i++) {
    data.append('file' + i, files[i]);
}

JavaScript
 
var data = new FormData();for (i = 0; i < files.length; i++) {    data.append('file' + i, files[i]);}​

Just add the values with it:

data.append('date', $('#date').val());
data.append('name', $('#name').val());

JavaScript
 
data.append('date', $('#date').val());data.append('name', $('#name').val());​

Advertisement

Answer