#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    364
    Rep Power
    12

    Get aria-checked radio value


    I'm new to working with aria controls and I'm trying to determine which radio button is clicked.

    html:
    Code:
    <div>
    <div id="inquiry-type-price-radio-control" class="radio-control control selected" data-group="inquiry-type">
     <div class="radio" aria-controls="inquiry-type">
      <input type="radio" aria-checked="true" value="price" name="inquiry-type">
     </div>
    <label for="inquiry-type">Pricing</label>
    </div>
    <div id="inquiry-type-general-radio-control" class="radio-control control" data-group="inquiry-type">
     <div class="radio" aria-controls="inquiry-type">
      <input type="radio" aria-checked="false" value="general" name="inquiry-type">
     </div>
    <label for="inquiry-type"> Inquiry </label>
    </div>
    </div>
    I've tried various options and this is where I'm currently at:
    javascript Code:
    var inquiryTypeRadioControls = $("div.radio-control[data-group='inquiry-type']");
     
    $(inquiryTypeRadioControls).click(function(){
     if( $(inquiryTypeRadioControls).find("input").prop("value") == "general" ) {
     alert("general option clicked");					
     }
    });


    How do I find if [ input type="radio" aria-checked="false" value="price" ] or [ input type="radio" aria-checked="false" value="general" name="inquiry-type" ] has been clicked?

    Last edited by PHPme; August 30th, 2013 at 10:28 PM.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    It looks like your just over complicating it; which can happen sometimes; try this instead of what you currently have:
    Code:
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $("document").ready(function(){
    
    var inquiryTypeRadioControls = $(".radio-control[data-group='inquiry-type'] input[type='radio']");
    
    $(inquiryTypeRadioControls).click(function(){
      if($(this).val() == "general") {
       alert("general option clicked");					
      }
     });
    
    });
    </script>
    
    <div>
    <div id="inquiry-type-price-radio-control" class="radio-control control selected" data-group="inquiry-type">
     <div class="radio" aria-controls="inquiry-type">
      <input type="radio" aria-checked="true" value="price" name="inquiry-type">
     </div>
    <label for="inquiry-type">Pricing</label>
    </div>
    <div id="inquiry-type-general-radio-control" class="radio-control control" data-group="inquiry-type">
     <div class="radio" aria-controls="inquiry-type">
      <input type="radio" aria-checked="false" value="general" name="inquiry-type">
     </div>
    <label for="inquiry-type"> Inquiry </label>
    </div>
    </div>
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    364
    Rep Power
    12
    Originally Posted by web_loone08
    It looks like your just over complicating it; which can happen sometimes; try this instead of what you currently have:
    That code does not trigger the alert box.

    I also realised that when an option is selected, this:
    Code:
    <div id="inquiry-type-amrp-radio-control" class="radio-control control" data-group="inquiry-type">
    changes to this:
    Code:
    <div id="inquiry-type-general-radio-control" class="radio-control control selected" data-group="inquiry-type">
    But aria-checked stays at their default values. I guess I need to determine which div has 'selected' and then set the aria-checked and then continue?

    How can I determine which div is selected?

    --------------------------------------------------------

    Got it!!

    Code:
    $(inquiryTypeRadioControls ).each(function( index ) {
     if ($(this).hasClass("selected")) {
      if( $(this).find("input").prop("value") == "price") {
      alert("here = " + $(this).find("input").prop("value"));
      }
     }
    }
    But if there is more elegant/efficient way of doing it, I'm open to suggestions!
    Last edited by PHPme; August 31st, 2013 at 10:26 AM.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    Originally Posted by PHPme
    That code does not trigger the alert box.
    It does trigger the alert; as I tested it before I posted it.
    Originally Posted by PHPme
    But if there is more elegant/efficient way of doing it, I'm open to suggestions!
    As long as it works the way you want it to; that's what matters; glad you got it figured out.
    Last edited by web_loone08; August 31st, 2013 at 11:57 AM.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    364
    Rep Power
    12
    Originally Posted by web_loone08
    It does trigger the alert; as I tested it before I posted it.
    I may have done something wrong bu thanks for your help
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    364
    Rep Power
    12
    To expand on the above I'm stuck at this point. If price option is selected I need to set all controls in the pricing-area to 'required'. Else remove 'required', if it is set.

    Code:
    <div>
    <div id="inquiry-type-price-radio-control" class="radio-control control selected" data-group="inquiry-type">
     <div class="radio" aria-controls="inquiry-type">
      <input type="radio" aria-checked="true" value="price" name="inquiry-type">
     </div>
    <label for="inquiry-type">Pricing</label>
    </div>
    <div id="inquiry-type-general-radio-control" class="radio-control control" data-group="inquiry-type">
     <div class="radio" aria-controls="inquiry-type">
      <input type="radio" aria-checked="false" value="general" name="inquiry-type">
     </div>
    <label for="inquiry-type"> Inquiry </label>
    </div>
    </div>
    
    <div class="pricing-area">
    <div class="form-row pricing">
    
    <div id="number-of-employees-select-control" class="select-control control">
    <span class="hide-select" aria-hidden="">
    <select id="number-of-employees" class="input" name="number-of-employees">
    <option class="placeholder" value="__ALL__">Select Number Of Employees</option>
    <option value="1 - 25">1 - 25</option>
    <option value="25 - 100">25 - 100</option>
    <option value="100 - 250">100 - 250</option>
    <option value="250+">250+</option>
    </select>
    </span>
    <label for="number-of-employees"> NUMBER OF EMPLOYEES: </label>
    <div class="select" data-default="Select Number Of Employees" aria-controls="number-of-employees">
    <div class="input-holder placeholder" role="button">Select Number Of Employees</div>
    <div class="select-dropdown">
    <div class="option placeholder" role="button" data-value="__ALL__">Select Number Of Employees</div>
    <div class="option" role="button" data-value="1 - 25">1 - 25</div>
    <div class="option" role="button" data-value="25 - 100">25 - 100</div>
    <div class="option" role="button" data-value="100 - 250">100 - 250</div>
    <div class="option" role="button" data-value="250+">250+</div>
    </div>
    </div>
    </div>
    </div>
    
    <div class="form-row pricing">
    <div id="company_website-text-control" class="text-control control required">
    <label for="company_website"> YOUR COMPANY'S WEBSITE* </label>
    <div class="text">
    <input class="input input-holder placeholder" type="text" aria-required="" value="www.company.com" maxlength="60" name="company_website">
    </div>
    </div>
    
    </div>
    </div>
    In the above, when the price option is selected, the 'number of employees' select control and the 'company website' text control contained in the 'pricing-area' div need to be set to 'required' or removed if the general option is subsequently selected. There are other select and text controls outside the the 'pricing-area' div whose statuses needs to remain unchanged.
    Last edited by PHPme; August 31st, 2013 at 09:27 PM.
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    You need to use the .attr() API; to add the "required" attribute and you need to use the .removeAttr() API, to remove the "required" attribute.

IMN logo majestic logo threadwatch logo seochat tools logo