Right now I have it as when a user clicks on the image the file browser will open up. But what I want is for after the file browser has opened and a file is chosen, once you click "open" the form will submit and the image will upload.
This is the closest I have gotten using the answer chosen here: Open File Browser on Link Click
code:
<div class="col-sm-6">
<img height="120" width="140" id="profileImage" alt="profile-image" class="userimg" style="margin-bottom: 1rem;" onclick="document.getElementById('imageFile').click();" src="<?php echo $image_src; ?>" />
</div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>?id=<?php echo $childId; ?>" method="post" enctype="multipart/form-data" id="imageForm" name="imageForm" class="text-center">
<!-- <input type="submit" id="btn-imageUpload" value="Submit" name="submit" /> -->
<input type="file" style="display:none;" id="imageFile" name="profile-photo" onchange="this.form.submit() enctype=”multipart/form-data” capture/>
</form>
It almost worked.. When I click "open" in the file browser the page submits and refreshes, but the photo was not uploaded at all.
But it works fine if I submit using the "submit" button on the page instead of the "open" button in the file browser.
Add an event listener to your file input. Once it recognizes a change you can send them to where they need to go. Or make the request via AJAX.
var form = document.querySelector('#profile_image'),
input = document.querySelector('input[name="picture"]');
input.addEventListener('change', e => {
e.preventDefault();
// form.submit(); // Uncomment this line or change it to your preferred AJAX mechanism
document.querySelector('body').innerHTML += 'Event Listener worked!';
});
<form action="/upload/profile/<?=$childId?>" method="POST" id="profile_image">
<input type="file" name="picture" />
</form>
This should easily submit your form.
Related
I have the following code:
Form:
<form action="test.php" onsubmit="addForm(event)" id="testeForm" method="post">
<input type="submit" name="payButton" value="BUY">
<input type="hidden" name="type" value="pgmType" />
<input type="hidden" name="total" value="10.00" />
</form>
Window modal (lightbox):
<div class="dark-pay" close="dark-pay" style="display:none">
<div id="loadiFrame" data="test.php"></div>
</div>
Javascript:
function addForm(event){
document.querySelector(".dark-pay").style.display = "inline";
$('#loadiFrame').html('<iframe style="border: 0;width: inherit;" src="' + $("#loadiFrame").attr("data") + '"></iframe>');
}
Content of test.php
<?php
$type = $_POST["type"];
$total = $_POST["total"];
echo "Type: ".$type." - Total: ".$total;
?>
I need the file test.php to be opened inside lightbox by iframe, already with POST data for printing.
I already tried using several examples available here on the site and could not implement any. As it is now, it opens the modal but redirects the user to the new tab instead of opening it in the modal.
This is a payment gateway, the customer clicks the buy button on the form, then the lightbox (modal) opens with the form data, and then redirects to the payment method using this data, all within the modal without leaving the page.
Inside the file test.php, I will need to create a redirect, I don't know if this will work within modal too.
Any ideas on how I can do this?
I am trying to build an image upload interface which submits the form automatically as soon as choosing a file from the file browse window. This is how my HTML looks like:
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
and this is how my JS looks like:
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
Problem is as soon as I click image input which triggers #avatar, file browser is being opened but the form automatically being submitted without allowing me to choose a file from the window.
What is wrong here?
The <input type="image"> is a graphical submit button, so when you click it, it will automatically submit the form. Here's the documentation on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image. If you want to stop the form from submitting, you need to cancel the default action of the click. So, your code would be this:
$("input[type='image']").click(function(e) {
e.preventDefault();
$("input[id='avatar']").click();
});
I don't really understand your problem. Here it seems to work. It doesn't submit the form when I open the file browser, until I choose an image and close the file browser. (note it doesn't post after it either but that's because of a javascript error that is not related to your problem. When you copy this code to an empty html it should work)
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
There is a simple input file:
<form id="uploadForm" enctype="multipart/form-data" action="getCSVFile" method="post">
<input type="file" class="upload" id="uploadFile" name="file" />
<input type="text" name="campaignId" style="display:none" data-dojo-attach-point="campaignIdInputValue"/>
</form>
But when I click to input file it opens file select window, I choose file or click cancel and every time it close file select window and open the same new. It happened only for IE.
Even if I remove all code except
<input type="file" />
I have same problem. Also I should specify that I use it with Dojo framework.
I have four files, they are index.php, commonform.php, image1.php, image2.php
Suppose, in the index.php I have a form with two image input, the form's action change dynamically, method is post. when the first image is clicked is goes to commonform.php and also when the second image is clicked is goes to commonform.php but in commonform I have a form with some button input (its work can be anything and not my concern) and a submit button. My concern is when the first image is clicked, it goes to commonform.php and when the submit button is clicked of commonform.php, it goes to image1.php and same things for when the second image is clicked, it goes to commonform.php and when the submit button is clicked of commonform.php, it goes to image2.php. Can anyone help me?
You may attach a variable to your requests in index.php and then recognize it in commonform.php and decide to jump to the target destination !
For Example :
index.php
<form action="commonform.php" method="POST">
<input type="image" name="image_1" src="image1.gif" alt="Image 1">
<input type="image" name="image_2" src="image2.gif" alt="Image 2">
</form>
commonform.php
<?php
if (isset($_POST['image_1_x'], $_POST['image_1_y'])) {
$action = 'image1.php';
}
if (isset($_POST['image_2_x'], $_POST['image_2_y'])) {
$action = 'image2.php';
}
?>
<form id="commonform" action="<?php echo $action; ?>" method="POST">
<input type="button" value="From HTML">
<input type="button" value="Content">
<input type="button" value="Button style ">
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
when you are processing the INPUT with IMAGE type artibute ; it sends the X , Y artibutes , we just need to check them !
Using Javascript I would like to show a working/loading image once a user hits submit on my form. The form is used to upload video's so it can take a while for the file to upload. Once the file is done uploading the page reloads so the loading image would not need to be visible anymore.
Can anyone help me with this please?
<form method="POST" enctype="multipart/form-data" action="">
<input type="hidden" name="MAX_FILE_SIZE" value="5120000" />
<input type="hidden" name="upload" value="yes">
First Name: <input type="text" name="firstname"><br>
Email: <input type="text" name="email"><br>
Email Confirmation: <input type="text" name="email2"><br>
Video Title: <input type="text" name="title"><br>
Video Description: <input type="text" name="description"><br>
Video to upload: <input type="file" name="uploadedfile"><br>
Terms: <input type="checkbox" name="terms"> Must be checked to accept our terms of service.<br><br>
<input type="submit" value="Upload Video">
</form>
Using jquery: you can use as follow within document.ready
$("form").submit(function() { //you can assign id to your form and used that id instead of form
$("#iamgeid").show();
return true;
});
Normally We cannot display a loading image after submitting a form, because when we submit a form initially it sends request to the server and the loading is only because of the server response after uploading. loading image will not animate while server is loading.
To show the loading image we have to do some tricks.
1. We should not submit the form in the same window, instead we have to post the form to a iframe. this can be done by adding the target attribute to the form tag.
<div id="form-container">
<form ... action="uploadfilepath" target="iframe_name">
......................
......................
</form>
</div>
<iframe name="iframe-name" onsubmit="showimage()" style="width:1px; height:1px; visibility:hidden;"></iframe>
2. We have to add the script to show image when server is loading inside the iframe.
<img src="loading image path" id="image-container">
<script>
function showimage() {
document.getElementById('form-container').style.display='none';
document.getElementById('image-container').style.display='block';
}
</script>
3. Also add the script after uploading the file.
.......................................
.......................................
your file uploading
code goes here
.......................................
.......................................
at the end print the script to reload the parent window or call the function in parent window.
Best approach would be an AJAX call to do the whole thing.
Place an image with display: none on the desired location and then do this small thing:
var d = document;
var demoInterval;
$("form").submit(function() {
$("img").show();
demoInterval = setInterval(intervalFunc, 1000);
});
function intervalFunc()
{
if(d.ready) // finished uploading video
{
window.clearInterval(demoInterval);
$("img").hide();
}
}