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.
Related
I am getting the following warnings when we use with the same id names in two different form tags.
[DOM] Found 2 elements with non-unique id
Here is my HTML snippet:
<div class="modal-dialog">
<form action="" method="post" id="myid-1" name="myid-1">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
<div class="modal-dialog">
<form action="" method="post" id="myid-2" name="myid-2">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
How do I resolve "Found 2 elements with non-unique id" warnings?
you need to change id="Job_Name" to be unique e.g. id="Job_Name1" id="Job_Name2" etc. as ID must be unique in the DOM.
It will create conflict when you want to select elements using document.getElementById('Job_Name') or using jQuery $('#Job_Name') as you wont be able to get the second or other elements with same id. you will need to use index and querySelectorAll which will then defeat the purpose of using Id at first place.
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="" >
Duplicate input tag in two different forms
You have to use different id for different elements
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
You need to change de id for each input
Becouse You mentioned the two input element with same id ('Job_Name') in same page
You cannot give the same id in same page to two different element
id is an identifier that defines the identity of the element. It is designed to act like a key to the element and hence it needs to be unique.
Check this answer..
https://stackoverflow.com/a/2187788/8230086
Change the IDs on your inputs as they are what is causing your problem.
As a general rule you don't want to have the same id's on any of your elements.
id suggest using something along the lines of job_name1/job_name2
Just use new { id = "" } for one of the two fields:
#Html.HiddenFor(m => m.Name, new { id = "" })
if you are using react native web or expo pwa use nativeID in place of id
<input nativeID="someId"/>
I have a page that has two different inputs that contain same ID but each one in different form. and I'm actually setting values to inputs from javascript using get element by ID. I know this is not valid. but the thing is if i change one of the input id's I'm gonna need to re write a bunch of code in 'shopping cart ' cuz these input's pass value to cart. I'm actually not planning to touch that for now. So, is there any trick that can target one input instead of the other even if they have the same id's??
ex:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
thanks in advance!!
Although it is a wrong practice, and you should use different id's, you could add a different class attribute to each one.
<input class="input1" type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input class="input2" type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
var x = document.getElementsByClassName("input1")[0];
Again: I strongly recommend you to find time to change the logic of your program to use unique id's.
If they are in different forms you can target them by selecting IDs where they are inside a certain class. You can also change the name attribute and select that instead.
HTML
<div class="form1">
<input type="hidden" name="rename1" id="cart_1_ID_Add2" value="">
</div>
<div class="form2">
<input type="hidden" name="rename2" id="cart_1_ID_Add2" value="">
</div>
JS
$(".form1 #cart_1_id_add2")
//Or
$("input[name*='rename1']")
However you shouldn't really have the same id twice on one page otherwise it makes it hard to maintain and debug. If it's not a huge job to change your approach I'd recommend you do that.
Add another attribute to one or both tags.
For example, you can make them
<input type="hidden"name="cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add100" class="myInput" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add101" class="myInput" value=""/>
Then get their values with jQuery
var myInput = $('[data-id=add100]').val();
console.log(myInput);
OR use plain javascript by adding a class and getting the value
var myVal = document.getElementsByClassName("myInput")[0];
console.log(myVal.value);
Hope this helps
Yes.
That code shouldn't have duplicate id properties in Dom btw.
You can use a custom HTML element property:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier"/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier2"/>
I have a table of rows and each row has an edit button. When I click the button I can set row values to form controls on a form.
I'm expecting that when I call $('#txtFirstName').empty() it should clear the text in txtFirstName. Instead, the text is not cleared, and when I call the form again it shows the old text in that control.
Is there a way to clear text in the control?
$('#btnClear').click(function () {
$('#txtFirstName').empty();
$('#txtLastName').empty();
}
The source code shows as data was cleared.
<tr>
<td>
<label for="employee_FirstName">First Name</label>
</td>
<td>
<input class="form-control" data-val="true" data-val-required="The First Name field is required." id="txtFirstName" name="employee.FirstName" placeholder="First Name" style="width:400px" type="text" value="" />
</td>
<td>
<span class="field-validation-valid" data-valmsg-for="employee.FirstName" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<td>
<label for="employee_LastName">Last Name</label>
</td>
<td>
<input class="form-control" data-val="true" data-val-required="The Last Name field is required." id="txtLastName" name="employee.LastName" placeholder="Last Name" style="width:400px" type="text" value="" />
</td>
<td>
<span class="field-validation-valid" data-valmsg-for="employee.LastName" data-valmsg-replace="true"></span>
</td>
</tr>
This information might be coming from the cache, but I'm not sure.
As #RoryMcCrossan said in his comment above, what you're looking for is jQuery.val.
Get the current value of the first element in the set of matched elements or set the value of every matched element.
jQuery.empty does not do what you think it should.
Remove all child nodes of the set of matched elements from the DOM
Because you are trying to change the value of an element, instead of removing elements from the DOM, you should use jQuery.val.
As a side note, you have a syntax error in your JavaScript above. You are missing a closing parenthesis ) at the end of the argument list of $('#btnClear').click. Whether that was a copy and paste error or not, I thought I would point it out.
Also note that instead of applying jQuery.val to each element you want to clear, you can select the elements by class and apply jQuery.val to the returned jQuery object, which will apply the operation to every element with the matching class.
Here's a simple example:
$('#clear').click(function() {
$('.form-control').val('');
});
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<input class="form-control">
<input class="form-control">
<input class="form-control">
<button id="clear">Clear</button>
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"
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/