0

There I have three buttons and when I click on one I want the specific value of that button

here's my code

jQuery(':button').click(function () {
          var checkBtn = document.getElementById("checkBtn");
          console.log(checkBtn.value);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i></button>
Random buddy
  • 19
  • 4

4 Answers4

2

$(this).val() is what you are looking for. Your code is only logging the value for a specific (checkBtn) button when clicked on any button.

This is the way to get the value of clicked button

$('button').click(function () {
          
          console.log($(this).val());
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i></button>
Muhammad Usman
  • 10,039
  • 22
  • 39
1

Your code always looks for the button with the unique id of checkBtn. It is invalid to have multiple elements with the same id (it defeats the purpose of id) and so when jQuery goes looking for an element based on its id, it stops after finding the first one (because there shouldn't be any other matches), so you always get the same answer.

Instead, just use the keyword this (which is dynamic) to get a reference to the object that the event handler is currently running on:

$(':button').click(function () {
 console.log(this.value);    // Pure JavaScript way
 console.log($(this).val()); // jQuery way
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn1' value='apple'><i class='fa fa-check'></i></button>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn2' value='linux'><i class='fa fa-check'></i></button>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn3' value='windows'><i class='fa fa-check'></i></button>

Here's another post of mine that discusses this and how it gets dynamically bound to various objects.

Now, I would argue that you should set up your HTML differently than you have it now because, semantically, submit buttons serve only to facilitate the submission of the other form data, not to convey form data themselves. Also, having multiple submit buttons can lead to accidental form submissions. So, for a cleaner and clearer UX, instead of 3 submit buttons that each carry a value to be submitted, I would create 3 radio buttons and have one submit button.

$('button').click(function () {
 // Now, instead of "this", we just use a selector that finds the checked radio button
 console.log(document.querySelector("input[name='checkBtn']:checked").value);  // Pure JavaScript way
 console.log($("input[name='checkBtn']:checked").val());                       // jQuery way
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type='radio' class='checkBtn' name='checkBtn' value='apple'><i class='fa fa-check'></i>Apple
</label>
<label>
  <input type='radio' class='checkBtn' name='checkBtn' value='linux'><i class='fa fa-check'></i>Linux
</label>
<label>
  <input type='radio' class='checkBtn' name='checkBtn' value='windows'><i class='fa fa-check'></i>Windows
</label>
<button type='submit'>Submit</button>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
1

You can use this or e.target to reference the button clicked. As it stands you are selecting the first button with id "checkBtn". As a sidenote it's not a good practice to have several elements with the same id on a page.

jQuery(':button').click(function(e) {
          console.log(e.target.value);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' value='apple'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn' value='linux'><i class='fa fa-check'></i></button>


<button type='submit' class='checkBtn' name='checkBtn'  value='windows'><i class='fa fa-check'></i></button>
ivanibash
  • 1,461
  • 2
  • 14
  • 37
1

USe this.value where this is the current context

var valArray = [];
$('button').click(function() {
  if (valArray.indexOf(this.value) === -1) {
    valArray.push(this.value);
    console.log(valArray);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='apple'><i class='fa fa-check'></i>apple</button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='linux'><i class='fa fa-check'></i>linux</button>


<button type='submit' class='checkBtn' name='checkBtn' id='checkBtn' value='windows'><i class='fa fa-check'></i>windows</button>
brk
  • 48,835
  • 10
  • 56
  • 78
  • hello @brk thanks for the code it now works but one more thing I want to I store the values into a array so If they click apple then apple will go into that array and when I click windows then windows will join that same array – Random buddy Apr 14 '18 at 03:15
  • would it be possible to make a button that will console log that array – Random buddy Apr 14 '18 at 03:39