Auto-submit 'topic/moderator actions' form onchange
Posted
#5071
(In Topic #1021)
CNS_FORUM_TOPIC_WRAPPER
I've edited my templates to auto-submit each form (or selection) from the dropdowns when an option is selected. For example, for the "per-page" views, I've removed the "per page" button and enabled it to function once the new integer is selected from the dropdown. I've achieved this by adding onchange="this.form.submit();" to the SELECT tag within the form element.In addition to a revamped "per-page" selection, I've also successfully duplicated this functionality for the "sort" dropdown.
However, I'm running into trouble with using the same functionality on the "topic actions" dropdown. It seems this one requires a button to be clicked to submit the form element.
The working code I used for the "sort" and "per-page" dropdowns:
Code
<label for="forum_max">{!PER_PAGE}: </label>
<select{+START,IF,{$JS_ON}} onchange="this.form.submit();"{+END} name="forum_max" id="forum_max">
<option value="10"{$?,{$EQ,{MAX},10}, selected="selected",}>10</option>
<option value="20"{$?,{$EQ,{MAX},20}, selected="selected",}>20</option>
<option value="30"{$?,{$EQ,{MAX},30}, selected="selected",}>30</option>
<option value="50"{$?,{$EQ,{MAX},50}, selected="selected",}>50</option>
<option value="100"{$?,{$EQ,{MAX},100}, selected="selected",}>100</option>
<option value="300"{$?,{$EQ,{MAX},300}, selected="selected",}>300</option>
</select>
{+START,IF,{$NOT,{$JS_ON}}}<input onclick="if (add_form_marked_posts(this.form,'mark_')) { disable_button_just_clicked(this); return true; } window.fauxmodal_alert('{!NOTHING_SELECTED=;}'); return false;" class="button_micro buttons__proceed" type="submit" value="{!PROCEED}" />{+END}
Duplicating the syntax from above on the "topic actions" form just returns an error that nothing was selected (for example, If I select a topic and choose "mark as unread" from the dropdown, it shows no topic was selected).
The default code that requires the use of a button:
Code
<select class="dropdown_actions" name="type" id="fma_type">
<option value="browse">-</option>
{MODERATOR_ACTIONS}
</select><input onclick="if (add_form_marked_posts(this.form,'mark_')) { disable_button_just_clicked(this); return true; } window.fauxmodal_alert('{!NOTHING_SELECTED=;}'); return false;" class="button_micro buttons__proceed" type="submit" value="{!PROCEED}" />Is there a way I can implement the same functionality for the topic/moderator actions?
Posted
Moderator
Code
<select class="dropdown_actions" name="type" id="fma_type" onchange="if (add_form_marked_posts(this.form,'mark_')) this.form.submit(); window.fauxmodal_alert('{!NOTHING_SELECTED=;}');">
<option value="browse">-</option>
{MODERATOR_ACTIONS}
</select><input class="button_micro buttons__proceed" type="submit" value="{!PROCEED}" />
Posted
- As expected, if a topic is not selected, fauxmodal_alert is triggered on form change.
- Unexpectedly even if a topic is selected, the alert is still triggered but then is dismissed as the page reloads with a success message.
- Adding braces to the IF statement and segregating the fauxmodal_alert into an ELSE statement (example below) makes somewhat a bit of progress, but the issue here is that if a user fails to select a topic at first and uses the form, fauxmodal_alert is triggered and then the option they selected from the dropdown becomes just that – "selected", therefore cannot be reselected without refreshing the page. That being said, clicking a selected option from the dropdown wouldn't do anything when the user actually selects a topic prior to making the same selection from the dropdown.
Code
onchange="if (add_form_marked_posts(this.form,'mark_')) { this.form.submit(); } else { window.fauxmodal_alert('{!NOTHING_SELECTED=;}'); }"Changing that up a bit to the syntax used by default within other forms on the page is basically the same thing and returns the same result as the above solution:
Code
onchange="if (add_form_marked_posts(this.form,'mark_')) { this.form.submit(); return true; } window.fauxmodal_alert('{!NOTHING_SELECTED=;}'); return false;"By default, you have the sort function capable of submitting on form change (assuming JS is enabled). A little confused as to why there was still a button there anyways - maybe you forgot to wrap the button in an IF statement to check if JS is turned off. It honestly didn't even occur to me that the sort feature was coded to submit onchange by default - it threw me off because of the button there.
I think that could be one of the reasons you placed a button next to the topic actions form - it's clever because when the user doesn't select a topic, it redirects the user to another page instead of using fauxmodal_alert. Removing the button and altering the code to submit on form change would require the user to refresh the page, as described above.
So I guess the question is how can we remove the use of fauxmodal_alert and redirect the user to a page with the error on it, making it so when the user goes back to rectify their request, the originally selected form option isn't selected anymore (I think the default selected option is '-')
Sorry this may be a little hard to follow - let me know if I need to explain that better.
Posted
Moderator
Code
<select class="dropdown_actions" name="type" id="fma_type" onchange="if (add_form_marked_posts(this.form,'mark_')) form.submit(); else { window.fauxmodal_alert('{!NOTHING_SELECTED=;}'); this.selectedIndex=0; }">
<option value="browse">-</option>
{MODERATOR_ACTIONS}
</select>
The sort button should not show, and actually it's code is wrong too (so if you could click it, it wouldn't work right).
I think I'm going to just refresh all this along the lines you're suggesting (hiding unneeded buttons if JS is on), for the next patch release.
1 guest and 0 members have recently viewed this.