Monthly Archives: Aug 2018

Getting the value or text of an HTML attribute using jQuery

Grabbing attributes to use in your JavaScript is often handy.  HTML attributes can be used to send various options to your script or attributes used for multiple switches to control different elements of what you are doing.

You can use HTML attributes on their own, or grab them from specific elements with this.

If you are using a standalone element, such as:

<button class="btn btn-outline-success btn-sm buyButton" value="profile" customTitle="Profile Upgrade">BUY</button>

You can use a specific selector:

const itemTitle = $('.buyButton').attr('customTitle');

If you are using multiple selectors, then you can grab the values from the button you want, when using onClick, for example, in a similar way.

So if you have:

<div class="col-sm-2">
    <button class="btn btn-outline-success btn-sm buyButton" value="profile" customTitle="Profile Upgrade">BUY</button>
</div>
<div class="col-sm-2">
    <button class="btn btn-outline-success btn-sm buyButton" value="listing" customTitle="Listing Upgrade">BUY</button>
</div>
<div class="col-sm-2">
    <button class="btn btn-outline-success btn-sm buyButton" value="highlight" customTitle="Highlight Listing">BUY</button>
</div>

(I’ve made some of these up, and some of the bits are unnecessary, like the DIV’s, they are just in the project I’m working on)

So if you want to get the customTitle attribute to use in your logic somewhere, use:

$(".buyButton").on('click', function(e) {
    e.preventDefault();
    const customTitle = $(this).attr('customTitle');
})

 

Share this post:
read more

Get the value of selected radio buttons – jQuery

If you need to get the value of a selected radio button dynamically, to send for processing via an AJAX call for example, then the following is a great way to achieve this.

The general methodology is to give all of the radio options a generic class that can be used to trigger the onchange event. Then, grab the value of the radio button that has been selected and use it in your processing script.

In the below example, we use the “class” to define the group, the “name” to define what we are selecting, and the “value” to determine what is then sent to the processing script.

The radio buttons:

<div class="row">
  <div class="col-sm-6">
    Option 1
  </div>
  <div class="col-sm-6">
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option1" value="show" checked>Show
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option1" value="hide">Hide
      </label>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    Option 2
  </div>
  <div class="col-sm-6">
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option2" value="show" checked>Show
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option2" value="hide">Hide
      </label>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    Option 3
  </div>
  <div class="col-sm-6">
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option3" value="show" checked>Show
      </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
        <input type="radio" class="form-check-input viewChange" name="option3" value="hide">Hide
      </label>
    </div>
  </div>
</div>

There’s a lot of Bootstrap 4 formatting in there as well, as this was taken from one of my live projects.  I have also used the values “show” and “hide”, as these are project specific, but you could add any values you require in here.

Then some JavaScript to do the actual work:

$(".viewChange").on("change", function(e){

    e.preventDefault();

    const option1status = $("input[name='option1']:checked").val();
    const option2status = $("input[name='option2']:checked").val();
    const option3status = $("input[name='option3']:checked").val();

    /*
    Do something with your now created constants
    */

});

 

This will produce the outputs you need to then do processing as you require.

Share this post:
read more