JQuery hide span outside of div - javascript

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.

Related

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

Default value in an input tag at a particular position

I don't know if this is possible or not and hence here's the part. Suppose I have an input tag like the following.
<input id="expiry" name="expiry" type="text" placeholder="MM/YY">
Now what I want is that the user should already see the '/' part, i.e when he types 1212, the textbox should become 12/12 automatically, can it be done if yes , how. Thanks in advance.
For an HTML/CSS-only approach, you could use two inputs, and style them with no borders on the inside edges:
<input type="text" maxlength="2">
<span> / </span>
<input type="text" maxlength="2">
With the input and span elements set to display: inline-block; and some styling of borders, this is a strong, semantic approach with no required Javascript.
Recently I found a plugin that looks nice and I think it does what you're after, so I'm sharing it with you: cleave.js
<input id="expiry" name="expiry" type="text" placeholder="MM/YY">
<script type="text/javascript">
$("#expiry").bind('keyup mouseup', function () {
if($('#expiry').val().length ==2){
$('#expiry').val($('#expiry').val()+'/');
}
});
</script>
check the fiddle
try to use jquery mask plugin :
$(document).ready(function(){
$('#expiry').mask('00/00');
});

How do I disable tabbing in child divs

I have a div element with several children. I need to disable tabbing in all of them. I have been using tabindex but is there any way to disable them all by setting a value in the parent.
I don't want to touch the child divs.
I have no idea what your code looks like but you could grab the parent element and add the tabindex attribute to its children that are inputs using attr() as follows:
$(".wrapper").children("input").attr("tabindex", "-1");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
<input type="text" name="4">
</div>
NOTE: when you say "I don't want to touch the child divs" I'm assuming you mean you don't want to manually go through every instance and add tabindex as it would be time consuming?
More info: http://api.jquery.com/attr/

JQuery Setting inline attribute in Grand children input type

I'm in ASP.NET MVC. I need to modify an input tag with JQuery to set placeholder="Something"
I have these tags in a form
<div id="searchbox" class="SearchBox SearchInterface state
ComponentState QueryController Debug">
<div>
<input type="text" autocapitalize="off" autocorrect="off"
class="QueryBox" form="dummy-form">
</div>
</div>
I have tried many things such as
$(document).ready(function () {
$("#searchbox > div > input").prop('placeholder', 'Search');
});
But It's always like it can't find the input tag.
What's wrong with that and how I can do that ?
Thanks,
here it is working:
http://fiddle.jshell.net/9dRc8/
Seams you are missing a closing tag for the input or something like this.

Targeting a span that is wrapped around a radio input

My problem is fairly simple. I'm using a template to do styling. The way the template handles form inputs is it wraps them in span tags. To select the radio button, you have to change the class of the span to "checked". Using checked="checked" or checked in the input does not work.
Example:
<label class="radio">
<div class="radio" id="uniformed-undefined">
<span class="checked">
<input type="radio" name="grow" value="slash">
</span>
</div>
How can I target that <span class="checked"> based on the input name "grow" and the value "slash" ?
I've looked into .before() but I'm not sure that's the correct answer.
jQuery multiple attribute selector
and jQuery parent
$("input[name='grow'][value='slash']").parent("span");
$("span.checked:has(input[name='grow'][value='slash'])")
JS Fiddle: http://jsfiddle.net/RgN7H/1

Categories