logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error
Admin Ship Order Page vs Enter Key - Hitting Enter Key Will Submit Form Prematurely
Options
Go to last post Go to first unread
Previous Topic Next Topic
jeffr_ca  
#1 Posted : Tuesday, December 22, 2020 8:49:48 PM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
When using the Admin/Shipments/Ship Items tool, it is too easy to accidentally complete the shipment by hitting the enter key when editting any field on the page.

Can we disable the "Submit on Enter" functionality on this page and require the user to explicitly click the "Ship" button after they have had a chance to confirm all shipping details?

For example, if you are editting a Quantity to Ship and happen to hit the "Enter" key, the form is immediately submitted (maybe without tracking information).

Another example is when using a bar-code scanner to populate the Tracking Number field....the scanner may transmit an "Enter" after scanning the barcode and this will immediately submit the form without any chance to further review the shipment details.

Thanks for help on this.

-Jeff
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
jeffr_ca  
#2 Posted : Tuesday, December 22, 2020 9:49:19 PM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
I was able to find a solution to this problem that is currently working for me.

I'm posting it so others can use it for what it's worth. Apparently the standard states that "A form element's default button is the first submit button in tree order whose form owner is that form element."

So the trick is to define a disabled, decoy button first, effectly trapping the Enter key working from activating the actual Submit Button in the form. You must specifically click the "Ship" button to submit this form.

Please let me know if this isn't an appropriate solution.

-Jeff



Open the \Areas\Admin\Views\Orders\ _ShipOrder.cshtml file and search for:

Code:

<div class="button-group">                            
    @Ajax.ActionLink("Cancel", "OrderShipments",
         new { OrderNumber = Model.OrderNumber },
         new AjaxOptions
         {
             UpdateTargetId = "view-order-tab-container",
             OnSuccess = "SetActiveTab('Shipments')",
         }, new { @class = "btn btn-white" })
     <button type="submit" class="btn btn-primary">Ship</button>
</div>


and replace like this:
Code:

<div class="button-group">                            
    @Ajax.ActionLink("Cancel", "OrderShipments",
         new { OrderNumber = Model.OrderNumber },
         new AjaxOptions
         {
             UpdateTargetId = "view-order-tab-container",
             OnSuccess = "SetActiveTab('Shipments')",
         }, new { @class = "btn btn-white" })

  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>
  <!-- ... -->

     <button type="submit" class="btn btn-primary">Ship</button>
</div>

Back to top
shaharyartiwana25816656  
#3 Posted : Wednesday, December 23, 2020 4:14:24 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 703

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
I think the solution is appropriate and will resolve the issue.

You can also intercept the enter key listener in jquery.

Code:
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});


Note: I have registered this issue.

Edited by user Wednesday, December 23, 2020 4:15:03 AM(UTC)  | Reason: Not specified
Back to top
jeffr_ca  
#4 Posted : Wednesday, December 23, 2020 9:00:11 AM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
Thank you for the additional option. It may become handy for other pages.

Can you advise where in the file the code snippet should be placed?

Thanks!

-Jeff
Back to top
shaharyartiwana25816656  
#5 Posted : Monday, January 4, 2021 1:06:11 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 703

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Hi Jeff,

You can add this code snippet in \Website\Areas\Admin\Scripts\custom\app.js
This is the admin side global custom js file.
Back to top
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.115 seconds.