JQuery: How to select label of input's ancestor - javascript

I have the following HTML:
<div class="control-group">
<label class="control-label-sub">Description/Pack Size</label>
<div class="controls">
<input type="text" name="packetSize" class="wfinput required form_error" id="packetSize" />
<label id="packetSize-error" class="form_error" for="packetSize">
This field is required.
</label>
</div>
</div>
Is there a way to select the <label> element that is the child of .control-group (ie, the one with "Description/Pack Size" text), from the <input /> text field in my HTML?

To select the <label> element that is above the <input/> element, you could:
first use .closest() to select the first .control-group above the <input/> element and then
select the first child label of that .control-group
This can be achieved via the following jQuery script:
const input = $('input[name="packetSize"]');
const controlGroup = input.closest('.control-group');
const label = $('label', controlGroup);
It's possible to condense this into a single line but I've broken it into steps for clarity. Hope that helps.

If you want to get all label that class was named "control-label-sub".
var element = $("label.control-label-sub")
And If you want to get only that label I prefer following
var element = $("input#packetSize").parent().prev()

Related

JavaScript/html show alert which includes label input

I'm using HTML5 and JavaScript
I want to be able to input any word into a label and when you click on the button it gives an alert which includes the given text.
I cannot get it to work with the text I put into the label the alert shows no text.
I've only found how to do it with predefined labels.
Here's my current html code
function getinput() {
var input = document.getElementById("form-scream").innerText;
alert(input);
};
<div>
<p>Word
<label id="form-scream"></label>
<input type="text" name="screaming" id="form-scream">
<button onclick="getinput()"> Click to scream</button>
</p>
<script src="assets/js/scream.js"></script>
</div>
input element does not have innerText property, use value instead. Also, you have use for attribute in a label to associate an element (the element's id as the value of for):
function getinput()
{
var inputVal = document.getElementById("form-scream").value;
alert(inputVal);
};
<div>
<p>Word
<label for="form-scream"></label>
<input type="text" name="screaming" id="form-scream">
<button onclick="getinput()"> Click to scream</button>
</p>
<script src="assets/js/scream.js"></script>
</div>

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 get specific elememt that have data-bind attribute and call now (using now-active now)?

<div class="container">
<div class="well" data-id="myApp">
// Data-Bind is Here
<input type="text" value="" class="form-control input-sm"
data-bind="value:name,valueUpdate:'afterkeyup'" />
// Data-Bind is Here
<p class="info" data-bind="text:name"></p>
<button class="btn btn-success" data-bind="click:showName">Show</button>
</div>
</div>
I want to get html element that have "data-bind" attribute for example I want to Get something like this :
<input type="text" value="" class="form-control input-sm"
data-bind="value:name,valueUpdate:'afterkeyup'" />
if I change above code like this :
<div class="container">
// Data-Bind is HERE Now
<div class="well" data-id="myApp" data-bind="value:name,valueUpdate:'afterkeyup'">
// Data-Bind is HERE Now
<input type="text" value="" class="form-control input-sm" />
<p class="info" data-bind="text:name"></p>
<button class="btn btn-success" data-bind="click:showName">Show</button>
</div>
</div>
now I want to get element like this :
<div class="well" data-id="myApp" data-bind="value:name,valueUpdate:'afterkeyup'">
How can I have function for get active element that set data-bind for it , when data-bind read I can get correspondingly element of it
I need general way not for specific event or ...
If you are using JQuery then you can use "has attribute" selector. For example:
$("[data-bind]")
You can get all elements with a data-bind attribute with the jquery attribute selector.
$("*[data-bind]")
Next you can refine the selector in various ways, e.g. to consider only certain tags or choosing only a slice of the result,or by employing jquery filters:
$("div[data-bind], input[data-bind], p.data-carrier[data-bind]"); // consider only div, input, or p elements, the latter only when having class data-carrier
$("*[data-bind]:first"); // use the first match only
$("*[data-bind]")[1]; // use the second match only
$("*[data-bind]").filter(":even"); // use only matches with an even index in the list of matches
$("*[data-bind]").each ( function ( idx, element ) { /* your code */ } ); // the most general approach: iterate through the results and decide upon each element what to do next
Are you looking for this in jquery:
var elem = $('.container').find('[data-bind]');
Use $("*[data-bind]")[0].outerHTML
It will you the outerHTML of the element.
Working Fiddle

Get name from one element and call to another element

Disclaimer:This is a unique situation and very hackish.
I have one set of radios that are visible to users and another set that is hidden. I need to pull the name from the hidden set and assign to the visible set.
Hidden radios:
<div class="productAttributeValue">
<div class="productOptionViewRadio">
<ul>
<li>
<label>
<input type="radio" class="validation" name="attribute[139]"
value="86" checked="checked" />
<span class="name">Standard Shipping</span>
</label>
</li>
etc etc...more li's
</ul>
</div>
</div>
A visible radio:
<label>
<input type="radio" class="validation" name="PUT OTHER NAME HERE" value="86" checked="checked" />
<span class="name">Standard Shipping</span>
<p class="rl-m"><small>Earliest Date of Delivery:</small>
<small><span id="delivery-date"></span></small></p>
</label>
So, in this case, I would like the name "attribute[139]" to somehow be gotten from the hidden radio and called to the name of the visible radio. I'm thinking of something like this:
<script>
$(function() {
var name = $(".productOptionViewRadio span.name:contains('(Standard)')").attr('name');
});
</script>
I'm not too sure about the script being the right way to go about this and also not sure how I would actually get the value from the one element to populate to the other element's name field.
Thank you very much.
Update: Fiddle http://jsfiddle.net/susan999/XBcaF/
Try
$('label input[type=radio]').attr('name',
$('.productOptionViewRadio input[type=radio]').attr('name'));
http://jsfiddle.net/XBcaF/5/
Try this
$('input:radio.validation:visible').attr('name',function(){
return $('input:radio.validation:hidden').attr('name')
})
Could improve the selectors if know more about parent classes of visible radios, or what elements are actualy being set as hidden
You can try something like this:
var checkboxCount = 0;
$("#visibleCheckboxes").find("input[type=checkbox]").each(function(){
$($("#hiddenCheckboxes").find("input[type=checkbox]").get(checkboxCount)).attr('name', $(this).attr('name'));
checkboxCount++;
});
I've prepared a Fiddle for you: http://jsfiddle.net/MJNeY/1/

JavaScript get element through parent

...
<td id="mycell">
<input type="text" name="year" onmouseout="do_something(this.value,...);" />
<input type="text" name="month" onmouseout="do_something(this.value,...);" />
</td>
...
i need to get value of neighbouring input element when submitting function on other element.
Thing is there are 10 of them and i cannot use id, names are same as well.
So i need to somehow get parent <td> and then address its child e.g. i submit year then onmouseout="do_something(this.value, this.parent.td.month.value");"
If you have a reference to one of the input elements, then:
var td = input.parentNode;
And you can then select all child input elements using:
var inputs = td.getElementsByTagName('input');
And to get a particular one:
var input0 = inputs[0];
and so on. To get an adjacent input, find the current input in the inputs collection, then grab the next or previous (if there is one) as required.
use the .next and .previous selector:
$(this).previous('input').val();
$(this).next('input').val();

Categories

Resources