CODEWITHSUNDEEP
jqueryappendeach
Laurence L
Laurence L

Reputation: 623

jQuery Append message to each label

When the check button is clicked a message is appended to the radio group checked radio button (correct or incorrect). I want the message to align with the selected radio button. At the moment both messages are applied to both checked radio buttons rather than the associated correct or incorrect.

How do I update this script so for correct check button correct message is applied and if incorrect the relevant message is applied?

Hopefully I am not being too confusing :-)

$(".quiz__check").on("click", function() {
  $("input:radio:checked").removeAttr("disabled");   
  if($("input:radio:checked").length > 0){
    $("input:radio:checked").addClass("mPos");;
    $("input:radio:checked").closest(".radio").find(".mPos + label").append( $('.quiz__control-feedback') );
  }
});

The HTML

<div id="accessContainer">
  <form class="quiz" id="a01" name="a01">
    <div class="quiz__preamble"></div>
    <ol class="assessment-list">
      <li>
        <span><strong>Question 1:</strong> What question is this?</span>
        <div></div>
        <div aria-label="When should you make adjustments to the program or environment?" class="quiz__control accessibleRadio" id="a01-01-q09" role="radiogroup">
          <p><input data-set="a01-01-q09" id="a01-q09-e01" name="a01-01-q09" type="radio" value="a01-01-q09"> <label for="a01-q09-e01">This is question 1</label></p>
          <p><input data-set="a01-01-q09" id="a01-q09-e02" name="a01-01-q09" type="radio" value="a01-01-q09"> <label for="a01-q09-e02">This is question 20</label></p>
        </div>
      </li>

      <li>
        <span><strong>Question 2:</strong> Is this question 2?</span>
        <div></div>
        <div aria-label="When should you teach children about diversity and difference?" class="quiz__control accessibleRadio" id="a01-01-q11" role="radiogroup">
          <p><input data-set="a01-01-q11" id="a01-q11-e01" name="a01-01-q11" type="radio" value="a01-01-q11"> <label for="a01-q11-e01">Yes</label></p>
          <p><input data-set="a01-01-q11" id="a01-q11-e02" name="a01-01-q11" type="radio" value="a01-01-q11"> <label for="a01-q11-e02">No</label></p>
        </div>
      </li>
    </ol>
    <div class="quiz__buttons screen-only">
      <button class="quiz__reset btn btn-default" title="Clear my answers" type="reset">Reset</button> <button class="quiz__check btn btn-primary" id="check_answers" title="Check my answers" type="button">Check</button>
    </div>
  </form>
</div>

Upvotes: 0

Views: 124

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

You want a "validation message" to appear on Check click.
And you want it aside the radios, on the right (so after the label).

I added a data attribute to all your HTML radio input.
Got to know wich is correct and not...

data-validation="1" // for good answer

data-validation="0" // for wrong answer

Some CSS for the message formatting:

.validation-hint{
  margin-left:1em;
  font-style:bold;
}
.correct{
  color:#44c744;
}
.incorrect{
  color:#F74444;
}

Then here is the code to make it appear:

$(".quiz__check").on("click", function() {
  var checked = $("input[type='radio']:checked");
  var correct = "<span class='validation-hint correct'>Correct!</span>";
  var incorrect = "<span class='validation-hint incorrect'>Incorrect!</span>";

  if(checked.length > 0){

    // Remove all validation hints, if any.
    $(".validation-hint").remove();

    // Show a validation message based on data-validation.
    checked.each(function(){
      if( $(this).data("validation")=="1" ){
        $(this).next("label").after(correct);
      }else{
        $(this).next("label").after(incorrect);
      }
    })
  }
});

// Reset button also remove the validation messages.
$("[type='reset']").on("click",function(){
  // Remove all validation hints
    $(".validation-hint").remove();
});

CodePen

Upvotes: 1

Related Questions