CODEWITHSUNDEEP
javascriptjquery
Prady
Prady

Reputation: 11300

How to find an element within another element without an id

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


            })
        })

    })
})

Upvotes: 1

Views: 135

Answers (6)

OceanRages
OceanRages

Reputation: 119

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

Upvotes: 1

Parag Bhayani
Parag Bhayani

Reputation: 3330

You just need to use some selectors for that like,

  1. To get all inputs -> $("input")
  2. To get all inputs with type attribute -> $("input[type]")
  3. To get all hidden inputs -> $("input[type=hidden]")
  4. To get all inputs with type ends with 'den' -> $("input[type$=den]")
  5. To get all inputs with type starts with 'hid' -> $("input[type^=hid]")
  6. 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...

Upvotes: 0

Brino
Brino

Reputation: 2502

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

Upvotes: 2

Satpal
Satpal

Reputation: 133403

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

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 2

CodingIntrigue
CodingIntrigue

Reputation: 78525

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

Upvotes: 2

Related Questions