StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Use a class instead of ids for the buttons and assign the click handler using .on on a higher level element. </p> <p>Either uses classes for the data (with a grouping class set as a data element on the button) or set the id suffix as a data item on the button E.g. (you only need either data-qclass or data-qnum depending on which you use)</p> <pre><code><input class="qbutton" data-qclass="q0" data-qnum="" name="qbut" type="button" id="qbut" value="Go" /> <input class="qbutton" data-qclass="q1" data-qnum="1" name="qbut1" type="button" id="qbut1" value="Go" /> <input class="qbutton" data-qclass="q2" data-qnum="2" name="qbut2" type="button" id="qbut2" value="Go" /> </code></pre> <p>with corresponding javascript</p> <pre><code>$(document).ready(function() { $(document).on(".qbutton", 'click', function() { // Using ids for fetching the data var q_num = $(this).data('qnum'); var qvendor = $("#qvendor" + q_num).val(); var qmiles = $("#qmiles" + q_num).val(); // Alternative use classes var all_data_items = $('.' + $(this).data('qclass')); var qvendor = $(".qvendor", all_data_items).val(); var qmiles = $(".qmiles", all_data_items).val(); }); }); </code></pre> <p>You could do it soley based on ids (you still need a common class to assign the click event, but without the data- elements) but I think using data- is clearer. However, for the id-based variant use javascript</p> <pre><code>$(document).ready(function() { $(document).on(".qbutton", 'click', function() { // Fetch the rest of the id of the button to use as a suffix for the data element ids var q_num = $(this).attr('id').replace(/qbut/, ''); // Fetch data var qvendor = $("#qvendor" + q_num).val(); var qmiles = $("#qmiles" + q_num).val(); }); }); </code></pre> <p>Warning: not tested at all, but should work!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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