We Keep Coding

Is there a way in JQuery to find if a sibling of an input has a given css class?

<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
});

Identical ID's in the same HTML page

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"/>

create div in jquery without using append

when i'll click input field div will create dynamic,only using input field.it is possible to create div without using append(attr) in jquery.i don't know please help me
<input type="text" id="date_id" class="date" />
i'm expecting:
<input type="text" id="date_id" class="date" />
<div id="div_id"></div>

try this
$("#date_id").after('<div id="div_id"></div>')

there is several method are available in Jquery to create dynamic element except .append(), like
$("#elementId").after('<div id="div_id"></div>')// insert after the element
$("#elementId").before('<div id="div_id"></div>') // insert before the element
('<div id="div_id"></div>').appendTo($("#elementId")); // insert into the element

Try using .one() to prevent duplicate #div_id elements in document , .insertAdjacentHTML
$("#date_id").one("click", function() {
this.insertAdjacentHTML("afterEnd", "<div id=div_id>div_id</div>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<label>
<input type="text" id="date_id" class="date" value="" />
</label>

JQuery hide span outside of div

I am trying to hide a span but having some trouble doing so. I want to get all the spans based on their for tag value and simply hide them. My question is, is it possible to get span's where there for tag equals something?
For example:
<input type="text" id="Address1" />
<span for="Address1" class="field-error">Boo</span>
<input type="text" id="Address2" />
<span for="Address2" class="field-error">Hoo</span>
JSFIDDLE
JQUERY
$("#btn1").click(function() {
$("span.field-error").hide();
});
Thanks in advance, DS.

You may try this
$("span[for='Address1']").hide();
But it's not valid for span, instead you can use data- prefix for custom attributes, like
<span data-for="Address1">some text</span>
Then, js could be
$("span[data-for='Address1']").hide();
An example.

jQuery not finding element using id

I've got a simple HTML form and for some reason jQuery cannot find the element I'm looking for.
HTML:
<form id="form">
<fieldset>
<table>
<tr class="row">
<td class="label">Street</td>
<td class="field"><input type="text" size="50" value="" id="s.street"></td>
</tr>
</table>
</fieldset>
<fieldset>
<tr class="row">
<td class="label">Street</td>
<td class="field"><input type="text" size="50" value="" id="b.street"></td>
</tr>
</table>
</fieldset>
</form>
jQuery :
$(document).ready(
function() {
$("input[id='s.street']").keyup(function() {
$('#b.street').val($(this).val());
});
});
I get no errors in the console log.

If the element HAS to have that exact id, use:
$('#b\\.street')​

ID's should be unique, so you shouldn't have to filter with the input tag. Additionally, you need to add an escape sequence before the . in your ID name. $('#s\\.street') is the correct selector. I would actually suggest not using the ....

your id names conflict with the jquery selector syntax.
When defining an id for an element do not use the # . or any spaces within your ID

YOu have a problem in your naming convention. replace the . in the name to a hyphen.
So:
<input type="text" size="50" value="" id="s.street">
Becomes
<input type="text" size="50" value="" id="s-street">
and you select in with jquery like so:
$("#s-street");

Sizzle (the javascript selector library that jQuery implements) will see the s.street as an element s or b with a class of street. as opposed to an element with id of s.street.

from here: What are valid values for the id attribute in HTML? it looks like jquery has trouble with ids that have periods and colons. so try removing those and see if it works.