I have a button. When I click on it, I'd like to see in the console the current input number that is right before my button element (this is not the final goal but if I can do that the rest won't be a problem).
All I get using my code is undefined. Can someone explain to me what's wrong and how to do?
$(".ajoutPanier").click(function() {
var nb = $(this).prev(".inputNbArt").val();
console.log(nb);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="nbArticles">
<input class="inputNbArt" type="number" max="10" min="1" value="1">
</form>
<a href="#openModal">
<button class="ajoutPanier">Ajouter Au panier</button>
</a>
There's two issues here. Firstly having a button element inside an a element is invalid HTML. I'd suggest removing the button and placing the class it had on the a instead. You can then use CSS to style the a element as needed.
Secondly, the DOM traversal method you're using isn't quite right. The .inputNbArt element is a child of the form, not a sibling to the clicked .ajoutPanier. To correct that, use prev() to get the sibling form, and then find(). Try this:
$(".ajoutPanier").click(function() {
var nb = $(this).prev('.nbArticles').find('.inputNbArt').val();
console.log(nb);
});
/* example button styling */
a.ajoutPanier {
background-color: #CCC;
display: inline-block;
padding: 5px 10px;
margin: 5px 0;
border-radius: 5px;
box-sizing: border-box;
text-decoration: none;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="nbArticles">
<input class="inputNbArt" type="number" max="10" min="1" value="1">
</form>
Ajouter Au panier
Because your HTML is invalid (see comment, we can't be sure what the DOM will look like in any given browser, since they can do whatever they need to to make the structure valid.
When you click the button, this inside the handler will be that button element. prev only finds previous siblings, but the element you're looking for isn't a sibling, it's a child of the button's parent's previous sibling (if the browser doesn't relocate the button, which it very well might).
You could use:
$(this).parent().prev().find(".inputNbArt")
but it's fairly fragile. Instead, consider putting this entire structure in a parent element and then:
$(this).closest("selector-for-parent-element").find(".inputNbArt")
<div id="CSV"
<li style="width: 100%; float: left; clear: left;">
<input onclick="go('CSV')" type="button"
value="Download in CSV Format" />
</li>
</div>
Trying to download the file by using the onclick function. I have tried the following code, it executes but doesn't download the file.
Set x = ie.document.getElementById("CSV")
x.Click
Also x.onclick gives error and x.FireEvent "onclick" also doesn't work. Please help.
Set div = ie.document.getElementsByTagName("input")
'loop through all the elements
For Each x In div
' check if the value matches the required value, if it does then use the .click function.
If Trim(x.Value) = "Download in CSV Format" Then
x.Click
Exit For
End If
Next
You can also use CSS selector of
input[onclick=go('CSV')]
This says get the input tag with property onclick= go('CSV').
This can be deployed as
ie.document.querySelector("input[onclick=go('CSV')]").Click
The .querySelector method applies the CSS selector to the HTMLdocument.
I have the text are below from a program that I am working on.
<div etype="TEXTAREA" style="width: 923px; position: absolute; left: 1px; top: 192px; " class="draggable ui-draggable" id="Element_5857257">
<label>Log</label>
<textarea variable="Log" class="form-control" style="white-space: nowrap; margin-left: 0px; margin-right: -6px; width: 923px; margin-top: 0px; margin-bottom: 0px; height: 364px; " placeholder="Log"></textarea>
</div>
I am trying to disable this text area and make it read only. I have no experience with CSS so I am not sure if this is even possible?
Like so
<textarea disabled>
strings...
</textarea>
in your example just add disabled property to you textarea tag
MDN Documenation:
Textarea
Two options:
disabled:
This Boolean attribute indicates that the user cannot interact with the control. (If this attribute is not specified, the control inherits its setting from the containing element, for example ; if there is no containing element with the disabled attribute set, then the control is enabled.)
readonly:
This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.
Use whichever fits your use case the best.
HTML solution:
<textarea disabled="true"></textarea>
JavaScript solution:
var textarea = document.getElementsByTagName("textarea");
textarea = textarea[0];
textarea.SetAttribute("disabled", "true");
Here's edited answer to reflect OP's updated code:
<script type="text/javascript">
var textarea = document.querySelector("textarea.form-control");
textarea.SetAttribute("disabled", "true");
</script>
If you wish, you would copy that bit of JS, and place it probably at the end of <body>. Or, you might simply just add disabled to the textarea HTML tag. If this is still not the solution you're expecting, then you need to rewrite your question.
You can't disable a textarea just with CSS, with CSS you can "paint" it to looks like disabled:
#myTxtarea:disabled {background-color: #EEEEEE;}
but it's still accessible, just looks "different".
I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox).
Please notice that I'm talking not about the text inside the input field, but about the tooltip that appears when you move the mouse over the input.
I've tried this with no luck:
$('#myFileInput').attr('title', '');
The default tooltip can be edited by using the title attribute
<input type='file' title="your text" />
But if you try to remove this tooltip
<input type='file' title=""/>
This won't work. Here is my little trick to work this, try title with a space. It will work.:)
<input type='file' title=" "/>
For me, I just wanted the text to be invisible and still use the native browser button.
input[type='file'] {
color: transparent;
}
I like all of undefined's suggestions but I had a different use case, hope this helps someone in the same situation.
This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.
A hacky solution:
input[type='file'] {
opacity:0
}
<div>
<input type='file'/>
<span id='val'></span>
<span id='button'>Select File</span>
</div>
$('#button').click(function(){
$("input[type='file']").trigger('click');
})
$("input[type='file']").change(function(){
$('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})
Fiddle
Very easy, forget CSS targeting the input["type"] thing, it doesn't work for me. I don't know why. I got my solution in my HTML tag
<input type="file" style="color:transparent; width:70px;"/>
End of the problem
I found a solution that is very easy, just set an empty string into the title attribute.
<input type="file" value="" title=" " />
You can disable the tooltip setting a title with a space on webkit browsers like Chrome and an empty string on Firefox or IE (tested on Chrome 35, FF 29, IE 11, safari mobile)
$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
This one works for me (at least in Chrome and Firefox):
<input type="file" accept="image/*" title=" "/>
This is a tricky one. I could not find a way to select the 'no file chosen' element so I created a mask using the :after pseudo selector.
My solution also requires the use of the following pseudo selector to style the button:
::-webkit-file-upload-button
Try this: http://jsfiddle.net/J8Wfx/1/
FYI: This will only work in webkit browsers.
P.S if anyone knows how to view webkit pseudo selectors like the one above in the webkit inspector please let me know
Across all browsers and simple. this did it for me
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})
input[type="file"]{
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">
All the answers here are totally overcomplicated, or otherwise just totally wrong.
html:
<div>
<input type="file" />
<button>Select File</button>
</div>
css:
input {
display: none;
}
javascript:
$('button').on('click', function(){
$('input').trigger('click');
});
http://jsfiddle.net/odfe34n8/
I created this fiddle, in the most simplistic way. Clicking the Select File button will bring up the file select menu. You could then stylize the button any way you wanted. Basically, all you need to do is hide the file input, and trigger a synthetic click on it when you click another button. I spot tested this on IE 9, FF, and Chrome, and they all work fine.
You will need to customise the control quite a lot to achieve this.
Please follow the guide at: http://www.quirksmode.org/dom/inputfile.html
Wrap with and make invisible.
Work in Chrome, Safari && FF.
label {
padding: 5px;
background: silver;
}
label > input[type=file] {
display: none;
}
<label>
<input type="file">
select file
</label>
It's better to avoid using unnecessary javascript. You can take advantage of the label tag to expand the click target of the input like so:
<label>
<input type="file" style="display: none;">
<a>Open</a>
</label>
Even though input is hidden, the link still works as a click target for it, and you can style it however you want.
Even you set opacity to zero, the tooltip will appear. Try visibility:hidden on the element. It is working for me.
It works for me!
input[type="file"]{
font-size: 0px;
}
Then, you can use different kind of styles such as width, height or other properties in order to create your own input file.
Give -webkit-appearance: a go. Worth a try anyway.
http://css-infos.net/property/-webkit-appearance
Hope that helps :)
Directly you can't modify much about input[type=file].
Make input type file opacity:0 and try to place a relative element [div/span/button] over it with custom CSS
Try this
http://jsfiddle.net/gajjuthechamp/pvyVZ/8/
Surprise to see no one mentioned about event.preventDefault()
$("input[type=file]").mouseover(function(event) {
event.preventDefault();
// This will disable the default behavior of browser
});
you can set a width for yor element which will show only the button and will hide the "no file chosen".
I look for good answer for this... and I found this:
First delete the 'no file chosen'
input[type="file"]{
font-size: 0px;
}
then work the button with the -webkit-file-upload-button, this way:
input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}
hope this is what you were looking for, it works for me.
Combining some of the suggestions above, using jQuery, here is what I did:
input[type='file'].unused {
color: transparent;
}
And:
$(function() {
$("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};
And put the class "unused" on your file inputs. This is simple and works pretty well.
The best solution, for me, is to wrap input [type="file"] in a wrapper, and add some jquery code:
$(function(){
function readURL(input){
if (input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function (e){
$('#uploadImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#image").change(function(){
readURL(this);
});
});
#image{
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 75px;
height: 35px;
}
#uploadImage{
position: relative;
top: 30px;
left: 70px;
}
.button{
position: relative;
width: 75px;
height: 35px;
border: 1px solid #000;
border-radius: 5px;
font-size: 1.5em;
text-align: center;
line-height: 34px;
}
<form action="#" method="post" id="form" >
<div class="button">
Upload<input type="file" id="image" />
</div>
<img id="uploadImage" src="#" alt="your image" width="350" height="300" />
</form>
I came up with a hacky solution that totally removes "No file chosen" plus the extra space that is added after that text (in Chrome I get something like:
"No file chosen ").
This was totally messing up my page alignment, so I really fought with it to find a solution. Inside the input tag's style attribute, setting "width" to the width of the button will eliminate the trailing text and spaces. Since the width of the button is not the same in all browsers (it's a little smaller in Firefox, for example), you'll also want to set the style's color to the same color as the background of the page (otherwise a stray "No" may show through). My input file tag looks like this:
<input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()">
I know it is a bit of a hack, but all I required was to set the color to transparent in the style sheet - inline would look like this style="color:transparent;".
Best option to Hide the tooltip is combining the following properties :
On the input : color:white; (if the background is white to blind the color of text, if another color, use that color).
if there is any other element next to the input use position: absolute; to place the element above the tooltip *( be careful leave the button visible, hide just the tooltip)
For anybody that the 3 top did not work:
create your input element:
<input type='file' name='file' id='file' />
set style for the input element by it's Id to where it appears non-existent:
#file{ color: #ffffff; width: 0px; }
then create a new button infront of the original input, with onclick function to run javascript that clicks the original input:
<button onclick='clicker()'>BROWSE</button><input type='file' name='file' id='file' />
// can see the new button but not the original input:
Javascript:
function clicker(){ document.getElementById('file').click(); }
RESULT:
function clicker(){
document.getElementById('file').click();
}
#file{
color: #ffffff;
width: 0px;
}
<html>
<head>
</head>
<body>
FILE: <button onclick='clicker()'>BROWSE</button><input type='file' id='file'/>
<br>
</body>
</html>
style="color: transparent; width:110px"
This solution worked for me as below:
<input class="ml-4"
type="file"
style="color: transparent; width:110px"
ng2FileSelect
[uploader]="uploader"
multiple />
Forget about removing the tooltip. Make the capacity of file input into zero, put a div box above it with absolute position, so whenever you click on the div, the file input would prompt.
<div class="file_cover">Click to upload file</div>
<input type="file">
input[type='file'] {
opacity: 0;
}
.file_cover {
position: absolute;
top: 0;
}
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
Possible Duplicate:
Styling an input type=“file” button
I was trying to style
<input type="file">
but i have not had much luck. I want to make the textbox disappear and only keep the button. How can I do it?
The CSS way (base code found here):
<html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html>
There is no easy cross-browser way to style the input type of files. Therefore there exist solution that even use javascript.
Here is a jQuery plugin you can use to style file types in the cross-browser fashion:
File Style Plugin for jQuery
Browsers do not let you style file
inputs. File Style plugin fixes this
problem. It enables you to use image
as browse button. You can also style
filename field as normal textfield
using css. It is written using
JavaScript and jQuery.
You can check out the demo here
As also posted on popular ajaxian.com, you can take a look at this too:
A Cheaky Way to Style an input type=”file”
Shaun Inman has got a lovely little
hack that allows you to style file
inputs with CSS and the DOM.
These elements are notoriously painful
to deal with, and now we have select
boxed playing nice on IE, we need
something else to fix up :)
I wrote this jQuery plugin to make it much simpler to style the file input. Use CSS and "fake elements" to get the results you want.
http://github.com/jstnjns/jquery-file
Hope that helps!
<label for="file" style="/* style this one, as you want */">Upload file</label>
<input id="file" name="file" type="file" style="display:none;">
some browsers need File input visible and click the browse button manually, or it will submit nothing to server. so i suggest Saefraz's first solution: File Style Plugin for jQuery