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>

$this = elem.tagName will make a variable that is a string. $this.siblings seems to be trying to treat it as a jQuery object. — VLAZ
– VLAZ, Commented Jul 3, 2019 at 7:12

Mamun · Accepted Answer · 2019-07-03 07:26:24Z

2

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>

edited Jul 3, 2019 at 7:26

answered Jul 3, 2019 at 7:17

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Laxmikant Dange · Accepted Answer · 2019-07-03 07:26:42Z

1

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>

answered Jul 3, 2019 at 7:26

Laxmikant Dange

7,7386 gold badges43 silver badges67 bronze badges

1 Comment

VLAZ Over a year ago

Ugh, why pass the ID of the element? If you change the ID, you now have to change two pieces of code to ensure it still works. Also, you would be clicking on a button and initiating a seach on the entire page to find out what you clicked on. There are at least three different ways to directly get the element that was clicked on, without having to look it up in any way.

VLAZ · Accepted Answer · 2019-12-18 15:23:31Z

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

dganenco · Accepted Answer · 2019-07-03 07:26:43Z

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>

piet.t · Accepted Answer · 2019-07-15 09:15:25Z

0

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

Use previous Element Sibling, as the element is before the button.
Provide the current context in the onclick method onClick(this)
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>

edited Jul 15, 2019 at 9:15

piet.t

11.9k21 gold badges45 silver badges56 bronze badges

answered Jul 3, 2019 at 7:22

Rohit.007

3,5123 gold badges23 silver badges33 bronze badges

1 Comment

Rohit.007 Over a year ago

No, I have posted my own. It took me long due to the additional text I was writing. Otherwise, I could have posted it before you

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related