Получить значение типа ввода = "кнопка"

Question

Я хочу получить значение кнопок, которые я создал:

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

Я использую этот JS, чтобы выделить кнопку, если нажата:

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

Под этими кнопками есть кнопка отправки , которую я использую для поиска в базе данных. Так, как я могу получить значения кнопок, чтобы использовать их для поиска (например, значение "MR")?

Answer 1

Вы можете найти все кнопки с активным классом и получить их значение

Что-то вроде:

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

* В массиве значений 1005 * будут все ваши значения активных кнопок

Answer 2

Чтобы получить значение тега, вы всегда можете использовать метод value.

Как:

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

Получит значение первого элемента с классом btn-outline-primary

.

Если вы хотите получить значения всех элементов:

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

В случае, если вы используете JQuery, вам нужно будет добавить

.attr('value')

чтобы получить значение

Answer 3

Чтобы получить значение нажатой кнопки, вы можете сделать это. Просто используйте свойство value кнопки, чтобы получить value, связанный с соответствующей кнопкой.

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>

И если вы хотите сохранить значение для последующего использования, вы можете просто присвоить его некоторой переменной.

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

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

Answer 4

Вы можете попробовать это:

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

Answer 5

«значение» является атрибутом элементов кнопки, поэтому вы можете получить к нему доступ с помощью .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>