How to find an element within another element without an id - javascript

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...

Related

make diffrence between objects that created with clone() in java script

Good Day Friends. I have a problem... Thanks, if you help me
I have a couple of inputs into a div. I copied that div with Clone function in java script (by click a button) and right now, I have two divs. but my problem:
1- I don't know, How can I get the values of inputs correctly (the input's names are the same)?
2- and I have a select input in div, that some inputs add or remove by choose each option of select input. Now after copied div, choose one option in div2, create changes in div1... and I don't want it !!
<div class="levels">
<div class="add_senario_level">
<span>Level 1</span>
<form>
<select name="condition" onchange="show_div(this,'shop during');">
<option selected="selected" disabled="disabled">choose condition</option>
<option>shop after registration</option>
<option>shop during</option>
</select>
<div id="shop_during" style="display:none;">
<input type="number" id="shop_during_num" name="shop_during_num" placeholder="Enter number">
<select id="shop_during_time" name="shop_during_time">
<option selected="selected">hour after registeration</option>
<option>day after registeration</option>
<option>week after registeration</option>
<option>month after registeration</option>
</select>
</div>
<div>
<button type="button" class="newLevel"> Add New Level </button>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function()
{
$(".newLevel").click(function()
{
$(".add_senario_level").clone().appendTo(".levels");
});
});
function show_div(obj, id)
{
txt = obj.options[obj.selectedIndex].text;
if (txt.match(id))
{
document.getElementById("shop_during").style.display = 'block';
}
else
{
document.getElementById("shop_during").style.display = 'none';
}
}
</script>
You can use jQuery's find function to find a child element and the attr function to get and set attribute values. You will want to do this to change on the id and name attributes for the input and select like below:
HTML
<input type="number" id="shop_during_num0" name="shop_during_num0" class="shop_input" placeholder="Enter number">
JavaScript
$(".newLevel").click(function()
{
const count = $('.add_senario_level').length;
const clone = $(`#add_senario_level${count - 1}`).clone();
const input = clone.find(`#shop_during_num${count - 1}`);
const select = clone.find(`#shop_during_time${count - 1}`);
input.attr('name', `shop_during_num${count}`);
input.attr('id', `shop_during_num${count}`);
select.attr('name', `shop_during_time${count}`);
select.attr('id', `shop_during_time${count}`);
clone.appendTo(".levels");
});
In the show_div method, you can use $(obj) to reference the select that called the function and show or hide the correct element with
$(obj).parent().find('#shop_during').css('display', 'block');

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"]')

Get variable input value on button click

not sure if this is even possible, I have a page with mutiple inputs,each input has a button. is there anyway of getting the inputs value on button click, without hardcoding the inputs id?
example
js
$('button').click(function () {
var inputcontent = $('input').prop('id');
console.log(inputcontent);
});
html
<input type="text" id="1">
<button type="button">Go!</button>
<input type="text" id="2">
<button type="button">Go!</button>
<input type="text" id="3">
<button type="button">Go!</button>
<input type="text" id="99">
<button type="button">Go!</button>
$('input').prop('id') returns id of first matched element in selector. To target the input before each button, you need to use .prev() along with $(this).
Try this:
$(this).prev().attr('id');
Working Demo
You already doing it right, just change a little bit in your code. You have to find out the value of the input field, which is placed just before your button on which you will click. So your code should be:
$('button').click(function () {
var inputcontent = $(this).prev().prop('id');
console.log(inputcontent);
});
This'll solve the issue
$('button').click(function () {
var value = $(this).prev().val();
console.log(value);
});
You're not targeting the item that you want the id from, the input just prior to the button. Use prev(0 to do that. In addition, id is really an attribute, not a property, so you should do this -
$('button').click(function () {
var inputID = $(this).prev().attr('id'); // gets the id of the input that precedes the button
console.log(inputID);
});

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

Display the selected value of a Drop down list in a text field (javascript)

For Example:
These are the items in a drop down list.
<select name="cmbitems" id="cmbitems">
<option value="price1">blue</option>
<option value="price2">green</option>
<option value="price3">red</option>
</select>
When the user selects blue, i want to display the value of price1 in a text field below:
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">
Thank you for answering
All you need to do is set the value of the input to the value of the select, in a select.onchange event handler.
var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function() {
input.value = select.value;
}
Here is a link to a jsFiddle demo
This is the brute force way to look up the currently selected option, check its value and use its display text to update your input. Like Daniele suggested, if you have jquery at your disposal, this gets much, much easier. But if you can't use a JS framework for any reason, this should get you what you need.
<select name="cmbitems" id="cmbitems" onchange="updateTextField()">
...
</select>
<input type="text" ..... />
<script type="text/javascript">
function updateTextField()
{
var select = document.getElementById("cmbitems");
var option = select.options[select.selectedIndex];
if (option.id == "price1")
{
document.getElementById("txtprice").value = option.text;
}
}
</script>
$.on('change', '#cmbitems', function() {
$('#txtprice').val($('#cmbitems option:selected').val());
});
If you are using jquery just go with
$('select.foo option:selected').val(); // get the value from a dropdown select
UPDATE ( I forgot to inlcude the <input> population)
First, inlcude jquery in your html file.
In the <header> you include it:
<header>
<script type="text/javascript" src="YOUR_PATH_TO_LIBRARY/jquery-1.7.1-min.js"></script>
</header>
Then
<input type="text" name="txtprice" id="txtprice" onClick="javascript:$('select.foo option:selected').val();">

Categories

Resources