How to get the value of a input fields by. name using parent element id in jQuery?-CodePudding

I have to enable some place holder text on the textfield. Example of the code set is below.

<div id="shipping">
  <input type="text" id="dynamic_id_2" name="telephone">
  <input type="text" id="dynamic_id_3" name="fax">
</div>
<div id="billing">
  <input type="text" id="dynamic_id" name="telephone">
  <input type="text" id="dynamic_id_1" name="fax">
</div>

I am using querySelector to access this elements.

var input = document.querySelector('input[name="telephone"]');

I want to access both telephone filed to update the placeholder. Whenever i am access by name i can access only the first div input element only. I want to access the input element using the parent div id.

Kindly notice input text fields ID is always dynamic and i can access only by the name

How can i do this?

CodePudding user response：

Since you have a fixed ID for the container, you an sue querySelector to select the container and then the name attribute such as document.querySelector('#shipping [name="telephone"]'):

let tel = document.querySelector('#shipping [name="telephone"]');
let fax = document.querySelector('#shipping [name="fax"]');


// just for demo purpose
tel.value = '666666';
fax.value = '123456';

<div id="shipping">
  <input type="text" id="dynamic_id_2" name="telephone">
  <input type="text" id="dynamic_id_3" name="fax">
</div>
<div id="billing">
  <input type="text" id="dynamic_id" name="telephone">
  <input type="text" id="dynamic_id_1" name="fax">
</div>