Databases
StackOverflow2013
Postsdbo
POIE9 file input is triggering wrong click event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE9 file input is triggering wrong click event
    primarykey
    data
    text
    <p>I have some jQuery that allows the user to select all checkboxes by clicking a 'Select all' checkbox.</p> <p>My jQuery looks like this:</p> <pre><code>$('.select-all').on('click', function(){ // alert($(this).attr('name')); - For debugging checkboxes = $(this).closest('.form-item').find('input[type=checkbox]'); if($(this).attr('checked')) { $(checkboxes).prop('checked', true); } else { $(checkboxes).prop('checked', false); } }); </code></pre> <p>My 'Select all' checkbox has a class of 'select-all', which when clicked triggers this jQuery code. This all works fine.</p> <p>Further down the form there is also a file input. Now for some reason in IE9 when the file input field is clicked it's also triggering the code above. The two are not connected in any way.</p> <p>Here's my file input HTML:</p> <pre><code>&lt;div id="form&lt;?php echo $this-&gt;id; ?&gt;_file" class="form-item"&gt; &lt;label for="file" class="mandatory"&gt;&lt;span class="invisible"&gt;Mandatory field&lt;/span&gt; Select file*&lt;/label&gt; &lt;span class="clearfix"&gt;&lt;/span&gt; &lt;input id="file-input" name="file" type="file" /&gt; &lt;p class="tl_help tl_tip"&gt;Select the file to upload.&lt;/p&gt; &lt;/div&gt; </code></pre> <p>Here's the HTML of the checkboxes:</p> <pre><code>&lt;div id="form52_country" class="form-item checkbox-group"&gt; &lt;label for="country" class="mandatory"&gt;&lt;span class="invisible"&gt;Mandatory field&lt;/span&gt; Country*&lt;/label&gt; &lt;span class="clearfix"&gt;&lt;/span&gt; &lt;input class="select-all" type="checkbox" name="sa" value=""&gt;Select all&lt;br&gt; &lt;input type="checkbox" name="country[]" value="al"/&gt;Albania&lt;br&gt; &lt;input type="checkbox" name="country[]" value="ar"/&gt;Argentina&lt;br&gt; // Rest of checkboxes continue as above &lt;/div&gt; </code></pre> <p>Here's where it gets even stranger. When I uncomment the alert in the jQuery code and try clicking the file input it alerts the name of my 'select all' checkbox button.</p> <p>Any ideas what is going on here? I can't make any sense of it, it only happens in IE. It seems as if it's treating my file input field as if it were my 'Select all' checkbox field.</p> <p>Thanks</p> <p><strong>Edit - Solved</strong></p> <p>Managed to track down the cause of this. I hadn't closed one of my label tags elsewhere in the form, after fixing this the problem stopped.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjd182
    1. USjd182
    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. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCould we maybe see **all** of the relevant HTML? You've mentioned checkboxes, but not shown the HTML for them.
      singulars
      1. POIE9 file input is triggering wrong click event
      1. USAnthony Grist
    2. COI've added them now, thanks.
      singulars
      1. POIE9 file input is triggering wrong click event
      1. USjd182
    3. COYou're not closing the Select all checkbox tag: `<input class="select-all" type="checkbox" name="sa" value="">`, try changing it to: `<input class="select-all" type="checkbox" name="sa" value=""/>`. It may be treating everything after that as child elements of the checkbox, so the click event bubbles up, though that would be a bit odd.
      singulars
      1. POIE9 file input is triggering wrong click event
      1. USAnthony Grist
 

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