How do I target a button using vanilla JS or Jquery to see whether the user has selected it or not?

Question

This is the html code for the buttons. The user has 3 options and can only choose one.

        <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal">
              <legend>Camera Type:</legend>
              <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button>
              <button class="ui-shadow ui-button" id="btnPointAndShoot">Point & Shoot<span class="ui-icon ui-icon-home"></span></button>
              <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button>
          </fieldset>
        </div>

I thought it should be something like this:

//Check Camara Type.
    if (document.getElementById("btnDSLR").checked)
    {
      camara += "DSRL";
    }

I don't know how to retrieve which option has the user selected.

Thanks!

Answer 1

Like this.

jQuery :

 $(".ui-button").on("click",function(e) { const $tgt = $(this) console.log($tgt.attr("id"),$tgt.text()); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Camera Type:</legend> <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnPointAndShoot">Point & Shoot<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button> </fieldset> <span id="which"></span> </div>

Plain/Vanilla JS needs delegation

 document.querySelector("fieldset[data-role=controlgroup]").addEventListener("click",function(e) { const tgt = e.target; if (tgt.parentNode.classList.contains("ui-button")) tgt = tgt.parentNode; // clicked the span if (tgt.classList.contains("ui-button")) { console.log(tgt.id,tgt.textContent); } })

 <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Camera Type:</legend> <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnPointAndShoot">Point & Shoot<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button> </fieldset> <span id="which"></span> </div>

Answer 2

You can simply get text of button as below using jquery

 $('.ui-button').click(function() { console.log( $(this).text() ); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Camera Type:</legend> <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnPointAndShoot">Point & Shoot<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button> </fieldset> </div>