<form class="" method="POST" action="profile_edit.php" enctype="multipart/form-data">
<span class="hgf" style="
padding: 120px;
border: dashed;
margin: 0 auto;
padding-top: 10%;
background-color: #ebebeb;
">Drag & Drop to Upload File</span>
<button type="submit" class="btn mrd btn-success btn-flat" name="edit"> Update</button>
</form>
dragText.addEventListener("drop", (event)=>{
event.preventDefault(); //preventing from default behaviour
var formData = new FormData();
file = event.dataTransfer.files[0];
//console.log(files_list);
for(var i=0; i<file.length; i++)
{
formData.append('photo', file[i]);
}
//console.log(formData);
$("#submit").click(function(){
$.ajax({
url:"profile_edit.php",
method:"POST",
data:formData,
contentType:false,
cache: false,
processData: false,
success:function(data){
$('.hgf').html(data);
}
})
})
});
Good evening I would like to store an image deposited in drag and drop in an html span type tag and send it to my php page to process the image to send it ajax with jquery and javascript I would like to do the drag and drop 100% in php but no function that allows you to retrieve an image from google by drag and drop
knowing that I want to send the image from an html form that does not only contain the image, there are data that I process in php
what i get
I don't get anything I can't understand how ajax works when I go through the classic process with the input everything goes smoothly my form goes through and the user profile is updated with the photo but when I send it with the image in drag and drop it doesn't work image I don't know where she is and pass
Related
I am trying to save my bootstrap WYSIWYG content by copying the div editor to a hidden textarea, but when i tried to submit it using ajax, i got a error "Submitted URI too large!" when checked i found out the image that i am trying to add was encoded into a base64. how can i get the image URL so i can process it using PHP.
My HTML
<div id="editor" name="editor" data-target="content">
</div>
<form>
<textarea type="text" name="content" id="content"></textarea>
<button type="submit" class="btn btn-danger copyeditor">Save</button>
</form>
My jquery and ajax script
<script>
$(".copyeditor").on("click", function() {
var targetName = $("#editor").attr('data-target');
$('#'+targetName).val($('#editor').html());
$.ajax({
type: "POST",
url: "data.php",
data: $('#content').html(),
success: success,
dataType: dataType
});
});
</script>
Here is what i am dealing with.
The goal is to make this
<img style="width: 640px;" src="data:image/jpeg;base64,/9j/4Qv6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdp...............>
Look like this
<img src="/images/blah/blah.jpg.">
I have a strange problem that is driving me crazy!
I'd like to submit a HTML form by ajax using jquery-form version 3.46.0 and then get the POST data on server, but my Submit button's name won't show up in the POST data! Maybe there's something wrong with this lib?
This my code:
<form id="form" action="test.php" method="post">
<input name="email" type="email" placeholder="Email" required>
<!-- And yes! I didn't use an input with type submit because
I need my button to have some HTML content and applied css styles to them. -->
<button id="submit" type="submit" name="myFormName">
<span class="label">Submit</span>
</button>
</form>
<div id="formResult" style="display: block; margin: 20px 0; padding: 10px; background-color: #fbe6e6;" role="alert"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#submit').on('click', function(e) {
e.preventDefault();
$('#form').ajaxSubmit({
clearForm: true,
target: '#formResult',
success: function() {
// do sth
},
error: function() {
// do sth
}
});
});
});
</script>
And this is the test.php file:
<?php
var_dump($_POST);
I need the name of my Submit button appear in POST data on server as expected... But it doesn't! Does anybody have any idea?
If you use name for button, then while taking as $_POST, the value will be shown as post data. Instead of using name try using id or simply remove that if you don't have any use of that
We can solve this by following ways -
Use jquery form plugin and it will post all form data
If you are not using the above or any plugin then simply append submit button name to the form serialize as below:
$('#myForm').submit(function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "process.php",
data: $('#myForm').serialize()+"&btnSubmitName=true",
success: function(response){
$('#resultDiv').html(response);
}
});
});
<div><a href="javascript:foo1()">
<div class="holder"><span class="label">Submit</span></div>
<div class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></div></a></div>
And implement foo1 to submit the form.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
When I click on the submit button it should give a $_POST to my send page.
What I do is:
-> When Click on <input type="submit" name="sendMail" value="Verzend E-Mail" class="sendMail">
-> I make a var link and set the whole <form action="" method="post" id="formSendMail"> in it.
-> Then give with a $.ajax() request the link as data to the page where I send it to.
-> When .done(function(data)) put data in $("div.emailSendComplete")
So now you know what I exually want...
What I have till now on code is:
Jquery:
<script>
$(document).ready(function(){
$("input.sendMail").on("click", function(){
var link = $("form#sendMailForm");
$.ajax({
type: "POST",
url: "checklistHandler.php?action=sendMail",
data: link
}).done(function (data){
$("div.emailSendComplete").append(data);
});
});
});
</script>
HTML:
<table id="cont" style="line-height: 80px; text-align: center;">
<tr id="sendMail" style="">
<form action="checklistHandler.php" method="post" id="sendMailForm">
<td style="width: 150px;">Email:</td>
<td>
<input style="padding: 5px; text-align: center; min-width: 10px; border-radius: 3px;" id="email" type="text" name="email" id="email" value="<?= $email ?>">
<span class="emailCheck"></span>
</td>
<td style="position: relative; left: 50px;">
<input type="hidden" name="verzendMail" value="1">
<input type="submit" name="sendMail" value="Verstuur E-Mail" class="sendMail" style="border-radius: 3px;">
</td>
</form>
</tr>
PHP(checklistHandler.php):
if ($_GET['action'] == 'sendMail') {
print_r($_POST);
exit();
}
Resolved:
The I did try to give the whole POST but I also could only give the INPUT with the email in it.
Cuz I only needed that.
Are you trying to send the HTML of the form? If so, instead of this:
var link = $("form#formSendMail");
(That will return a jquery object unless I'm mistaken)
use this:
var link = $("#formSendMail").html();
Not entirely clear what you are trying to do, so I may have misunderstood...
There are two three problems here:
You are not cancelling the default form submit, so your form will submit the normal way as well and your page will be refreshed;
You are not sending any data to your script with your ajax call, just a jQuery object, the form;
Your form has a different ID than the one you are using in your ajax call: formSendMail vs sendMailForm.
It should look more or less like:
$(document).ready(function(){
$("input.sendMail").on("click", function(event){
^^^^^ you need this later on
// second and third problem, missing data and wrong ID
var link = $("form#sendMailForm").serialize();
^^^^^^^^^^^^ use the right ID here
// first problem, default submit
event.preventDefault();
// the rest of your code
There are few things you need to change in your code
$(document).ready(function(){
//instead of input button click use form
$("#sendMailForm").submit(function(e){
// first problem, prevent default submit
e.preventDefault();
var link = $('#sendMailForm').serialize();
$.ajax({
type: "POST",
url: "checklistHandler.php?action=sendMail&email=",
data: link
}).done(function (data){
$("div.emailSendComplete").append(data);
});
});
});
I am trying to show a hidden div after submitting a form data
Below is my form html where the input section will have a form to enter the data and after submitting the form I have to show hidden output section and show result there
html code:
<div id="input">
----- some form datas here ----
<div id="submit">
<input type="submit" id="generate" name="script" value="generate" />
</div>
</div>
<div id="output" style="display: none;">
--- php echo from above form------
</div>
</form>
css:
#input{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;
}
#output{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;
}
After going through some previous discussion about the same topics, below is one of the answered solution for this
create a JavaScript like to show the hidden div after form submission.
$('form').submit(function(){
$('#output').show();
});
or
$('form').submit(function(e){
$('#output').hide();
e.preventDefault();
// Or with: return false;
});
But both the solutions are not working for me.the second is able to show the hidden div output but it not showing actual form data.
How can I show it correctly ? I need to show this after form submission (type="submit")
UPDATE:
Removed the inline css to hide div
Added css function in style sheet to hide div
#output{
display:none;
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;
}
Added below jquery to show div on form submit
$('form').submit(function(){
$('#output').css({
'display' : 'block'
});
});
Still I an not able to achieve the result. Any clue here ?
use
<form id="form" action="">
</form>
To display output
$(document).ready(function() {
$('#output').hide();
$('#form').submit(function(){
$('#output').show();
});
});
$('form').submit(function(e){
$('#doutput').hide();
e.preventDefault();
// Or with: return false;
});
Here in your script you are spelling doutput. replace it with output
and to show use .css() function and define display: block !important; because you have displayed it in your inline style so to override this you need to set !important.
Alternatively, define display: none; in the stylesheet instead of using in inline style and do the rest without setting !important
Remove Display: none;
And do this code
$('form').submit(function(e){
$('#doutput').hide();
e.preventDefault();
// Or with: return false;
});
to hide and
$('form').submit(function(e){
$('#doutput').hide();
e.preventDefault();
// Or with: return false;
});
to show
You could use .hide() and .show() as opposed to editing CSS attributes via .css().
$('document').ready(function() {
$('#output').hide();
$('form').submit(function(e) {
$('#output').show();
e.preventDefault();
});
});
if you want to show results within the DIV, there are many ways to do this.
Javascript
Give all your form data an ID, and then write a javascript function to fill the answers in the said DIV.
Ajax
Post your form to ajax, return the response to your DIV
New page request
After submitting, check to see if $_POST is set and then show the div with $_POST contents.
If I got it right you don't want to reload the page.
In this case you need to send the form data via ajax call.
Than you can display the response and the hidden div.
CSS
#output {
display:none;
}
jQuery
$(document).ready(function(){
$('form').submit(function(e){
// Prevent the default submit
e.preventDefault();
// Collect the data from the form
var formData = $('form').serialize();
//Send the from
$.ajax({
type: "POST",
url: "generator.php",
data: formData,
success: function(msg){
// Insert the response into the div
$('#ajaxResponse').html(msg);
// Show the hidden output div
$('#output').slideDown();
}
});
});
});
HTML
<div id="output">
--- php echo from above form------
<div id="ajaxResponse"></div>
</div>
You could try using the "action" attribute of the form element or you could try the jquery serializeArray method at the form element right after the submit.
<form>
<input type="text" name="giveNameHere" />
<input type="submit" id="generate" name="script" value="generate" />
</form>
<div id="output" style="display: none;">
Output Content
</div>
$('form').submit(function () {
$('#output').show();
console.log($(this).serializeArray());
return false;
});
Please see this jsfiddle
I already search about this and I cannot use ajax in file uploading, but all I need to do is process my file through an ajax then pass it to my controller (where I created and object file to save in a directory), so how can I process an upload file trough an ajax mootols, I already do it and nothings happens, no plugins please, I need just to someone guide me
this is my code
#f1_upload_process{
z-index:100;
position:absolute;
visibility:hidden;
text-align:center;
width:400px;
margin:0px;
padding:0px;
background-color:#fff;
border:1px solid #ccc;
}
</style>
<p id="f1_upload_process">Loading...<br/></p>
<p id="result"></p>
<form method="post" action="" enctype="multipart/form-data">
<label for="file">Subir un archivo</label>
<input type="file" name="file" id="fileArchivo" />
<input type="submit" name="submit" id="btnSubir" value="upload file" />
<iframe name="iframUpload" id="iframeUpload" type="file" style="display:none"></iframe>
</form>
mootools ajax
window.addEvent("domready",function(){
cargarIndex();
});
function cargarIndex()
{
var prueboRequest = new Request({
method: 'POST',
url: '../CONTROLLER/inicio.php',
onRequest: function() {},
onSuccess: function(texto, xmlrespuesta){
document.getElementById('subirarchivo').innerHTML= texto;
$('btnSubir').addEvent('click',function(){beginUploading()});
},
onFailure: function(){alert('Error!');}
}).send();
}
function beginUploading(){
var prueboRequest = new Request({
method: 'POST',
url: '../Controller/ControllerSubirArchivo.php',
onRequest: function() {},
onSuccess: function(texto, xmlrespuesta){
onFailure: function(){alert('Error!');}
}).send();
I already search but all I have found is this but with jquery, and I want something similar to:
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
//Name of the file input box
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// check for valid file extension
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
}
As Dimitar Christoff said, no way to have an ajax file upload without a little bit of cross browser headache for now…
I would recommend the plupload project so you're sure it's cross browser. A plugin from the forge could also do the trick but separating the javascript file upload library is a good idea these days. Considering that the implementation of the HTML5 API is still partial on a lot of browsers, you may have to update the script soon…