Develop Reference

How to use DropzoneJS with PHP and user input

I have a webpage where a user can submit one or several images. I have designed this as a two-step solution, where step1.php contains file uploads and a checkbox:
<form method="post" action="step2.php" enctype="multipart/form-data" name="upload_form">
<div class="form-group">
<label for="InputFile">Choose images:</label>
<input type="file" name="userfile[]" id="file" size="50"><br/>
<input type="file" name="userfile[]" id="file" size="50"><br/>
</div>
<div class="checkbox">
<label><input type="checkbox" name="CheckThis" value="CheckThis">
I have checked this box
</label>
</div>
<input type="hidden" name="id" value="<?php echo $_REQUEST['uid']; ?>">
<button type="submit" class="btn btn-default">Send inn</button>
</form>
Then, in step2.php, I handle the uploaded files, make thumbnails, and asks the user to give the images a title and a comment.
Now, I want to make this more user-friendly and a bit more web 2.0 :-)
My step1.php is now using Dropzone:
<form method="post" action="step2.php" enctype="multipart/form-data" name="upload_form">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="CheckThis" name="CheckThis" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I have checked this box
</label>
</div>
<input type="hidden" name="id" value="<?php echo $_REQUEST['uid']; ?>">
<div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
<button type="submit" class="btn btn-primary" id="submit-all" value="Submit">Submit all</button>
</form>
And my JS:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#my-awesome-dropzone", { url: "upload.php"});
myDropzone.on("sending", function(file, xhr, formData) {
// Will sendthe filesize along with the file as POST data.
formData.append("filesize", file.size);
formData.append("foo", "bar");
});
upload.php is using the example-code from https://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php
Uploading works, when a user selects/drops multiple files in Dropzone, the are uploaded to the server. However, I do not know how I can direct the user to step2.php where the user can see the images and give them a title or comment. I have tried to append formData as you can see, but those data are submitted to upload.php, not step2.php.
Update:
To clarify my problem: If step2.php just contains:
<?php
phpinfo(INFO_VARIABLES);
?>
I do not see any references to the files I uploaded, nor the variables filesize and foo which I declared in the JS.
How can I transfer data from Dropzone and upload.php to step2.php?
Or, am I doing this old-fashioned? Should I do this in a completely other way? Can I get the users to submit a title and comment on the step1.php-page, and submit/upload all when done? How do a redirect them to a landing-page when done?

How to get data user input data from my webpage

I have made a form in my site, which will allow me to get suggestions about Rubik's cube algorithms, but how to know what input the user has? For better understanding, I've given the code below:
<form method="POST">
<label>Your name: </label><br>
<input type="text" name="name" placeholder="Your Name" required><br><br>
<label>Your E-mail: </label><br>
<input type="email" name="email" placeholder="email#domain.com" required><br><br>
<label>Select puzzle: </label><br>
<input type="radio" name="2x2" value="2x2">2x2<br>
<input type="radio" name="3x3" value="3x3">3x3<br><br>
<label>Select set/subset: </label><br>
<input list="set"><br><br>
<datalist id="set">
<option>Ortega OLL</option>
<option>Ortega PBLL</option>
<option>CLL</option>
<option>EG-1</option>
<option>EG-2</option>
<option>F2L</option>
<option>OLL</option>
<option>PLL</option>
<option>COLL</option>
<option>WV</option>
</datalist>
<label>Your Alg: </label><br>
<input type="text" name="alg"><br><br>
<input type="submit" name="submit" class="w3-black w3-button w3-hover-white w3-hover-text-blue w3-text-white">
</form>

Please add action attribute to your form tag and on submit here is the example
<form action="getvalue.php" method="post">
</form>
Note: Every form element must have unique name .
after adding action attribute then create getvalue.php file and add following code in to it
<?php
print_r($_POST);
?>
Above code will give all the form field values
do let me know if it was helpfull...

I'm not sure exactly what you want to do, but here is an example of a form that submits to itself. This will allow you to remain on the same page after the form has been submitted. You can change what the user sees to indicate that the form was done successfully/etc. I have tested this code and it works.
<main>
<?php
// When the form is submitted
if (isset($_POST["submitButton"])){
//Do something with the data from the form - you don't have to print it out.
//This is all done on the server.
//Connect to DATABASE, send an EMAIL, VALIDATE the form, etc.
print("<pre>");
print_r($_POST); // for all GET variables
print("</pre>")
?>
<!-- This HTML will be visible to the user after the form has been submitted. -->
<h1>The form has been submitted successfully!</h1>
<?php
}else{ //If the form has not been submitted
?>
<form method = "post" >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" id = "submitButton" name = "submitButton" value="Submit">
</form>
<?php
} //End else
?>
</main>

Send uploaded image from a form to a second form

How can I send an uploaded image from one form to a second form on submit? The code for the first form:
<form class="usp-form" method="post" enctype="multipart/form-data" action="http://www.aeroe.com/gate/" data-validate="parsley" data-persist="garlic" novalidate>
<input name="usp-files" type="file" maxlength="255" data-required="false" placeholder="File(s)" class="usp-input usp-input-files select-file multiple" multiple="multiple" id="usp-multiple-files" />
<input type="submit" value="Go To Step 2">
</form>
Code for the second form. I need the file input on this second form to have the files from the previous form in it, which I will then submit at a later stage.
<form class="usp-form" method="post" enctype="multipart/form-data" action=" http://www.aeroe.com/submit/" data-validate="parsley" data-persist="garlic" novalidate>
<input name="usp-files[]" type="file" maxlength="255" data-required="false" placeholder="File(s)" class="usp-input usp-input-files select-file multiple" multiple="multiple" id="usp-multiple-files" />
<input name="usp-file-limit" class="usp-file-limit" value="20" type="hidden" />
<input name="usp-file-count" class="usp-file-count" value="1" type="hidden" />
<div class="usp-preview"></div>
<input type="submit" value="Go To Step 2">
</form>
An unsuccessful solution I thought to include: Its been suggested that I use the following code in between my second form tags:
foreach ($_FILES["usp-files"] as $file) {
echo '<input name="usp-files[]" value="'.$file["usp-files"]["tmp_name"].'" type="hidden" />';
}
along with this code to put in to the index file of http://www.aeroe.com/submit/ (I don't know where to find the index file):
foreach ($_POST["usp_files"] as $file) {
//get the location of the file
$fileslocation= tempnam(sys_get_temp_dir(), $file);
//move the file to somewhere else
move_uploaded_file($file, $destination);
}

Form post Send data to another page , verify and then post

I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?

Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';

EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.

Submitting 2D array form input using AJAX in Javascript

I have a form as follows:
<form name="chat" id="chat" action="" onsubmit="sendMessage()">
<a name="chat"> </a>
<input type="text" name="chat" id="chat" size="38" maxlength="50" vertical-align="middle">
<input type="hidden" name="action" id="action" value="checkresponse">
<input type="hidden" name="response_Array[sessionid]" id="response_Array[sessionid]" value="keu88lh88ini89dgnccob54f27"><br>
<input type="text" name="response_Array[top]" id="response_Array[top]" value="a">
<input type="text" name="response_Array[second]" id="response_Array[second]" value="b"><br>
<input type="text" name="response_Array[third]" id="response_Array[third]" value="c"><br>
<input type="text" name="response_Array[fourth]" id="response_Array[fourth]" value="d"><br>
<input type="text" name="response_Array[input][0]" id="response_Array[input][0]" value="input 0"><br>
<input type="text" name="response_Array[that][0]" id="response_Array[that][0]" value="that 0"><br>
<input type="submit" name="submit" id ="submit" value="SEND" style="width: 45px">
</form>
When the user clicks Submit, I need to send all the input fields to the server.
But, the page should not get refreshed. So, I have created sendMessage(),in which I have used XMLHttpRequest object to send the form submit request.
To read input fields, I have used in sendMessage():
var infoStr = "chat="+document.forms[0]['chat'].value;
infoStr += "&action="+document.forms[0]['action'].value;
I want to know how should I read the 2D array :response_Array and parse it into a JSON string so that it can be passed to the php server code.

It is so simple
var infoStr=""
for(var i=0;i<document.forms[0].elements.length;i++)
{
infoStr+=document.forms[0].elements[i].name+"="+document.forms[0].elements[i].value+"&";
}
alert(infoStr); // You will have the full name value pairs.
Hope this solves your problem.