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/
Related
I am using selenium with python to write the code. I am looking to pull the information from a text box. The box auto fills as other information is being filled out. Inspecting the box gives the following code:
<input type="tel" autocomplete="off" name="amount" step="any" class="form-
control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"
placeholder="" tw-focusable="" show-decimals="$ctrl.showDecimals" tw-number-
input-formatter="" ng-change="$ctrl.changedAmount()" ng-
model="$ctrl.ngModel" ng-disabled="$ctrl.ngDisabled" disabled="disabled"
style="">
The issue is that there is already another input box that has the name "amount", so I can't do a simple selection by name. I am thinking this would require me to use a CSS selector but everything I have tried so far has not worked. Please let me know what I can try.
Looks like you need to use CSS or XPath locators.
Its hard to tell how exactly you can find that element since you haven't provided a source of the entire page but here are some tips.
In the worst case when you cant find any combination of attributes that will uniquely identify the element you need to rely on dom nodes hierarchy, i.e. in order to find first input on the following page:
<!DOCTYPE html>
<html>
<head>
<title>Dummy page</title>
</head>
<body>
<div>
<div>
<input type="text">
</div>
<p>
<input type="text">
</p>
<input type="text">
</div>
</body>
</html>
You can use XPath locator that might look similar to this one:
//div/div/input
But that's the worst case, usually you can use more flexible locators based on element attributes that less likely to be affected by page structure modifications. Let's say each of our inputs from the page above has "name" and "disabled" attributes.
<div>
<div>
<input name="input1" disabled="" type="text">
</div>
<p>
<input name="input1" disabled="disabled" type="text">
</p>
<input name="input2" disabled="" type="text">
</div>
Then we can find first input using the following locator:
//input[#name="input1" and #disabled=""]
Hope that helps.
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"/>
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'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"/>
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.