I try to submit a form with some dropzone-added files and additional fields.
I don´t want those dropzone Ajax Features, because i want to add some information by additional inputs.
So, at least a very simple Submit-Form with multiple Files, which gets processed after pressing the submit button.
So far, the client side works fine, but when I submit the form, $_FILES is empty! Why?
What I got so far:
<?
if(isset($_POST))
{
print_r($_POST);
print_r($_FILES);
exit;
}
?>
<form id="smart-form" enctype="multipart/form-data" method="POST" action="upload.php">
<div class="form-body">
<div class="section">
<div class="dropzone" id="myDropzone">
<h3 class="dz-drop-title"> Drop files here or </h3>
<p class="dz-clicker"> <span> Browse File </span> </p>
<div class="fallback">
<input name="file[]" type="file" multiple />
</div>
</div>
</div><!-- end section -->
</div><!-- end .form-body section -->
<label style="padding: 5px;" for="another_field_1">another field 1 <input id="another_field_1" type="text" name="testinput1"></label><br>
<label style="padding: 5px;" for="another_field_2">another field 2 <input id="another_field_2" type="text" name="testinput2"></label>
<div class="form-footer">
<button type="submit" class="button btn-primary"> Send Form </button>
</div><!-- end .form-footer section -->
</form>
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery(".dropzone").dropzone({
url: "upload.php",
dictDefaultMessage: "Datei bitte hier ablegen!",
success: function() {
jQuery('.success-mark').show();
jQuery('.error-mark').hide();
},
error: function() {
jQuery('.success-mark').hide();
jQuery('.error-mark').show();
}
});
});
</script>
Related
I'm working in laravel 5.3 project.
before asking question I have tried these links :
1st , 2nd , 3rd , 4th ,5th but no luck.
let me show you my code.
details.blade.php
<form class="form" method="post" action="{{url('add_user_photo_gallery')}}" id="my-awesome-dropzone" name="validate_resume">
<input name="_token" type="hidden" value="{{ csrf_token() }}"/>
<div class="card-body">
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class="form-group floating-label">
<div id="dropzonephoto" class="dropzone dz-clickable form-fileupload">
<div class="dz-message dz-default" style="text-align:center;">
<span>Click Here to upload Photo </span>
</div>
</div>
</div>
<small>jpg, png , jpeg - upto 1 Mb max</small>
</div>
<div class="col-md-12">
<input type="text" name="first_name" />
</div>
<div class="col-md-12">
<input type="text" name="last_name" />
</div>
<div class="col-md-12">
<input type="email" name="email" />
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" id="btn_save_photo" class="custom-btn primary-btn pull-right" required>
<input type="reset" id="btn_reset_photo" class="custom-btn warning-btn pull-right" value="Cancle" required>
</div>
</div>
</div>
</div>
</form>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('#dropzonephoto', { // Make the whole body a dropzone
url: base_path + '/add_user_photo_gallery',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
paramName: "images",
parallelUploads: 1,
maxFilesize: 1.0,
maxFiles:20,
acceptedFiles: ".png,.jpg,.jpeg",
dictInvalidFileType: 'This file type is not supported.',
dictFileTooBig:'File size too Big',
addRemoveLinks: true
});
public function add_user_photo_gallery(Request $request){
dd($request->all());
}
In my controller function I print request that coming from form. I'm getting all the field except dropzone image.
using above dropzone script when I select image it's immediately go to controller and I can see all image details in console / network.I don't want that so I added below code in my script.
autoProcessQueue:false,
$('#btn_save_photo').on('click',function(e){
e.preventDefault();
myDropzone.processQueue();
});
After add this code image is upload on submit button but other form element is not submitted. and this upload process is shown in inspect element / network section .
So what I want is on submit button want to page refresh and print all form data with dropzone image.
Anyone is here to solve my problem ?
I want to autosave my text in tiny mce with a post to my controller. I want only autosave the name="inhoud2" of the textarea.
Here is my header:
#extends('dashboard.app')
#section('content')
#include('auth.flashMessageError')
<script src="\tinymce_4.4.1\tinymce\js\tinymce\tinymce.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>tinymce.init({ selector: 'textarea', height : 350, }); </script>
<script>tinymce.init({ selector:'textarea' });</script>
<script>
var autosaveOn = false;
function myAutosavedTextbox_onTextChanged()
{
if (!autosaveOn)
{
autosaveOn = true;
$('#inhoud2').everyTime("300000", function(){
$.ajax({
type: "POST",
url: "opslaanedit",
data: $("#editsubmit").serialize(),
success: function(msg) {
$('autosave').text("gesaved");
}
});
}); //closing tag
}
}
</script>
This is my html code:
<form method="POST" id="editsubmit" action="/opslaanedit" >
{!! csrf_field() !!}
<div id="autosave"></div>
<div class="panel panel-flat">
<div class="panel-heading">
<h5 class="panel-title">Wijzig Document</h5>
<div class="heading-elements">
</div>
</div>
<div class="panel-body">
<fieldset>
<legend class="text-semibold">Wijzig de inhoud</legend>
<div class="form-group">
<input type="hidden" value="{{basename($root)}}" name="filename" id="filename" readonly="readonly" class="form-control" > <!-- verborgen veld voor de html name -->
<label><b>Titel</b> </label>
<input type="text" value="{{$title}}" id="titelnieuw" name="titelnieuw" class="form-control">
</div>
<textarea id="inhoud2" name="inhoud2"><?php echo file_get_contents($root);?></textarea> <!--tiny mce editor -->
<br>
<div class="text-left">
<button type="submit" class="btn btn-primary">Wijzig <i class="icon-arrow-right14 position-right"></i></button>
</div>
</div>
</div>
</form>
#endsection
I doesn't save my text automatically.
This looks like inherited code. There's lot of space for improvement. I don't know if textarea is saved for the first time, or just updated, so I cant figure to which route should I post value of textarea. Are there any other fields required for that?
There are many factors. And if you only afraid of losing textarea content, I would use just autosave plugin from tinymce. It keeps content in local storage.
I know this question has been asked before, but read through to see why what I'm asking is different.
My first form is like this where newsearch.php is the name of the php file which the form is included in. I want to listen to any POST calls inside this php file since I have my if(isset($_POST code here.
<form action="newsearch.php" method="post">
So, I'm using bootstrap to layout the page, and I have another form I want to include in a <div class="row"> which is inside the form I mentioned before. What I'm asking is, can I add the form html code somewhere else in the php file and call it to appear inside the <div>?
What I want is a way to do this:
<div class="row">
<div class="col-lg-6" align="center">
<h4>Search For Galleries</h4>
<form action="newsearch.php" method="post">
<br>
<input type="text" name="valueToSearch" placeholder="Search"><br><br>
<input type="submit" name="search" value="Search"><br><br>
</div>
<div class="col-lg-6" align="center">
<h4>Create new Gallery</h4>
<!-- HOW CAN I INCLUDE A FORM HERE? -->
</div>
</div>
As you can see, the first form is not closed. That's coz it's closed way below in the file.
My second form is this:
<form action="inserttogal.php" method="post">
Gallery Name: <input type="text" name="gname" /><br><br>
Gallery Type: <input type="text" name="gtype" /><br><br>
<input type="submit" name="newgal"/>
</form>
Instead of using two <form> constructs (and nested, to boot) why not:
(1) Change the forms to ordinary DIVs
(2) Use jQuery to trap a button click
(3) Read the values into variables (this allows you to do any required field validation without negating the form's default action)
(4) Using javascript/jQuery, construct a composite HTML <form> (combining the two forms) in a variable, then
(5) Use jQuery to append() the form to the bottom of the page, and use
(6) $('form').submit() to submit the composite form.
A bit more work, but it will work. Note that Bootstrap uses/requires jQuery, so the library is already loaded. Might as well use it.
Code example:
Obviously, this example is not appropriate for your application, just showing you what you can do and how to get around your <form> problem, via jQuery/javascript.
$('#btnOne').click(function(){
var fn = $('#fn').val();
var ln = $('#ln').val();
var ag = $('#age').val();
if (ln==''){
alert('Please complete all fields');
return false;
}
var myFrm = '\
<form id="myForm" action="postFile.php" method="post">\
<input name="fname" value="' +fn+ '" />\
<input name="lname" value="' +ln+ '" />\
<input name="age" value="' +ag+ '" />\
</form>
';
$('body').append(myFrm);
$('#myForm').submit();
});
#frmOne{}
#frmTwo{background:wheat;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="frmOne">
First Name: <input id="fn" type="text" /><br>
Last Name: <input id="ln" type="text" /><br>
<div id="frmTwo">
Age: <input id="age" type="text" />
</div>
</div>
<button id="btnOne">Form One Clicker</button>
You should also look into AJAX (what it is, why use it -- it's quite simple!) and see if it could be of use. This post contains a link to another post with some simple examples that you should study. I included both posts because each has something you might find informative. Twenty minutes of poring of these examples could save you days of design frustration.
No form can having another form inside, I tried before.
Suggest apply Ajax or XMLHttpRequest (XHR)
<div class="row">
<div class="col-lg-6" align="center">
<h4>Search For Galleries</h4>
<form action="newsearch.php" method="post">
<br>
<input type="text" name="valueToSearch" placeholder="Search"><br><br>
<input type="submit" name="search" value="Search"><br><br>
</div>
<div class="col-lg-6" align="center">
<h4>Create new Gallery</h4>
<a href="#" data-toggle="modal" data-target="#new"><!--bootstrap modal-->
</div>
</form>
<form name="new_form" id="new_form" method="post" action="">
<div class="modal fade" id="new" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog">
<div class="modal-dialog" role="document" >
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span style="font-size:21px;margin:-15px -10px 0 0;display:inline-block" aria-hidden="true">×</span></button>
<h3 style="">create gallery</h3>
<input type="button" name="create" id="create" class="btn btn-default" value="Create Gallery" />
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(function(){
$("#create").click(function(){
$.ajax({
type: "POST",
url: "new.php",
data: { data:data },
success:
function(){
alert('success');
},
error:
function(){
alert('Error!');
}
});
});
});
</script>
I have a commenting system that sits within a Bootstrap Modal, all works fine in terms of pulling data from the database, and the ability to enter data. the problem is on Submit.
This below is my code for the submit.
$(document).ready(function(){
var form = $('form');
var submit = $('#submit');
form.on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'projectnoteuploads.php',
type: 'POST',
cache: false,
data: form.serialize(),
success: function(data){
console.log(data);
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);
},
error: function(e){
alert(e);
}
});
});
});
myjobspage.php - this is the start of my modal on my main page, it's called from the Notes button
<div id="projnotes" class="modal fade modal-scroll" tabindex="-1" data-width="960">
</div>
I originally had the rest of the modal within the div above, but as I was having this issue of it closing the form and refreshing the page, I decided to move the modal onto another page, and have it called when the button is clicked, but still having the same issue
This is the modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!-- Table shown here (no need to show as not involved) -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<!--comment form -->
<form class="notesform" id="notesform" name="notesform" method="post">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $propid; ?>">
<input type="hidden" name="projno" value="<?php echo $projectno; ?>">
<input type="hidden" name="name" value="<?php echo $inputby; ?>">
<div class="col-md-12 ">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Project Notes *</label>
<div class="col-md-8">
<textarea class="form-control col-md-8" rows="3" name="comment" id="comment"placeholder="Type your comment here...." required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<br>
<input type="submit" class="btn green" id="savenotes" name="submit" value="Submit Comment" />
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
One question on this though is that to call the jquery/Ajax code is done through my main page, is this right or should it be done through the page that the Model body is on?
When the Submit button id="savenotes" is clicked, the modal closes and refreshes the page losing all data within the main page.
How can I submit data to the database without the Modal closing?
I don't know if you've found an answer to this but at least for others who might need solutions just like I once did.
This is the modal page named modal.php:
<div id="projnotes" class="modal fade modal-scroll" tabindex="-1"
data-
width="960">
<!-- div wrapper for modal dialog -->
<div class="modal-dialog">
<!-- div wrapper for modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
</div>
<!-- I guess you wanted your body centered .justify-content-center
should fix that -->
<div class="modal-body justify-content-center">
<div class="row">
<div class="col-md-12">
<!-- Table shown here (no need to show as not involved) -->
</div>
</div>
<!-- I guess you wanted your form centered .justify-content-center
would fix that -->
<div class="row justify-content-center">
<!--comment form -->
<form class="notesform form-block" id="notesform" name="notesform"
method="post" action="projectnoteuploads.php">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $propid =
'propid'; //replace variable $propid ?>">
<input type="hidden" name="projno" value="<?php echo $projectno =
'projectno'; //replace variable $projectno ?>">
<input type="hidden" name="name" value="<?php echo $inputby =
'inputby'; //replace variable $inputby ?>">
<div class="form-group">
<label for="comment" class="control-label">Project Notes *</label>
<textarea class="form-control form-control-md" rows="3" cols="25"
name="comment" style="resize: none;" id="comment" placeholder="Type
your comment here...." required></textarea>
</div>
<input type="submit" class="btn btn-success" id="savenotes"
name="submit" value="Submit Comment" />
</form>
</div>
<!-- I can't find where your Comments are appended
to, so I placed them here using the
class name 'comment-block' as you used in your script -->
<div class="row justify-content-center">
<div class="comment-block"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-
default">Close</button>
</div>
</div>
</div>
</div>
Then this is your myjobspage.php where you will include the modal.php
<?php
include 'modal.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Myjobspage</title>
<link rel="stylesheet"
href="path/to/bootstrap4.0.0/dist/css/bootstrap.min.css">
<script src="path/to/Jquery_3.2.1/jquery-3.2.1.js"></script>
<script src="path/to/bootstrap-
4.0.0/assets/js/vendor/popper.min.js">
</script>
<script src="path/to/bootstrap-4.0.0/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Some Code Here-->
<!-- Button to Launch Modal. Replace appropriately-->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#projnotes">
Launch Comments Modal
</button>
<!-- some other code -->
<!-- script to trigger your modal.php -->
<script src="modalScript.js"></script>
<script src="path/to/bootstrap-4.0.0/js/dist/util.js"></script>
<script src="path/to/bootstrap-4.0.0/js/dist/modal.js"></script>
</body>
</html>
This is the script modalScript.js that will make the request to projectnoteuploads.php via the ajax method.
$(document).ready(function(){
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: 'projectnoteuploads.php',
type: 'POST',
cache: false,
data: $('form').serialize(),
success: function(data){
console.log(data);
//This I guess was where the error was in the previous code.
$('.comment-block').append(data).hide().fadeIn(800);
$('textarea').val(''); //This will wipe out the textarea after
//comment input
},
error: function(e){
alert(e);
}
});
});
});
Please take note, the codes have all being modified from the question, I tried it and it works.
Hey everybody thanks for reading .
I have a problem i don't know how to keep functioning jquery code of a page that has been loaded with ajax. The problem is that on the original page the code executes so the jquery framework has already loaded and when the ajax call comes in to load the data of the other page i get unfunctioning jquery code. The jquery code that was loaded from the ajax page dose not work .
If i was not clear ask for clarification , for more detal the code is below :
The page into which i load the jquery pages :
<?php
ob_start();
include 'includes/chk.php';
?>
<script type="text/javascript">
$(document).ready(function() {
$('#account_link').click(function(){
$.ajax({
type: "POST",
async:false,
url: "ajax/settings_account.php",
success: function(msg){
$('#div_container_sett_acc').replaceWith('<div id="div_container_sett_acc" style="text-align: center;">'+msg+'</div>');
}
});
});
$('#settings_link').click(function(){
$.ajax({
type: "POST",
async:false,
url: "ajax/settings_account.php",
success: function(msg){
$('#div_container_sett_acc').replaceWith('<div id="div_container_sett_acc" style="text-align: center;">'+msg+'</div>');
}
});
});
});
</script>
<div class="ui-grid-a">
<div class="ui-block-a">
<ul data-role="listview" data-divider-theme="d" data-inset="true">
<li data-theme="c">
<a href="#settings" >
Settings
</a>
</li>
<li data-theme="c">
<a href="#account" id="account_link" >
Account
</a>
</li>
</ul>
</div>
<div id="div_container_sett_acc">greg</div>
</div>
<?php
$pagemaincontent = ob_get_contents();
ob_end_clean();
$pageHead='';
$home_page='ui-btn-active';
$pageTitle ='';
include("master.php");
?>
On of the ajax pages being loaded :
<?php
include_once ("../includes/mysql.php");
include_once ("../includes/chk.php");
?>
<div class="ui-block-b">
<div id="settings_link" data-theme="a">
<div data-role="content" data-theme="a" >
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
<p>Back to page "one"</p>
</div><!-- /content -->
</div><!-- /page two -->
<div id="account" data-theme="a">
<div data-role="content" data-theme="a">
<form url="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput1">
Boh
</label>
<input id="textinput1" placeholder="" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="selectmenu1">
Choose:
</label>
<select name="selectmenu1" id="selectmenu1">
<option value="option1">
Option 1
</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="vertical">
<legend>
Choose:
</legend>
<input name="radiobuttons1" id="radio1" value="" type="radio" />
<label for="radio1">
Option
</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="vertical">
<legend>
Choose:
</legend>
<input name="checkbox1" id="checkbox1" type="checkbox" />
<label for="checkbox1">
Checkbox
</label>
</fieldset>
</div>
<input type="submit" value="Submit" />
</form>
</div><!-- /content -->
</div><!-- /page two -->
</div>
If someone could help me out i would be most great-full
You should use on instead of bind:
$(document).ready(function() {
$('#account_link').on('click', function() {...})
$('#settings_link').on('click', function() {...})
});
You need to have a jquery script code inside loaded content. So, there must be the same in the base page and the same included in code called by $.post
$.Posted content is not served by default $(document).ready(function()