Issue
this is my code.
...
<body>
<div class="container">
<div class="row text-center">
<div class="col-2"></div>
<div class="col-8">
<form id="upload_form" enctype="multipart/form-data" method="post">
<div class="form-group">
<input type="file" name="video_name" id="video_name">
<select name="video_format">
<option value="">Choose Video format</option>
<?php require 'connection.php';
$query = "SELECT * FROM videofmt";
$result = mysqli_query($link, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
<option value="<?php echo $row["video_format"]?>"><?php echo $row["video_format"];?>
<?php }} ?>
</select>
</div>
<div class="form-group">
<input class="btn btn-primary" type="button" value="Upload File" name="upload"
onclick="uploadFileHandler()">
</div>
</form>
</div>
</div>
</div>
<script>
function _(abc) {
return document.getElementById(abc);
}
function uploadFileHandler() {
document.getElementById('progressDiv').style.display='block';
var file = _("video_name").files[0];
var formdata = new FormData();
formdata.append("video_name", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
function progressHandler(event) {
var loaded = new Number((event.loaded / 1048576));//Make loaded a "number" and divide bytes to get Megabytes
var total = new Number((event.total / 1048576));//Make total file size a "number" and divide bytes to get Megabytes
_("uploaded_progress").innerHTML = "Uploaded " + loaded.toPrecision(5) + " Megabytes of " + total.toPrecision(5);//String output
var percent = (event.loaded / event.total) * 100;//Get percentage of upload progress
_("progressBar").value = Math.round(percent);//Round value to solid
_("status").innerHTML = Math.round(percent) + "% uploaded";//String output
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;//Build and show response text
_("progressBar").value = 0;//Set progress bar to 0
document.getElementById('progressDiv').style.display = 'none';//Hide progress bar
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";//Switch status to upload failed
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";//Switch status to aborted
}
</script>
</body>
...
I have a code that select rows from mysql for option selection. Ajax could not identify my selected value from the drop down list. I tried to echo the selected value $row["video_format"] but this does not work but echo only the last row from mysql.
The problem is how to show or send the particular selected option from the dropdown list from the while loop.
Solution
I think i found multiple issues:
you are missing closing option tags (
</option>), so every option just gets opened; also add thevideo_formatas id so you can use it in javascriptas said in the comments, you are missing the input in the
formdataobject
Do the following:
<!-- ... -->
<select name="video_format" id="video_format">
<option value="">Choose Video format</option>
<?php
require 'connection.php';
$query = "SELECT * FROM videofmt";
$result = mysqli_query($link, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<option value="<?php echo $row["video_format"]; ?>"><?php echo $row["video_format"]; ?></option>
<?php
}
}
?>
</select>
<!-- ... -->
function uploadFileHandler() {
// ...
var file = _("video_name").files[0];
var formdata = new FormData();
formdata.append("video_name", file);
var format = _("video_format").value;
formdata.append("video_format", format);
// ...
}
add an closing tag and add the input to the formdata.
TIPP:
There is also a way to easily add input fields to the formdata object
formdata = new FormData(
document.getElementById("upload_form")
);
Answered By - Play_it
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.