0

OK, I have an issue with some code and I'm really not sure how to code the outcome that I want to achieve.

I'm working on a site using Laravel 5.2 and I'm having an issue with hiding and showing specific divs based on the status of a checkbox. These are in a @foreach loop but I'm fairly sure that the laravel/@foreach isn't the issue, it's my lack of jQuery experience.

So here's some code. 

 @foreach ($event->extras()->get() as $extra)
    <p>{{ $extra->name }}</p>
    <p>{{ $extra->cost }}</p>
    <p><input type="checkbox" name="extra-checkbox" id="extra-checkbox" value=""></p>
    <div id="extra-info">
         @if ($extra->infoRequired == "1")
             <input type="text" name="extra-info-text" class="form-control">
         @endif
    </div>
@endforeach

The issue I'm having is that the $extra variable ID's ($extra->id) in the loop could be very different so a for-loop in the javascript is out. Each checkbox needs to show/hide only the specific "extra-info" div it is associated with.

How do I modify the following code to make it work for each individual $extra independently? I've considered putting the $extra->id into the class or div id but I can't figure out how to then implement it in the javascript. 

$(document).ready(function() {
    $('#extra-checkbox').change(function() {
        if(this.checked)
            $('#extra-info').fadeIn('fast');
        else
            $('#extra-info').fadeOut('fast');

Edit I've added an id to the html as it's omission was my copying error. The issue I need to get my head around is that there will be multiple checkboxes (they're actually in a table, not <p>, but I was trying to make the code readable). Each checkbox is associated with an $extra and each $extra has it's own div that needs to be shown when the checkbox is checked.

Improve this question
6
  • What's the output of the HTML coming in? Commented Jan 31, 2016 at 12:33
  • Get the output HTML, and create a JsFiddle, that will be more convenient Commented Jan 31, 2016 at 12:36
  • You don't have a checkbox with extra-checkbox id. Your jQuery will never fire Commented Jan 31, 2016 at 12:37
  • A very simple way would be this one: wrap the whole foreach body in its own div element and make extra-info a class instead of an id. Then the checkbox handler can use this jquery expression to get the specific element: $(this).parent().children().filter('.extra-info') Commented Jan 31, 2016 at 12:39
  • It looks like in trying to simplify my code to get some help in figuring out how to do this dynamically I screwed up the copying of my code, sorry! There is an ID in the checkbox <input>. The main problem is that I have a varying number of checkboxes each with unpredictable ID numbers. Commented Jan 31, 2016 at 12:50

4 Answers 4

Reset to default
2

There are a few mistakes in your code.

  1. You cannot duplicate id values. You are doing it. Change it class.
  2. Don't put <input /> inside <p>, instead, wrap it inside <label>.
  3. Using $('#extra-checkbox') doesn't work, because it is name not id. Use $('[name="extra-checkbox"]').
  4. This can be done using CSS itself. See below.

See the working example here:

input[name="extra-checkbox"] + input[name="extra-info-text"] {display: none;}
input[name="extra-checkbox"]:checked + input[name="extra-info-text"] {display: inline;}
<div class="entry">
  <p>Name 1</p>
  <p>Cost 1</p>
  <div class="form-stuff">
    <input type="checkbox" name="extra-checkbox" value="">
    <input type="text" name="extra-info-text" class="form-control">
  </div>
</div>
<div class="entry">
  <p>Name 2</p>
  <p>Cost 2</p>
  <div class="form-stuff">
    <input type="checkbox" name="extra-checkbox" value="">
    <input type="text" name="extra-info-text" class="form-control">
  </div>
</div>
<div class="entry">
  <p>Name 3</p>
  <p>Cost 3</p>
  <div class="form-stuff">
    <input type="checkbox" name="extra-checkbox" value="">
    <input type="text" name="extra-info-text" class="form-control">
  </div>
</div>
<div class="entry">
  <p>Name 4</p>
  <p>Cost 4</p>
  <div class="form-stuff">
    <input type="checkbox" name="extra-checkbox" value="">
    <input type="text" name="extra-info-text" class="form-control">
  </div>
</div>

You don't need jQuery or JavaScript for this.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You don't have input with id extra-checkbox, try this:

$('input[name="extra-checkbox"]').change(function() {
    if(this.checked) {
        $('#extra-info').fadeIn('fast');
    } else {
        $('#extra-info').fadeOut('fast');
    }
});

or use a class since you should not have more then one element with same id.

Improve this answer

1 Comment

Man, see the comment for the answer below. :/
0

Use pusedo selctors to get if checkbox is checked or not

$(document).ready(function() {
    $('#extra-checkbox').change(function() {
        if($(this).is(":checked"){  //Return true/false 
            $('#extra-info').fadeIn('fast');
         }
        else{
            $('#extra-info').fadeOut('fast'); 
    }
})

EDIT AFTER COMMENTS

You can use which is prefix selector, which mean if any id which start with extra_checkbox will respond to this snippet.

$('div[id^="extra-checkbox"]')

For more information visit HERE

NOTE: id need to be unique as per W3C standard

Improve this answer

4 Comments

I agree with the unique ID. I can create one with id="extra-checkbox-{{$extra->id}}" but then how do I get the javascript to respond to this when the $extra->id can't be predicted?
Thank you!! It's exactly what I was after. Sometimes it's difficult to search for something you know should exist but you don't know what it's called or how to find it.
@bioinforach jCubic actually gave the same solution an hour before this solution was posted, and also that solution is efficient than this, why did you reply to this and didn't look at the other one?
@user2181397 I believe you know about StackOverflow, having so much rep, the OP cannot vote you up!
0

You are adding the same id to multiple divs, this is bad. You need to add a unique id or a unique data attribute to every element and reference it in you change event.

Also:

$('#extra-checkbox')

should be this:

$('*[name="extra-checkbox"]')

This should work:

@foreach ($event->extras()->get() as $extra)
        <p>{{ $extra->name }}</p>
        <p>{{ $extra->cost }}</p>
        <p><input type="checkbox" name="extra-checkbox" value="{{ $extra->name }}"></p>
        <div class="extra-info" data-name="{{ $extra->name }}">
             @if ($extra->infoRequired == "1")
                 <input type="text" name="extra-info-text" class="form-control">
             @endif
        </div>
@endforeach

then

$(document).ready(function() {
   $('*[name="extra-checkbox"]').change(function() {
        if($(this).prop('checked'))
            $('.extra-info[data-name="'+$(this).data('name')+'"]').fadeIn('fast');
        else
            $('.extra-info[data-name="'+$(this).data('name')+'"]').fadeOut('fast');
Improve this answer

1 Comment

Hi, this is exactly what I was thinking, I just don't know how to do it...hence the post. Any pointers?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.