I'm doing a contact book and I'm stuck with a problem.
Code:
<label for="file">A picture </label><br>
<label for="file">Another picture </label>
<input type="file" id="file" class="1"/>
<input type="file" id="file" class="2"/>
$('input:file').change(function(){
alert(this.className)
})
JSFIDDLE
My Problem: I can't get the class name from each element. When the second element is clicked, the first elements' classname is showed.
If you remove the css which hides your inputs, you'll see it works just fine. And you'll see why... When the inputs are hidden, you're clicking on the label, not the input, and both of the labels appear BEFORE the first input. So you are always selecting the first input and never the second one.
Updated Fiddle
To fix this, either wrap the labels around the inputs, like so:
<label for="file">A picture <input type="file" id="file" class="1"/></label>
<br />
<label for="file2">Another picture <input type="file" id="file2" class="2"/></label>
or put the label for the second input just before the input, like so:
<label for="file">A picture </label>
<input type="file" id="file" class="1"/>
<br />
<label for="file2">Another picture </label>
<input type="file" id="file2" class="2"/>
NOTE: It's not valid HTML to have multiple elements with the same ID. In the examples above, I changed the ID on the second input to "file2"
IDs of HTML elements should be unique (http://www.w3schools.com/tags/att_global_id.asp). Therefore jQuery can't distinguish between your elements which both have the id "file".
EDIT:
Actually my first answer was wrong, jQuery can distinguish, but both labels are allocated to the first element. Updated Fiddle
<label for="file1">A picture </label><br>
<label for="file2">Another picture </label>
<input type="file" id="file1" class="1"/>
<input type="file" id="file2" class="2"/>
Related
I have my element like below
<input type="checkbox" id="Countries" value="Ind">India</input>
How to get output as "India"?
Below returns only Ind
document.getElementById("Countries").value;
There is a way to get the value when you don't care about semantically correctness.
alert(document.getElementById('Countries').nextSibling.nodeValue);
<input type="checkbox" id="Countries" value="Ind">India</input>
For completeness:
You shoult do an input type like this as mentioned in the Form W3
<label for="Countrie">India</label>
<input type="checkbox" id="Countrie" />
or
<input type="checkbox" id="Countrie" />
<label for="Countrie">India</label>
or
<label>
<input type="checkbox" name="Countrie" />
India
</label>
also mentioned in THIS POST
and then use javaScript to get a coresponding label value.
I don't think that you can because that isn't valid HTML code.
An input tag is empty, meaning that it can only contain attributes. Therefore, there is no </input> to close it.
There are ways to store data in it though.
As of HTML 5, there is a data- attribute that you can put on any element. You could do something like this:
<input type="checkbox" id="Countries" value="Ind" data-something="India" />
// Inside JS
document.querySelector("#Countries").dataset.something
Another alternative would be to wrap a p or a span around the text after it.
<input type="checkbox" id="Countries" value="Ind" />
<p id="CountriesText">You can get this value easily enough</p>
This is not possible because your html is wrong.
input is a self closing tag, so it should be like this.
<input type="checkbox" id="Countries" value="Ind" />
So there is no other value you could extract with javascript then the value.
Or you should use a data-attribute with India as a value.
HTML
<input type="checkbox" data-country="India" id="Countries" value="Ind" />
JS
var checkbox = document.querySelector('#Countries'); // or document.getElementById("Countries");
alert(checkbox.dataset.country);
See this fiddle http://jsfiddle.net/zwx43m59/
I'm currently building a table with several cells containing a radio with a series of textboxes.
I want each radio to make a textbox appear when clicked as well as the textbox label. Here is something that's working when knowing id for label or radio (the problem is reduced to what's inside one table cell):
<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Question?</label>
<input type="radio" name="radio1" id="+QuestionID+_1" value="1" />
<label for="'+QuestionID+'_1">Yes</label>
<input type="radio" name="radio1" id="+QuestionID+_0" value="0" />
<label for="'+QuestionID+'_0">No</label>
</fieldset>
<input type="text" name="textarea" style="width:80%; display:none;" id="comment_+QuestionID+"><label for "comment_+QuestionID+" class="labelhide" id="Test1">Test</label>
<input type="text" name="textarea1" style="width:80%; display:none;" id="comment_+QuestionID+"><label for "comment_+QuestionID+" class=labelhide id="Test2">Test</label>
<br />
</div>
and here is the JS
$('input[type="radio"][name="radio1"]').on('change', function() {
$('input[type=text]').toggle($.trim(this.value)=='1');
document.getElementById("Test1").style.display = 'inline';});
http://jsfiddle.net/Onysius/5WF25/2/
I'd like to have the same kind of behavior for the radio except I want it to toggle on only the 1st next textbox with its label without having to enter the corresponding name or id of the radio (table is generated by a python script with many textboxes under many radios so I don't want to create a specific function for each radio), textbox or label. The overall shape as to stay the same also (namely textbox below radio).
Is there a way to do that with a general form JavaScript (additional css is permitted-it currently uses a none display option for label class) ? To be clear my only trouble right now are the last 2 lines in the JS (I could easily set no name for the radio in the first line to apply it to any radio in the table) I don't actually know how to target just the next textbox after the radio with its associated label.
Any help will be greatly apreciated.
I think you need to do something these lines to inject the textarea you want dynamically next to the item and retain the the name for tracking what comments goes to which radio and not having to create a textarea for each radio:
HTML:
<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
<fieldset data-role="controlgroup" data-type="horizontal">
<label>Question?</label>
<input type="radio" name="radio1" value="1" />
<label for="'+QuestionID+'_1">Yes</label>
<input type="radio" name="radio1" value="0" />
<label for="'+QuestionID+'_0">No</label>
</fieldset>
</div>
Javascript:
$('input[type="radio"]').on('change', function() {
var name=$(this).attr('name')
var html='<input type="text" name="textarea" style="width:80%;" id="comment_'+name+'"><label for "comment_'+name+'">Test</label>';
$('input[name="'+name+'"]:last').next('label').after(html);
});
Demo:
http://jsfiddle.net/SzjL2/
I am trying to load JQuery DatePicker in two text fields, so I am using the following code
$(function() {
$('#DOB, #SignupDate').datepicker();
});
and here is the HTML for both fields:
<div class="field field_input">
<label for="DOB">D.O.B</label>
<input type="text" name="DOB" value="">
</div>
<div class="field field_input">
<label for="SignupDate">Signup Date</label>
<input type="text" name="SignupDate" value="">
</div>
It is loading just fine in the DOB field but it is not loading in the SignupDate field. Can someone please tell me what I am missing here and how to solve it?
Thanks for your time
You try to select the #DOB and #SignupDate.
$('#DOB, #SignupDate')
It means get element by id DOB and SignupDate but you have no element with id="DOB" nor
id="SignupDate"
So please use
<input type="text" id="DOB" name="DOB" value=""> //<- note id="DOB"
<input type="text" id="SignupDate" name="SignupDate" value=""> //<- note id="SignupDate"
You need to have an id attribute on your inputs. Two reasons:
In your jQuery code, # indicates an id selector, not a name selector.
The for attribute on the labels should correspond with an id attribute on another element, not the name attribute.
Given that this is probably a form, you still want to keep the name attribute, but you probably just want a matching id attribute.
I need to have color pickers for X elements. Each element has a different ID.
I am trying to use spectrum, but I fail to see how would I initialize dynamically the spectrum for each of my elements.
The elements right now look something like this:
<input type="text" id="123_my_color">
<input type="text" id="143_my_color">
<input type="text" id="5343_my_color">
....
How would I do that?
Thanks!
You should just need to select all the elements, then call spectrum on them:
<input type="text" class="my_color" id="123_my_color">
<input type="text" class="my_color" id="143_my_color">
<input type="text" class="my_color" id="5343_my_color">
Then in your JavaScript:
$(".my_color").spectrum();
See example: http://jsfiddle.net/Sy6gU/1/
I have a form in my HTML with field.
I'd like to show the file selection window when the user clicks somewhere else (for example, an image on other part of the screen). The reason I want to do this is that I have a form with many fields, posting to some action "x", and the file selection form on other part of screen, submiting to action "y"
<form action="x">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<img src="select_file.png" onclick="//triggers file selection on other form">
<input type="text" name="field4">
<input type="text" name="field5">
</form>
<form action="y">
<input type="file" name="myfile">
</form>
Is there any other way to do this?
$("img").click(function(){
$("input[name=myfile]").trigger('click');
});
Demo. Click on the envelope image.
Edit: Giving ID's on the each of input fields will make the code more readable and "good."