HTML code as follows:
<div id="input2" class="clonedInput">
<div class="col-sm-3 text_flied">
<div class="col-sm-4 no-padding">
<input type="" class="bwidth" value="" placeholder="300" name="fr_width[1]">
</div>
<div class="col-sm-1 text_middle no-padding">
<p>X</p>
</div>
<div class="col-sm-4 no-padding">
<input type="" class=" bheight" value="" placeholder="300" name="fr_height[1]">
</div>
</div>
</div>
I want to update the value of the input field fr_width[1]. This sections are dynamically created as fr_width[2], fr_width[3] and so on.
To update the value, I use the following code, but it is not working. I tried the children() option too.
$("#input2").siblings(".col-sm-4 input").val('123');
$("#input2").closest(".bwidth").val('123');
Both ways are not working.
Try DEMO :-
$("#input2").find(".text_flied").find(".bwidth").val('123');
OR
$("#input2").children(".text_flied").find(".bwidth").val('123');
OR
$("#input2").find(".bwidth").val('123');
OR
The shortest way you can go for
$("#input2 .bwidth").val('123');
1)- closest only works for ancestor or the selector itself .
2)- siblings only works for the same heirarchy nodes.
There are lots of ways you can find your required selector and set value to it .
Thanks !
You can simply use something like this. If you want to get specific item dynamically.
var itemIndex = 1;
$("input[name='fr_width["+itemIndex +"]']").val("123")
Please read the documentation on jQuery's siblings and closest.
Siblings is for getting the elements on the same DOM level as the selector, in this case #input2, and not its children
Closest is for getting the closest parent element of #input2, up in the DOM tree
What you want is simply:
$('#input2 input.bwidth').val('123')
to update the .bwidth input under #input2 only. If there are more, then $('input.bwidth').val('123') should update all inputs with the class name bwidth.
Here is a reference on how jQuery's selectors work.
Why so difficult? Just select all inputfields within div with id "input2". So you can choose the inputfield from the returned array.
Example:
$('#input2 input').eq(0).val("123");
Related
Jquery get values from dynamically generated input texts
This is an example of what I am trying to achieve. Let me put the html code and describe afterwards
<div class="col-xs-3 ">
<label for="pointMap[0]-value">firstkey</label>
<input type="text" id="pointMap[0]-value" name="pointsValueMap[firstkey]" value="value1">
</div>
<div class="col-xs-3 ">
<label for="pointMap[1]-value">secondkey</label>
<input type="text" id="pointMap[1]-value" name="pointsValueMap[secondkey]" value="value2">
</div>
I would like to have all the values of however many of these kinds of input type text id (pointMap[i]-value). Please also suggest if there is a better way than having them an array when collected. My mind is blank on what should I be looping against, in a for loop, I am unable to find a terminating condition (size of these input texts).
Since you are using jQuery. You can use the attribute contains selector. There is whole list of such selectors in jQuery.
You can store values of such inputs in an array like this
var inputStore = []; //Where you want to store the values
$("input[name*=pointsValueMap]").each(function(){ //Will check for inputs with name containing pointsValueMap
inputStore.push($(this).val())
});
I have the following html
<div class="form-group col-md-2 border">
<label for="month">Month 1 - 01/11/2019</label>
<input type="text" class="form-control" id="inputCity[]" name="inputCity[]" value="550">
<label for="Costs">Costs</label>
<input type="text" class="form-control" id="inputcosts" name="costs" value="0">
<label for="grossprofit"><b>Gross Profit</b></label><div id="grossp[]"></div>
</div>
I am attempting to change the grossp[] text depending on what is input into the inputcosts box, using the following
$(document).on('change keydown paste input', '#inputcosts' , function() {
var monthcalc = $(this).closest("input[name='inputCity[]']").val();
var gcost = monthcalc - this.value;
$(this).closest("div[id='grossp[]']").html(gcost);
});
The div is not updating and no error message.
Any ideas?
By documentation, .closest checks self and all parents
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
It's because #grossp[] is not parent of inputcosts.
First select parent and then do .find
$(this).closest('.form-group').find("div[id='grossp[]']")
Since you select by ID, no need to find anything around, since ID is unique in page: $('#grossp[]')
By your naming id='grossp[]' it seems that there is multiple elements by same ID. It's not possible/valid. Only name attribute can contain [] to submit it as array of elements. Any other attribute is just plain text.
i'm trying to target the closest element of input field on keyup.
<div class="form-group">
<input type="text" class="date_of_birth" name="date[]" value="">
<span class="stepbirthVal"></span>
</div>
i want to target stepbirthVal i tried by doing this in JS
var item = $(this).find('.stepbirthVal')
i also tried this
var item = $(this).closest('.form-group').find('stepbirthVal');
Can you please help me how can i target closest element.
Thanks
Try This:
If you want to find out by class
$('.date_of_birth').next('.stepbirthVal');
If you want to find it on input event lets say onFocus:
$(this).next('span.stepbirthVal');
You can be more precise by finding element with class ('span.stepbirthVal') like this. There are various other ways depending upon situation.
I have problem with my jquery script. I have code like this and my script is deleting only input not label with it. How to delete also label?
<div class="input_fields_container">
#foreach($data->videoTags as $tag)
<div class="el">
<div class="form-group">
<label class="col-lg-2 control-label bold">#lang('main.position')</label>
<div class="col-lg-6 input-group">
<input type="text" placeholder="" name="tag[]" value="{{$tag->tag}}" class="form-control">
<div class="input-group-btn inup-group-addon">#lang('main.delete')
</div>
</div>
</div>
</div>
#endforeach
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.input_fields_container').on("click", ".remove_field", function(e) { //user click on remove text links
e.preventDefault();
$(this).parents().eq(1).remove();
x--;
})
});
</script>
You could use closest() to target the parent div that contain the label also :
$(this).closest('.form-group').remove();
//OR
$(this).closest('.form-group').html('');
NOTE : You could jump up to the el parent you need just to change the selector.
The use of the selector eq here is not very wise. You can check the doc to understand how to use it efficiently :
https://api.jquery.com/eq-selector/
You can read:
"They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors."
By doing $(this).parent().eq(1).remove(), you will remove only one element of the array of element that match the selection of $(this).parent(). You can check what is in your array to try to understand what to remove.
I suggest that you can use your foreach to create a attribute like "data-input=y" on your <div class="el">, where y is a variable that you increment. Like that you can quickly know which input to delete and your selection is not depending of the structure of the DOM.
I am trying to the select the next closest div to the input tag changed. When I run this nothing happens. I have tried the closest tag and the next tag.
$("input[id='declined']").change(function(){
$(this).next('div.textarea_container').fadeIn();
});
Html:
<div id="gcheckbox">
<input type="radio" id="name10" class="guidelines" name="Confirmed diagnosis of melanoma" value="Accepted">
<input type="radio" class="guidelines no_margin" name="Confirmed diagnosis of melanoma" id="declined" value="Declined">
<label>Confirmed diagnosis of melanoma</label>
<div class="textarea_container">
<textarea placeholder="reason" id="notearea0"></textarea>
</div>
</div>
I have now made a sample file.
http://jsfiddle.net/dMmuW/
jQuery's next function only works for the adjacent sibling element, use nextAll to get all sibling elements after the selected one and filter to the one you want.
$('#declined').change(function () {
$(this).nextAll('div.textarea_container').fadeIn();
});