CODEWITHSUNDEEP
javascriptjqueryhtmlradio-buttonconcatenation
Whitney
Whitney

Reputation: 1

Concatenate variable into radio button selector

I am trying to find the value of a checked radio button. I am concatenating the variable 'flagName' into the input selector, and it keeps returning undefined. Here is my JQuery:

function filterProjects (searchInput) {

var filter = $(searchInput).val(), count = 0;
var $projects = $(".ProjectDisplay");
$projects.show();
$projects.each(function () {
  var $currentProject = $(this);
  var projectFlags = $(this).data();

  for (var flagName in projectFlags) {
    var flagValue = projectFlags[flagName];
    var checkedInputValue = $("input[name='" + flagName + "']:checked", "#flagSearchForm").val();

    if ((checkedInputValue == "yes" && flagValue == "0") || (checkedInputValue == "no" && flagValue == "1")) {
      $currentProject.hide();
    }
  }

  if ($(this).find(".projectName").text().search(new RegExp(filter, "i")) < 0) {
    $(this).hide();
  }
});

}

I am trying to find the value of checkedInputValue. flagName and flagValue both return what they are supposed to. In the HTML, I have a form that loops through a PHP array to create multiple fieldsets that have three radio buttons each. Here is part of my HTML where the form is:

<form id="flagSearchForm" name="flagForm">
<div class="grid-unit grid-unit-9-14">
  <h4>Search by Flag Value</h4>
  <div class="flagSearch">
    <div class="wrapper grids">
    <?php 
    $flag_names = array("hasBib", "hasChoice", "hasEbooks", "hasFrbr", "hasLcd","hasLtp", "hasNlm", "hasPeers", "includeDewey", "includeGovtDocs", "includeNonBooks", "includeOpacUrl", "includeProtection", "includeScores"); ?>

    <?php foreach ($flag_names as $i=>$flag_name):
    ?>
    <div class="flagfields">
      <div class="grid-unit grid-unit-3-14">
        <fieldset>
          <span class="flagName"><?php echo $flag_name; ?></span>
          <input type="button" value="N/A" class="tri-state ignore" id="<?php echo $flag_name; ?>"/>
          <input type="radio" name="<?php echo $flag_name; ?>" value="ignore" id="<?php echo $flag_name; ?>-ignore" class="radio-button" checked><label for="<?php echo $flag_name; ?>-ignore">Ignore</label>
          <input type="radio" name="<?php echo $flag_name; ?>" value="yes" id="<?php echo $flag_name; ?>-yes" class="radio-button"><label for="<?php echo $flag_name; ?>-yes">Yes</label>
          <input type="radio" name="<?php echo $flag_name; ?>" value="no" id="<?php echo $flag_name; ?>-no" class="radio-button"><label for="<?php echo $flag_name; ?>-no">No</label>
        </fieldset>
      </div>
    </div>
    <?php 
    endforeach;
    ?>
    </div>
  </div>
<input type="submit" value="submit" class="flagSearchSubmit">
</div>

Is my syntax for checkedInputValue wrong?

Upvotes: 0

Views: 1007

Answers (1)

Chizzle
Chizzle

Reputation: 1715

I'm not sure what your filter/regex was so that will need to be completed. This logs all the selected inputs.

Here is a fiddle: https://jsfiddle.net/c4qbywrt/7/

function filterProjects(searchInput) {

    $('input:radio').each(function () {
        if ($(this).is(':checked')) {

            var $currentProject = $(this);
            var checkedInputValue = $(this).val();
            var flagValue = '0'; // Not sure what is setting this
            if ((checkedInputValue == "yes" && flagValue == "0") || (checkedInputValue == "no" && flagValue == "1")) {
                $currentProject.hide();
            }
            var filter = '';
            if  ($(this).find(".projectName").text().search(new RegExp(filter, "i")) < 0) {
                $(this).hide();
            }
        }
    });
}

$("#searchProjects").keyup(function () {
    filterProjects($(this));
});
$("#flagSearchForm").submit(function (event) {
    event.preventDefault();
    filterProjects($("#searchProjects"));
});

Upvotes: 0

Related Questions