I have single file upload feature on my site.
To improve CSS I have added two buttons on my html. one with input type as file and another as button. Input type file is hidden by setting opacity 0 and input type button on top. When I clicked on button I have setup onclick event which triggers the click event of browse button which popup image uploader.
When I selects image and submit the form I don't get any details of file in my $_POST.
Why I am doing this, because input type file comes with one text box and a button to its right corner. To open a popup user can single click on button or double click on text box. I want to avoid double clicking.
Any better solution will be appreciated.
Thanks!!
We can click even if an input got opacity 0 !
In your html:
<input type="file" style="visibility:hidden;" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />
js:
$(function(){
$('#clickme').click(function(){
$('#uploadme').click();
});
});
Now you can stylize your button how you will!
Related
I have a sequence of radio buttons on a web page. On page-load, the first radio button in the sequence is selected by default.
In addition, there is a <div> associated with each radio button. (The corresponding <div>'s class is the same as the corresponding radio button's value.)
Even though the first radio button is checked by default, the jQuery (source) does not trigger until the already-checked radio button is manually clicked after page-load. I learned that I can solve this by manually triggering the click myself on page-load via jQuery.
I tried doing so with $("input:radio:first").prop("checked", true).trigger("click"); (source), which I thought would click the first radio button in the sequence as desired, but to no success. (By the way, is this code clicking the first radio button on the page, or is it clicking the first checked radio button on the page? I'd prefer the code to trigger("click") the first checked radio button on the page.)
I also already hide all <div>s in the CSS, as suggested here.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".radio_div").not(targetBox).hide();
$(targetBox).show();
});
});
$("input:radio:first").prop("checked", true).trigger("click");
.radio_div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="radio"
value="Bacon" checked="checked">Part 1</label>
<label>
<input type="radio"
value="is">Part 2</label>
<label>
<input type="radio"
value="Good">Part 3</label>
</div>
<div class="Bacon radio_div">Cured sugary meat</div>
<div class="is radio_div">be</div>
<div class="Good radio_div">bangin</div>
JSFiddle
How can I make jQuery click the default-checked radio button (so that its respective <div> appears) on page-load?
In addition, in my actual environment (which uses a semi-customizable web builder, so it's difficult to reproduce all the code involved), the default-checked radio button must always be clicked twice in order to activate its corresponding <div> with the jQuery. However, I cannot replicate this behavior in JSFiddle. If anyone has any insight on what might be causing this (and how to troubleshoot/resolve), I'd be happy to hear. (Perhaps jQuery could simulate a second click whenever a radio button click is detected?)
EDIT: The issue with my production environment (in the gif) was that the value of the first radio button was changing to whatever radio button was previously selected. Super ridiculous.
Because you're using 2 click functions.
I have made a form which has an input box and a browse button alongside.
When I click the browse button, I want to select an image such that the image name or the image address that i have selected must appear in the input box.
I have made use of the accept tag in HTML. Here is the code that i have used:
<span class="btn btn-primary btn-file">
Browse <input type="file" accept="image/*">
</span>
When I browse for the image, and select a particular image and click open, nothing happens really.
Can you help me? Thank you in advance!
I have this HTML input element
<input name="file_image" type="file"
class="chosen_file"
style="width:202px;color:rgba(255, 255, 255, 1);display: inline;"
id="imgUpload"
onchange="imgUploadValidation();"
accept="image/*" />
Here, in chrome browser when I click the Choose file button multiple times, the file selection window also pops up multiple times. Like, when I click the button 3 times then a window pops up and after I click the cancel button another window pops up and so on. This problem is only in chrome browser though. Any idea ?
I'm looking for a simple way to show that a file is being uploaded after the Submit button is pressed. The files can be up to 50 MB in size and users can think the browser has frozen because it takes a long time. I'm not looking for anything animated, just something like the word Loading... that appears next to (or in place of) the submit button. An onclick might do it but I'm not sure if it would interfere with the submit process.
Display a "spinning gif" right next to the submit button which is made visible on the onSubmit event. Redirect your form to a new page or reload current page when form is done uploading.
Here's a very simple example:
<script>
$(".spinner").hide();
function loadSpinner() {
$(".spinner").show();
//do validations
//redirect
}
</script>
The form could look something like this:
< form onsubmit="loadSpinner()">
.
.
.
<div>
<input id="submitButton" type="submit" />
<span class="spinner"><img src="images/loading.gif" /></span>
</div>
</form>
This example assumes you're using jQuery.
I didn't realize this, and just want to confirm.
If I have a html form, and an input tag of type image like:
<input type="image" name="blah" src="..." />
Clicking on the image will submit the form?
My use case is, I want to create a custom button for a submit button.
Yes, input-images will submit the form naturally. See: http://w3schools.com/tags/att_input_type.asp
image: Defines an image as a submit button