Auto-submit 'topic/moderator actions' form onchange
Standard member
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?
Site director
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}" />
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Standard member
- 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.
Site director
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.
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Site director
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
1 guest and 0 members have just viewed this.
