js - check if same class elements have id - javascript

I have 2 input tags:
<input type="text" class="mainText" id="input">
<input type="text" class="mainText">
I need to set id to the input tag that don't have id, may be with jQuery like:
if(input tag has no id){
$(".mainText").attr("id", "someInput");
}
How could I find this non id input?

Use the magic of jQuery selectors:
$('.mainText:not([id])').prop('id', 'someInput');
It will select all elements with .mainText class that does :not have attribute [id].

.has(your ID) will return false if no ID been found.
see document here: http://api.jquery.com/has/

Related

How to write selector function in jQuery .siblings()

I'm trying to find all sibling elements using the .siblings([selector]) method. Although i'm not sure how the selector method should be written, or where i'm going wrong with my current selector method.
I have the html:
<div>
<div>
<label for="username">Username</label>
<input class="username" type="text" placeholder="Username" id="username"/>
</div>
<div>
<label for="Password">Password</label>
<input class="password" type="password" placeholder="Password" id="password"/>
</div>
<div>
<button id="login">Login</button>
</div>
</div>
When the button is clicked, if the username or password fields are not entered, I want to add a class to the unfilled elements.
When the button is clicked, the script is run:
if (username not entered) {
jQuery(this).parent('div').siblings(function (a) {
if (a.children('input').length > 0 && a.children('input')[0].hasClass('username'))
return true;
else return false;
}).addClass('input-empty');
}
However this jQuery call returns both the div containing the username field and the div containing the password field. Why does this return the password field if I have specified that it must contain an input tag with the class 'username'?
Look at the documentation:
.siblings( [selector ] )
The method accepts one argument, which is optional, and is a selector.
selector
Type: Selector
A string containing a selector expression to match elements against.
If you pass a selector, it must be a string.
jQuery(this).parent('div').siblings(function (a) {
You are passing a function, which is not a string.
Use the :has() psuedo-class to select elements with specific descendants.

closest(elem) is not returning as expected - returning init[elem..] instead of elem

I have the following setup
HTML:
<div class="prod-inner">
<div class="number-wrapper">
<input type="text" name="updates[]" id="testID" value="1" >
</div>
</div>
JQuery:
$('.number-wrapper input[id=testID]').closest('prod-inner');
expected to return the actual div like so:
<div class="prod-inner">
<div class="number-wrapper">
<input type="text" name="updates[]" id="testID" value="1" >
</div>
</div>
but instead it is returning this:
init [div.prod-inner, prevObject: init(1), context: document, selector: ".number-wrapper input[id=updates_36213941315].closest(.prod-inner)"]
You need to select the element by using class in closest. It doesn't return automatically to be a class, because jquery won't know if it is closest of class or id or some other element object:
$('.number-wrapper input[id="testID"]').closest('.prod-inner');
// wrap with double quotes ^^ | class selector ^.
Furthermore, you can directly use the id since it's unique:
$('#testID').closest('.prod-inner');
If you have dynamic id generated like I can see id=updates_36213941315 , then you may use attribute contains selector:
$('[id*="36213941315"]').closest('.prod-inner');
Or, start with selector,
$('[id^="updates_"]').closest('.prod-inner');

find element html with jquery

how to find element html with Jquery .
in this example element html is "input"
jsfiddle
$("#her").click(function() {
var $t = $('#mee');
console.log($t.filter());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="mee">
<input type="submit" value="click ici" id="her">
$(this).prev().prop('nodeName');
I believe this was the JSFiddle link - http://jsfiddle.net/sr2o412y/
<input type="text" id="mee">
<input type="submit" value="click ici" id="her" >
If you want to select a element using jquery you can use (#)id attribute or (.) class attribute or (input) html tagname.
In this case if you want to take the data from text element which has id => "#mee" on click if id => "#her". You can use the below code
$('#her').on('click', function(){
var textvalue = $('#mee').val();
console.log(textvalue);
});
Provide readable id and class names to identify elements properly.
Your selectors looks fine to me. In short, you can use any valid CSS selector, so both $('#her') and $('#mee') should be working in your example, as you have HTML elements with those ids:
$('#her').click(function() {
var $t = $('#mee');
console.log($t.val());
});
<input type="text" id="mee" />
<input type="submit" id="her" value="SUBMIT" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you want to select an element based on its type (tag) instead, then just remove the #. For example, to select any input element on the page you would just do:
$('input')
Or, to get just the first one:
$('input').first()
Or also:
$('input').eq(0)
You can also select elements based on type plus attribute to select specific inputs:
$('input[type="text"]')

How to find an element within another element without an id

I am trying to change the values of some input element when a value of select dropdown changes.
When the select dropdown changes, i want to change some hidden textbox and a normal textbox which are with a td with class="owner".
Within the td tag there are multiple elements with type="hidden" and one input type= text. I want to change the values of element with type="hidden" and id ending with _lkid and _lkold and then the only element within the td which is of type="text" and is within a span tag
I don't have an id of the elements within the td as they are generated automatically nor can i assign a class to those elements. i can only assign class to the td.
I am able to change the values of hidden text, but i am unsure of how to change the type="text" field. Any pointers would be helpful.
Jsfiddle : https://jsfiddle.net/4honph7n/3/
This js is probably not the best/effective code written, taking some baby steps with jquery
HTML
<select class="selectClass">
<option>Option 1</option>
<option>Option 2</option>
</select>
<table>
<tr>
<td class="owner">
<select>
<option>1</option>
<option>2</option>
</select>
<input type="hidden" id = "someid_lkid" value="00590000002BIF7">
<input type="hidden" id = "someid_lkold" value="Some Text">
<!-- there are some more hidden fields -->
<span class="lookupInput">
<input type="text" id = "someid" value="Some Text">
</span>
</td>
</tr>
</table>
Js
$(document).ready(function () {
$('.selectClass').change(function() {
$('.owner').each(function(i) {
$(this).find("input[type='hidden']").each(function(){
if($(this).attr('id').indexOf("lkid") > -1){
$(this).val('new id');
alert($(this).val());
}
if($(this).attr('id').indexOf("lkold") > -1){
$(this).val('new text');
alert($(this).val());
}
})
})
})
})
If you want to assign the same text/value to all inputs then
$(document).ready(function () {
$('.selectClass').change(function () {
$('.owner input[id$="lkid"]').val('new id');
$('.owner input[id$="lkold"]').val('new text');
$('.owner input:text').val('new val');
})
})
Demo: Fiddle
You can use the attribute ends with selector:
var $lkid = $(this).find("input[id$='_lkid']"),
$lkold = $(this).find("input[id$='_lkold']"),
$text = $(this).find("input:text");
You can use .find() with class selector along with child selector and Attribute Ends with selector
var textInput = $(this).find('.lookupInput input');
alert(textInput.val());
//Similarly you can use
var lkid = $(this).find("input[id$='_lkid']");
var lkold = $(this).find("input[id$='_lkold']");
DEMO
You can use the following selectors.
select hidden input with id containing 'lkid':
$('[id*=lkid]')
select hidden input with id containing 'lkold':
$('[id*=lkold]')
select text input:
$('td.owner>span.lookupInput input[type=text]')
Try this: DEMO
$(document).ready(function () {
$('.selectClass').change(function() {
$(".owner input[id$='_lkid']").val('new id');
$(".owner input[id$='_lkold']").val('new text');
$(".owner span input[type=text]").val('new value');
})
})
You just need to use some selectors for that like,
To get all inputs -> $("input")
To get all inputs with type attribute -> $("input[type]")
To get all hidden inputs -> $("input[type=hidden]")
To get all inputs with type ends with 'den' -> $("input[type$=den]")
To get all inputs with type starts with 'hid' -> $("input[type^=hid]")
To get all inputs with type contains 'idd' -> $("input[type*=idd]")
You can get more such selectors from here -> http://www.w3schools.com/css/css_attribute_selectors.asp
Basically, jQuery selectors are CSS selectors...

jQuery if element id exists add class to the same element

I am trying to addClass to an input if it exists and trigger a click else addClass to different element and trigger a click on it in jQuery but I am having some problems and tried different ways but with no luck.
This is the html:
<td>
<input type="radio" name="shipping_method" value="free.free" id="free.free" />
<label for="free.free">Free</label>
<input type="radio" name="shipping_method" value="flat.flat" id="flat.flat" />
<label for="flat.flat">Payed</label>
</td>
and my script :
<script language="Javascript" type="text/javascript">
$(document).ready(function(){
if($('#free.free').length > 0) {
$('#free.free').addClass('sgcheck');
$('.sgcheck').trigger('click');
}
else {
$('#flat.flat').addClass('sgcheck');
$('.sgcheck').trigger('click');
}
});
</script>
You need to escape dot character in id selector with double \\:
$('#free\\.free').length
otherwise #free.free selector means element with id free and class name free, which your HTML obviously doesn't have.

Categories

Resources