HTML Form Construction

Question

Предположим, у меня есть 4 значка для (горизонтальная гистограмма, вертикальная гистограмма, линейная диаграмма, круговая диаграмма) в форме.

Во время отправки формы, я хотел бы знать, какой значок имеет предпочтительный пользователь.

В настоящее время я использую, 5 изображений src размещены в одной строке.

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

  <div class="component"> 
       <img src = "/images/1.png" class="cr_chart" alt="V - Bar Chart" id = "vertical_bar"/> 
       <img src = "/images/2.png" class="cr_chart" alt="H -Bar Chart" id = "horizontal_bar"/> 
       <img src = "/images/3.png" class="cr_chart" alt="Line chart" id = "line_chart" /> 
       <img src = "/images/4.png" class="cr_chart" alt="Pie chart" id = "pie_chart"/> 
      </div> 

Должен ли я использовать скрытую радио-кнопку здесь? Если да, то пожалуйста, помогите мне, чтобы получить выбранный тип диаграммы с помощью JQuery

Answer 1

Вы можете использовать JQuery для этого:

HTML:

<div class="component"> 
<form> 
<input type="radio" name="radioButton" value="Vertical" /> 
<input type="radio" name="radioButton" value="Horizontal" /> 
<input type="radio" name="radioButton" value="Line" /> 
<input type="radio" name="radioButton" value="Pie" /> 
    <input type="button" id="submit" value="submit" /> 
</form> 
</div> 

JQuery:

$('#submit').on('click', function(){ 
alert($('input[name="radioButton"]:checked').val()); 
}); 

здесь jsFiddle