how to write js function to get input value when click button

Question

i have several class="items" that include input and button, and i want to click button and identify whether siblings input has value or not.

 function onClick(elem) { var $this = elem.tagName; var val = $this.siblings('input[type=text]').val(); if (val == '') { console.log('no input'); } else { console.log(val); } }

 <div class="items"> <input type="" name="" id="keywordSearch1" placeholder=""> <button onclick="onClick()">button1</button> </div> <div class="items"> <input type="" name="" id="keywordSearch2" placeholder=""> <button onclick="onClick()">button2</button> </div> <div class="items"> <input type="" name="" id="keywordSearch3" placeholder=""> <button onclick="onClick()">button3</button> </div>

Answer 1

Pass object this to the function and get the previous element with previousElementSibling from that element.

Please Note: val() is jQuery method, the equivalent JavaScript property is value

 function onClick($this) { var val = $this.previousElementSibling.value; if(val == ''){ console.log('no input'); }else{ console.log(val); } }

 <div class="items"> <input type="" name="" id="keywordSearch1" placeholder=""> <button onclick="onClick(this)">Search 1</button> </div> <div class="items"> <input type="" name="" id="keywordSearch2" placeholder=""> <button onclick="onClick(this)">Search 3</button> </div> <div class="items"> <input type="" name="" id="keywordSearch3" placeholder=""> <button onclick="onClick(this)">Search 3</button> </div>

Answer 2

You can pass the id of input tag from onClick function.

function onClick(elem) {
  var $this = $(elem);
  var val = $this.val();
  if (val == '') {
    console.log('no input');
  } else {
    console.log(val);
  }
}

<div class="items">
  <input type="" name="" id="keywordSearch1" placeholder="">
  <button onclick="onClick('#keywordSearch1')">button1</button>
</div>
<div class="items">
  <input type="" name="" id="keywordSearch2" placeholder="">
  <button onclick="onClick('#keywordSearch2')">button2</button>
</div>
<div class="items">
  <input type="" name="" id="keywordSearch3" placeholder="">
  <button onclick="onClick('#keywordSearch3')">button3</button>
</div>

Answer 3

You have two problems:

First of all, your onClick function has a elem parameter, but you never pass it in. To do that, you need to use onclick="onClick(this)" in the HTML, that way when the onClick function is called, you would get the current element as the argument.

 function onClick(elem) { var $this = elem.tagName; console.log(elem); }

 <div class="items"> <input type="" name="" id="keywordSearch1" placeholder=""> <button onclick="onClick(this)">button1</button> </div>

Second problem is that you are taking elem.tagName which would be a string and treating it as if it's a jQuery object.

You should either include jQuery and use that as appropriate. You also need to specify type="text" in order to use the input[type=text] selector:

 function onClick(elem) { var $this = $(elem); //< -- wrap the element in a jQuery wrapper var val = $this.siblings('input[type=text]').val(); if (val == '') { console.log('no input'); } else { console.log(val); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="items"> <input type="text" name="" id="keywordSearch1" placeholder=""> <button onclick="onClick(this)">button1</button> </div>

Alternatively, you can do the same without jQuery using pure JavaScript with minor changes to get the same effect:

 function onClick(elem) { //get the parent var parent = elem.parentNode; var val = parent .querySelector('input[type=text]')//search the parent's children to simulate sibling searching .value; //the non-jQuery way to get the value if (val == '') { console.log('no input'); } else { console.log(val); } }

 <div class="items"> <input type="text" name="" id="keywordSearch1" placeholder=""> <button onclick="onClick(this)">button1</button> </div>

Finally, having an in-line onclick specified in HTML is generally a bad idea. The preferred way is to attach event listeners via JS. In jQuery, you can do that using .on :

 function onClick(elem) { var $this = $(elem); var val = $this.siblings('input[type=text]').val(); if (val == '') { console.log('no input'); } else { console.log(val); } } //attach the click listerner $('button').on('click', function() { onClick(this); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="items"> <input type="text" name="" id="keywordSearch1" placeholder=""> <button>button1</button> </div> <div class="items"> <input type="text" name="" id="keywordSearch2" placeholder=""> <button>button2</button> </div> <div class="items"> <input type="text" name="" id="keywordSearch3" placeholder=""> <button>button3</button> </div>

Or in pure JavaScript:

 function onClick(elem) { var parent = elem.parentNode; var val = parent .querySelector('input[type=text]') .value; if (val == '') { console.log('no input'); } else { console.log(val); } } //attach the click listerner to each element var buttons = document.getElementsByTagName('button'); for(var i = 0; i < buttons.length; i++) { var button = buttons[i]; button.addEventListener("click", function() { onClick(this); }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="items"> <input type="text" name="" id="keywordSearch1" placeholder=""> <button>button1</button> </div> <div class="items"> <input type="text" name="" id="keywordSearch2" placeholder=""> <button>button2</button> </div> <div class="items"> <input type="text" name="" id="keywordSearch3" placeholder=""> <button>button3</button> </div>

Do note, that if you are attaching the event listener directly, then you can even omit passing in this as an argument:

• in jQuery : $("button").on("click", onClick)
• in plain JS, it's a similar situation, you would do button.addEventListener("click", onClick)

Once you do that, you have more options at your disposal:

• a function executed as an event listener will have the this context set as the element that it was initiated from. So, you can directly bind the listener
  • in jQuery: var $this = $(this) .
  • in plain JS: var parent = this.parentNode
• the event listener will also be passed in the event that the listener responded to. From there you can find the original target that was clicked:

function onClick(event) {
  var elem = event.target;
}

Answer 4

You need to make these changes to get the element values.

1. Use previous Element Sibling, as the element is before the button.
2. Provide the current context in the onclick method onClick(this)
3. You are not using the jQuery so the .siblings won't work, as this is available in the jQuery Lib

 function onClick(elem) { var val = elem.previousElementSibling.value;; //var val = $this.siblings('input[type=text]').val(); if (val == '') { console.log('no input'); } else { console.log(val); } }

 <div class="items"> <input type="" name="" id="keywordSearch1" placeholder=""> <button onclick="onClick(this)">button1</button> </div> <div class="items"> <input type="" name="" id="keywordSearch2" placeholder=""> <button onclick="onClick(this)">button2</button> </div> <div class="items"> <input type="" name="" id="keywordSearch3" placeholder=""> <button onclick="onClick(this)">button3</button> </div>

Answer 5

First of all, I would advise your to use event-delegation instead manually add onClick to each button. And also You can easily use jQuery#prev function to determine direct sibling.

 $(document).on('click', '.items>button', (e) => { const siblingInputValue = $(e.target).prev().val(); debugger; console.log('Sibling input value: ' + siblingInputValue); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="items"> <input type="" name="" id="keywordSearch1" placeholder=""> <button>btn 1</button> </div> <div class="items"> <input type="" name="" id="keywordSearch2" placeholder=""> <button>btn 2</button> </div> <div class="items"> <input type="" name="" id="keywordSearch3" placeholder=""> <button>btn 3</button> </div>