when I create form where is only one "datetime" field :
<input type="text" id="datepicker">
is all right, but when i have multiply "datetime" field in same form:
<input type="text" id="datepicker">
<input type="text" id="datepicker">
this not working. JQuery datepicker works only for first input, for second is not shown. What is problem?
In my main layout page I have:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="{$basePath}/js/main.js"></script>
In my main.js :
$('#datepicker').datepicker({dateFormat: "yy-m-d"});
change your code for use class:
<input type="text" class="datepicker">
<input type="text" class="datepicker">
And execute your script so:
$('.datepicker').datepicker({dateFormat: "yy-m-d"});
Or use differents IDs:
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
And execute you script so:
$('#datepicker, #datepicker2').datepicker({dateFormat: "yy-m-d"});
You cannot have two DOM elements with the same id. You may use class instead:
<input type="text" class="datepicker">
<input type="text" class="datepicker">
And in main.js:
$('.datepicker').datepicker({dateFormat: "yy-m-d"});
you simply cant have ids with the same name. change them to classes or use unique names for you ids
Both of your input form fields have the same ID. Give the second one a different ID, like datepicker2, then you can call datpicker on that field using that ID.
$('#datepicker2').datepicker({dateFormat: "yy-m-d"}); // The second datepicker
Instead of using IDs, you can also use class names:
<input type="text" class="datepicker">
<input type="text" class="datepicker">
$('.datepicker').datepicker({dateFormat: "yy-m-d"}); // All datepickers with class "datepicker"
Related
<form id="pricecal">
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" placeholder="Check in" value="" required />
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" value="" placeholder="Check Out" required />
<input type="hidden" onchange="calprice()" id="noroom" value="" name="room" />
<input type="hidden" onchange="calprice()" id="noguest" value="" name="guest" />
</form>
my code perfectly works on input text but not on input type hidden
i tried following ways i dont want to loop for every input
function calprice(){
alert('Textarea Change');
}
$(document).on('change', 'form#pricecal input', function(){
alert('Textarea Change');
});
$("form#pricecal input").bind("change", function() {
alert('Textarea Change');
});
As you have bound event on the elements that can be triggered whenever you update your input's value:
$('input[type="hidden"]').trigger('change');
Put this line just after that line of code which causes the value change.
type=hidden
These fields should not be rendered and provide a means for servers to store state information with a form. This will be passed back to the server when the form is submitted, using the name/value pair defined by the corresponding attributes. This is a work around for the statelessness of HTTP. Another approach is to use HTTP "Cookies".
Refer this link
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'm trying to move data from a selected row in a table to a form in MVC. I'm using a jquery click event to retrieve the data from my table and move it to my form. The click event is working but it is moving the data to the wrong fields. Heres the click function:
$(document).ready(function () {
$(".innerTbltr").click(function () {
alert("Event handle.");
//this.css("background-color", "#E8EEF4");
$("#firstName").val(this.childNodes[0].innerHTML);
$("#lastName").val(this.childNodes[1].innerHTML);
$("#address1").val(this.childNodes[2].innerHTML);
$("#address2").val(this.childNodes[3].innerHTML);
$("#city").val(this.childNodes[4].innerHTML);
$("#state").val(this.childNodes[5].innerHTML);
$("#zip").val(this.childNodes[6].innerHTML);
$("#birthDate").val(this.childNodes[7].innerHTML);
});
});
The form is set up like this:
<form>
<input id="firstName" type="text"/>
<input id="lastName" type="text"/>
<input id="address1" type="text"/>
<input id="address2" type="text"/>
<input id="city" type="text"/>
<input id="state" type="text"/>
<input id="zip" type="text"/>
<input id="birthDate" type="text"/>
</form>
Currently the first name is put into the last name field. The last name is put into the address 1 field. The address 1 is put into the state field and the remaining two fields are left blank. As well as the fields in between the fields that have data are blank.
It might be that not all the DOM is loaded Try putting the click event in a jQuery
$(document).ready(function(){
//the click event here
});
I'm trying to use the jQuery validate plugin to validate classes instead of ID's. Despite the many threads which seem close to answering this issue - I can't get any of them to work. I simply have a form that has a lot of dynamically generated repeating form fields, so naturally I can't add rules for the ID's because there's no knowing how many of them there will be. So, instead, I would like to just target the class on the input field.
<input type="text" id="name1" class="fileName" />
<input type="text" id="name2" class="fileName" />
<input type="text" id="name3" class="fileName" />
<input type="text" id="name4" class="fileName" />
How do I target 'fileName' class? I've tried this:
$(document).ready(function(){
$.validator.addClassRules({
fileName:{
required: true
}
});
$("#myForm").validate();
});
But this does not work at all :(
Any ideas? Anyone?
You need to specify a name attribute on each input element for validator to pick it up:
<form action="#">
<input type="text" id="name1" class="fileName" name="name1" />
<input type="text" id="name2" class="fileName" name="name2"/>
<input type="text" id="name3" class="fileName" name="name3"/>
<input type="text" id="name4" class="fileName" name="name4"/>
</form>
Here's a working example: http://jsfiddle.net/Nbcj9/
According to the docs, this should work:
jQuery.validator.addClassRules('classNameHere', {
required: true
});
Then you can determine whether the fields are valid by calling:
$('.fileName').valid();
Here's a link to the docs
what about:
$(".fileName").validate();