Databases
StackOverflow2013
Postsdbo
POjQuery checkbox interatction in PHP-generated inputs
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery checkbox interatction in PHP-generated inputs
    primarykey
    data
    text
    <p>So I have a series of 8 input groups in a form, generated in PHP like this (apologies, there's going to be a lot of code here):</p> <pre><code> &lt;div class="image-row"&gt; &lt;?php for ($i=1; $i&lt;=8; $i++) { ?&gt; &lt;div class="col-sm-1 col-sm-offset-2"&gt; &lt;a class="fancybox btn btn-primary imgform &lt;?php if ($i &lt;= 3) echo "reqd"; ?&gt;" id="img&lt;? echo $i; ?&gt;" href="#image-form"&gt;Image &lt;?php echo $i; ?&gt;&lt;/a&gt; &lt;div id="image-form" style="display:none;"&gt; &lt;div class="file-input-wrapper btn btn-primary col-sm-4"&gt; &lt;input class="sample_file" type="file" name="files[]" required="required"&gt;Choose file&lt;/input&gt; &lt;/div&gt; &lt;div style="clear: both;"&gt;&lt;/div&gt; &lt;div class="row form-group"&gt; &lt;label class="control-label col-sm-3 text-right"&gt;Title&lt;/label&gt; &lt;div class="col-sm-8"&gt; &lt;input class="form-control sample_title" type="text" name="filename[]"&gt;Sample 1&lt;/input&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row form-group"&gt; &lt;label class="control-label col-sm-3 text-right"&gt;Year&lt;/label&gt; &lt;div class="col-sm-3"&gt; &lt;input class="form-control sample_year" type="text" name="fileyear[]"&gt; &lt;/div&gt; &lt;label class="control-label col-sm-2 text-right"&gt;Size&lt;/label&gt; &lt;div class="col-sm-3"&gt; &lt;input class="form-control sample_size" type="text"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row form-group"&gt; &lt;div class="genre-tags" id="genre&lt;?php echo $i; ?&gt;"&gt; &lt;?php for ($j = 0; $j &lt; sizeof($genre_tags); $j++) { ?&gt; &lt;div class="btn btn-media-genre"&gt; &lt;label for="genre_tag-&lt;?php echo $j; ?&gt;"&gt;&lt;?php echo $genre_tags[$j]; ?&gt;&lt;/label&gt; &lt;input type="checkbox" id="genre_tag-&lt;?php echo $j; ?&gt;" class="gtags" name="genre_tags[]" value=&lt;?php echo $j; ?&gt; /&gt; &lt;/div&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;div style="clear:both; margin: 1em 0;"&gt;&lt;/div&gt; &lt;div class="media-tags"&gt; &lt;?php for ($j = 0; $j &lt; sizeof($media_tags); $j++) { ?&gt; &lt;div class="btn btn-media-genre"&gt; &lt;label for="media_tag-&lt;?php echo $j; ?&gt;"&gt;&lt;?php echo $media_tags[$j]; ?&gt;&lt;/label&gt; &lt;input type="checkbox" id="media_tag-&lt;?php echo $j; ?&gt;" class="mtags" name="media_tags[]" value=&lt;?php echo $j; ?&gt; /&gt; &lt;/div&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php if ($i % 3 == 0) echo "&lt;div style='clear:both;'&gt;&lt;/div&gt;"; ?&gt; &lt;?php } ?&gt; &lt;/div&gt; </code></pre> <p>(If you REALLY need to see rendered HTML, I can supply it, but you can maybe see why that might be way too much code.)</p> <p>User clicks a button named "Image [number]," the input group displays in an overlay box, and they do their business with those inputs.</p> <p>The part of this input group I'm having a problem with is the genre-tags and media-tags. Those are styled buttons over top of hidden checkboxes. User presses the styled button, checks the checkbox underneath, changes the class of the styled button to reflect. so far, so good.</p> <pre><code>$(".btn-media-genre").click(function() { var id = $(this).closest('[id]').attr('id'); var $checkbox = $(this).find("input"); $checkbox.attr("checked", !$checkbox.attr('checked')); $(this).toggleClass('btn-warning'); }); </code></pre> <p>But obviously what happens here is that the user clicks, say, the first genre tag in the first image-form, and that jQuery above checks the same genre-tag in every image-form, not just that one. An alert on the id variable above returns a series of "genre[x]" ids for each one.</p> <p>So my question is: how can I isolate each image-form so that doesn't happen? User clicks one button, and that click doesn't affect the other 7 input groups. I've got each set of genre-tags and media-tags outfitted with discrete ids, but am otherwise stumped how to keep them separated.</p> <p><strong>ANSWER</strong></p> <p>change this</p> <pre><code>&lt;input type="checkbox" id="genre_tag-&lt;?php echo $j; ?&gt;" class="gtags" name="genre_tags[]" value=&lt;?php echo $j; ?&gt; /&gt; </code></pre> <p>to this</p> <pre><code>&lt;input type="checkbox" id="genre_tag-&lt;?php echo $i . '-' . $j; ?&gt;" class="gtags" name="genre_tags[]" value=&lt;?php echo $j; ?&gt; /&gt; </code></pre> <p>so the checkboxes all have different ids ($i taken from the loop that creates the 8 similar input groups, $j from the genre-tag array).</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJeff
    1. USJeff
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COcan you prepare a fiddle as I did in the previous answer
      singulars
      1. POjQuery checkbox interatction in PHP-generated inputs
      1. USArun P Johny
    2. COYou're welcome to look at one I mocked up, but I don't know much it'll tell you, considering there's a fancybox involved, and dynamic generation, and so on, and I had to cut the code down REALLY drastically, because it was coming out to something like 600 lines just to copy-paste two of them out of them out of the browser. I don't think this tells you much, in other words: http://jsfiddle.net/Hy749/2/
      singulars
      1. POjQuery checkbox interatction in PHP-generated inputs
      1. USJeff
    3. COwhether you are able to recreate the scenario
      singulars
      1. POjQuery checkbox interatction in PHP-generated inputs
      1. USArun P Johny
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload