0

I want to get the value of Buttons I have created:

<div class="form-row">
  <div class="btn-group">
    <div class="col">
      <div class="form-group">
        <input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
      </div>
    </div>
  </div>
</div>

I use this JS to highlight the button if is pressed:

$(document).ready(function(){
    $(".btn-outline-primary").click(function(){
        $(this).button('toggle');
    });
});

Underneath those buttons there is a submit button, which I use to search a database. So how can I get the values of the buttons to use them for search (eg. "MR" value)?

3
  • what is $(this).button('toggle'); ? Commented May 16, 2018 at 12:46
  • Your question is very ambigious? <input button are not send to the server even if you give them a name i think. (on default form submit browser action) Commented May 16, 2018 at 12:48
  • @GeorgeBailey This is to toggle the button if it's pressed and vice versa. Commented May 16, 2018 at 12:56

5 Answers 5

1

"value" is an attribute on the button elements, so you can access it with .attr():

$(document).ready(function() {
  $(".btn-outline-primary").click(function() {
    console.log($(this).attr("value"))
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
  <div class="btn-group">
    <div class="col">
      <div class="form-group">
        <input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
      </div>
    </div>
  </div>
</div>

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

Comments

1

You can try this:

$(".btn-outline-primary").click(function(){
        console.log($(this).prop('value'));
    });

Comments

0

To get the value of a tag , you could always use the value method.

How :

document.getElementsByClassName('btn-outline-primary")[0].value;

This will get the value of the first element with class btn-outline-primary

If you wish to get the values of all elements :

var arr = document.getElementsByClassName('btn-outline-primary');
var array = []
arr.map(_=>array.push(_.value))

In the case you are using JQuery you will need to add

.attr('value')

to get the value

Comments

0

You could find all buttons with active class and get their value

Something like:

var values = [];
$('.btn-outline-primary.active').each(function(key, value){
 values.push($(this).val());
});

values array will have all your values of active buttons

Comments

0

To get a value of clicked button you can do this. Just use the value property of the button to get the value associated with the corresponding button.

const buttons = document.querySelectorAll('.btn-outline-primary');

[...buttons].forEach(item => {
  item.addEventListener('click', event => {
    console.log(item.value);
  });
});
<div class="form-row">
  <div class="btn-group">
    <div class="col">
      <div class="form-group">
        <input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
      </div>
    </div>
  </div>
</div>

And if you want to store the value for later use then you can simply assign it to some variable.

const buttons = document.querySelectorAll('.btn-outline-primary');
let clickedValue;

[...buttons].forEach(item => {
  item.addEventListener('click', event => {
    clickedValue = item.value;
  });
});

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.