I'm having a list with several activities, and I want the jQuery Datepicker to display the date in a field in each row.
At the moment I'm able to display the date in the first row, but it seem like it only will display in one field with id="date" at a time.
The field in each row look like this:
<td><input id="date" name="date" /></td>
So, what I'm wondering: Is there a way I can display the date in every input field with id="date"?
ids must be unique on a page. Use a class instead to identify the elements.
The reason is that browsers maintain a fast-lookup dictionary of id value vs element and there is only one entry per value available in a dictionary.
To use a class
<td><input class="date" name="date" /></td>
and target with $(".date").datepicker(); instead of $('#date').datepicker()
JSFiddle: http://jsfiddle.net/TrueBlueAussie/D4AGz/485/
Following what #TrueBlueAussie said, you can do :
$( ".your_class" ).each(function() { //You access all your elements with the class "your_class"
//Do STG, you can access the current element with $(this)
});
As an alternative, taking your list as example
<ul id="listDisp">
<li>
Activity 1<input type="text" id="datePicker1"/>
</li>
<li>
Activity 2<input type="text" id="datePicker2"/>
</li>
<li>
Activity 3<input type="text" id="datePicker3"/>
</li>
</ul>
and your js would be
$("#listDisp").find('input').datepicker();
OR
$("#listDisp input").datepicker();
Here is FIDDLE
Related
<span>
<input name="" autocomplete="off" label="" class="form-control mandatory field-mandatory" placeholder="">
<span class="goog-combobox-button"/>
<input type="hidden" value="3" id="ctl00_cntMainBody_OBJECT_ONE__PMLookupField" name="ctl00_cntMainBody_OBJECT_ONE__PMLookupField">
</span>
I would like to find out if there is a way, using jQuery, to find if the input above the one with id=ctl00_cntMainBody_OBJECT_ONE__PMLookupField has a css class field-mandatory. There are many spans on the page with similar to this one. I am working within the existing structure of html with no option to change. Since the input has no id the only way to locate it is by using the input below it that has an id.
Find each hidden input and target the sibling you want :-
$("input[type='hidden']").each(function() {
var inputAbove = $(this).siblings('input.field-mandatory');
// DO SOMETHING
});
I have a dynamic web page where the content may contain between 1 and 10 links, provided in text boxes, similar to the following:
<input size="50" id="link" value="http://Something.Something" type="text">
<input size="50" id="link" value="http://SomethingElse.Something" type="text">
I need javascript to be able to read all of the links, and be able to manipulate the data (store in array, output to screen, etc)
I know that I can read a single id using the following
var link = document.getElementById('link');
Which will return the first match - but, how can I do a loop or obtain all the values for all the links, bearing in mind that the number of links cannot be determined beforehand?
P.S. I have tried using getElementsByTagName('input') but there are more inputs on the page, which means it's getting more results than I'd like it to get.
You can make them all have names and search by name.
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
Then you can get it with:
var vrows = document.getElementsByName("vrow");
alert(vrows.length);
Give them all a common class and access using document.getElementsByClassName('class').
IDs should be unique for each element. You could use document.getElementsByClassName or document.querySelectorAll(".class"); and then use the class name (assuming relatively modern browser). Or use document.getElementsByTagName() and then iterate through the elements comparing with the class.
Attach a jQuery lib and you will be able to do something like:
$('input[type=text]').each(function(i, val){
alert($(this).val());
});
Today my challenge is this:
I have two inputs and a button:
Both inputs are date picker types. So When I pick a date from first input (for example I choose 11/19/2013) I want the second input to auto-complete to a one day later value. So the second one must pick 11/20/2013 automatically when I click the first input. I use these inputs to calculate a price(in my Magento store).
Below is the structure of my html (just a skeleton)
<div class="select_grid">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="from" id="from" class="hasDatepicker">
<input type="text" placeholder="mm/dd/yyyy" autocomplete="off" name="to" id="to" class="hasDatepicker">
<input type="submit" name="Submit">
</div>
If you're happy to use JQuery You want to set something to the onChange handler of the from field.
Something like:
onChange="$('#to').attr('value',$(this).val());"
You'll have to modify it slightly. That syntax as it stands will just copy the value across. You'll need to use the javascript or jQuery date function to increment by one day/week etc.
An example of doing this is in this overflow question: Add +1 to current date
I have a list of checkboxes that go together. One is for a name the other is for a price. I need to check the one for price and the corresponding name one gets automatically checked.
Here is my code:
<input id="name1" name="name1" value="Option Name 1" type="checkbox">
<input id="price1" name="price1" value="125" type="checkbox">Option Name 1<br>
<input id="name2" name="name2" value="Option Name 2" type="checkbox">
<input id="price2" name="price2" value="150" type="checkbox">Option Name 2<br>
<input id="name3" name="name3" value="Option Name 3" type="checkbox">
<input id="price3" name="price3" value="175" type="checkbox">Option Name 3<br>
How can I do this with javascript? I could do it if it were only one set, but I don't know how I would do this without making a separate function for each one. This list of check boxes is created dynamical with PHP, so there will be more or less depending on the item in the database that is selected.
probably something like this?
Add class name and price for the checkboxes for easy detection. And using event deleagtion since you are dynamically appending the
$(document).on('change','.name, .price', function () { //provide a container selector instead of document.
$(this).next('br').prevAll(':eq(1),:eq(0)').prop('checked', this.checked);
});
Fiddle
if you dont want to add another class to the markup then use startswith selector, and for both way toggle.
$(document).on('change',':checkbox[id^=name],:checkbox[id^=price]', function () { //provide a container selector instead of document.
$(this).nextUntil('br').andSelf().prev().andSelf().prop('checked', this.checked);
});
Fiddle
This just select the next available br
Give the price inputs a class of "price" or something similar, and give the name inputs a class of "name" or somthing similar.
Then bind the events using the class selector, and find the corresponding checkbox using next('.price') or previous('.name')
I'd add a class to each input and it's easy from there:
$(document).ready(function() {
$(".name").change(function(){
if($(this).is(":checked")){
$(this).next().attr("checked","checked");
}else{
$(this).next().removeAttr("checked");
}
})
});
checkout jsfiddle: http://jsfiddle.net/megarameno/BSYvE/
Don't use <br> anymore, instead, wrap them in divs. That way they can be recognized as a DOM group and your JS can be intelligent - no need for a bunch of event handlers!
This example uses jQuery: http://jsfiddle.net/Nu8w9/2/. It checks the whole row either way, which I think is what you want. Interpreting your question literally, it would just be $('.row').on('change input:nth-child(2)', function (e) { $(e.target).closest('.row').find('input:nth-child(1)')[0].checked = e.target.checked; });
I've got the a piece of a form where I've applied some javascript (the end-purpose of the js is to show the appropriate follow up question), but the part that loads the input's and select's values into variables doesn't seem to be working.
Here's the exact code:
# HTML
<ul id="m_mlt_t">
<li>How long have you known <span class="nom">__</span>?</li>
<li><input name="m_mlt_n" type="text" maxlength="3" /> <select name="m_mlt_t"><option></option><option>days</option><option>months</option><option>years</option></select></li>
<li><input name="m_mlt_n" type="radio" value="777" />I prefer not to answer</li>
<li><input name="m_mlt_n" type="radio" value="999" />Don't know</li>
<li><span class="m_mlt_t" style="display:none;"></span></li>
</ul>
# JAVASCRIPT
$('select[name="m_mlt_t"], input[name="m_mlt_n"]').change(function() {
var time = $('input[name="m_mlt_n"]').val();
$("span#m_mlt_t").text(time);
$("span#m_mlt_t").fadeIn();
var period = $('select[name="m_mlt_t"]').val();
$("span#m_mlt_t").append(" " + period);
$("span#m_mlt_t").fadeIn();
});
In the fiddle, I expect the span to fade in and display the values of the textfield and the dropdown.
http://jsfiddle.net/vxvSU/
btw the code for the following custom functions isn't included, but I know they work
counter_multiChoice(),fadeOUT_sect(),fadeIN_sect()
A first problem is your selector
$('select[name="m_mlt_t"] input[name="m_mlt_n"]')
This selects any child input elements inside the select element, which doesn't make any sense and should probably be...
$('select[name="m_mlt_t"], input[name="m_mlt_n"]')
Which selects all matching select, and input elements with the appropriate names.