on clicking the button how to show it has been selected and get the id of that button on form submit

user_7339820 0
Viewed 1596

I want to create a list of buttons as a menu and the user must be able to select any one button among them. On selecting that button it must be visible that the button has been selected and then there will be another form submit button. On submitting form I want the id of the selected button.

I am confused about what I have to use to have this functionality.

I don't want a dropdown menu. I want the list of buttons from which the only one can be selected.

Since I cant reveal my idea I am showing you the sample code type:

<form action="formSubmit.php">

    <input type="button" id="opt1" value="Option 1"><br>
    <input type="button" id="opt2" value="Option 2"><br>
    <input type="button" id="opt3" value="Option 3"><br>
    <input type="button" id="opt4" value="Option 4"><br>
    <input type="button" id="opt5" value="Option 5"><br><br><br>

    <button type="Submit">Submit</button>
</form>

Thanks in advance...

css html jquery javascript
3 Answers

Try like this.

$(".btn").click(function(){

  var val = $(this).val();
  $('.btn').removeClass('selected');
  $(this).addClass('selected');
  $('.selectedVal').val(val);

});
.selected{
  color :red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="formSubmit.php">

    <input type="button" class="btn" id="opt1" value="Option 1"><br>
    <input type="button" class="btn" id="opt2" value="Option 2"><br>
    <input type="button" class="btn" id="opt3" value="Option 3"><br>
    <input type="button" class="btn" id="opt4" value="Option 4"><br>
    <input type="button" class="btn" id="opt5" value="Option 5"><br><br><br>
    
    
    <input type="hidden" class="selectedVal" name="selectedVal"/>
    <button type="Submit">Submit</button>
</form>

after submitting your value will be in selectedVal you can get it like $_REQUEST['selectedVal'].

user_43542010

There are many ways to achieve this. One method is to give the id of the button as data-id attribute for each button. And write one on click listener for each button. Something like below.

$('button').on('click', function(){
  // you can access button properties using this keyword here. 
})

There you have the id and save to some variable so that you can have this variable while submitting the form.

user_20036300

Try this. Just got the id of the clicked button through this 

var selectedButtonId = "";

$('.button').click(function() {

  selectedButtonId = this.id;
  alert(selectedButtonId);

});


$("#submitButton").click(function() {
  alert("you have selected" + selectedButtonId)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="opt1" value="Option 1" class="button"><br>
<input type="button" id="opt2" value="Option 2" class="button"><br>
<input type="button" id="opt3" value="Option 3" class="button"><br>
<input type="button" id="opt4" value="Option 4" class="button"><br>
<input type="button" id="opt5" value="Option 5" class="button"><br><br><br>
<button type="Submit" id="submitButton">Submit</button>

user_21268420
Related