I have an HTML form that takes input and then it is sent as JSON using a ajax script. Within this form is another form to upload images to the webserver using PHP and another JS script. The problem I am having is when I hit the 'Upload File' button it uses the function for the JSON post, but doesn't use the PHP/JS to upload the image to the webserver.
I tried to combine the two form enctypes into one, but that didn't seem to work. It hits the first form and doesn't continue to the next it seems. Is there a way to combine this? or is it as simple as syntax errors.
HTML forms:
<div id="createModal" class="modal fade" role ="dialog">
<div class="modal-dialog modal-lg">
<!--Modal content-->
<div class="modal-content">
<div class="modal-header" style="text-align: center">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Listing</h4>
</div>
<div class="modal-body">
<div style="text-align: left">
<form enctype='application/json' style="text-align: center" method="post" name="form" id="form" onsubmit="submitForms()">
<input name="seller" value="" type="text" class="form-control" placeholder="First and Last Name">  
<input name="email" value="" type="text" class="form-control" placeholder="Email">  
<select name="category" value="" class="form-control">
<option selected disabled value="choose">--Category--</option>
<option value="furniture">Furniture</option>
<option value="books">Books</option>
<option value="music">Music</option>
</select>  
<input name="item" value="" type="text" class="form-control" placeholder="Item Name">  
<input name="itemdesc" value="" type="text" class="form-control" placeholder="Item Description">  
<input name="model" value="" type="text" class="form-control" placeholder="Model">  
<input name="price" value="" type="text" class="form-control" placeholder="Price ($00.00)">  
</form>
<h2> Image Upload </h2>
<form enctype='multipart/form-data' action='' method='POST' name="uploadForm" id="uploadForm" onsubmit="submitForms()">
Only JPEG, PNG, JPG types allowed. Image size should be less than 100KB.
<br/><br/>
<div id="filediv"><input name="file[]" type="file" id="file"/></div>
<br/><br/>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<!--<input type="submit" value="Upload File" name="upload_submit" id="upload_submit" class="upload"/>-->
<!--- Including PHP Script -->
<?php include 'upload.php'; ?>
<div class="modal-footer">
<input type="submit" class="btn btn-default" value='Submit'/>
</div>
</form>
<script>
var success = ("The forms were submitted");
function submitForms()
{
document.getElementById("form").submit();
document.getElementById("uploadForm").submit();
console.log(success);
alert(success);
}
</script>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
<script src="js/json.js"></script>
JSON Ajax:
var form = document.forms['form'];
form.onsubmit = function (e) {
//stop regular form submission
e.preventDefault();
//collect the form data
var data = {};
for (var i = 0, ii = form.length; i <ii; ++i) {
var input = form[i];
if (input.name) {
data[input.name] = input.value;
}
}
//console.log(JSON.stringify(data));
//construct an HTTP request
var url = [removed]
$.ajax({
url: url,
type: 'POST',
crossDomain: true,
data: JSON.stringify(data),
dataType: 'json',
contentType: "application/json",
success: function (response) {
var resp = JSON.parse(response)
alert(resp.status);
},
error: function (xhr, status) {
alert("error");
}
});
//console.log(JSON.stringify(data))
//console.log(url);
};
Upload PHP:
<?php
if (isset($_POST['upload_submit'])) {
$j = 0; // Variable for indexing uploaded image
$target_path = "/tmp/uploads"; // Declaring path for uploaded images.
for ( $i = 0; $i < count($_FILES['file']['name']); $i++) {
// Loop to get individual element from the array
$validextensions = array("jpeg","jpg","png"); // Extensions that are allowed
$ext = explode('.', basename($_FILES['file']['name'][$i])) // Explode file name from dot (.)
$file_extension = end($ext); // Store extentions in the variable
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext) - 1]; //Set the target path with the name of the image
$j = $j + 1; // Increment the number of uploaded images according to the files in the array
if (($_FILES["file"]["size"][$i] < 100000) // Approx. 100kb files can be uploaded
&& in_array($file_ectensions, $validextensions)) {
if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
// If file moved to uploads folder
echo $j. ').<span id="noerror">Image uploaded successfully!. </span><br/><br/>';
} else { // If File was not moved.
echo $j. '). <span id="error">Please try again!.<span><br/><br/>';
}
} else { // If file size and File type incorrect.
echo $j. ').<span id="error"> Invalid file Size or Type</span> <br/><br/>';
}
}
}
?>
Thanks for any help with this.
