Announcement

Collapse
No announcement yet.

Text input help for product attributes

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Text input help for product attributes

    On our product pages if a customer hits the enter key on a text input product attribute it submits the form and then brings them to the wish list page.

    Would it be possible to just disable the form from being submitted when hitting enter?

    This also happens on mobile if the customer taps the go button instead of tapping done. At least on ios. haven't had a chance to check it on other mobile os

    I'd rather the form only be submitted by clicking or tapping the add to cart button regardless of what page its bringing you to when you hit enter or tap go.

    I suppose I would also need to implement the requested behavior on the PATR page as well.

    Thanks.

    -Nick
    Nick Harkins
    www.loveisarose.com
    *Web Developer
    *Miva
    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

    #2
    Hi Nick,

    In your 'scripts.js' file, within the 'jsPROD' function, try adding this:
    Code:
    $('.product-information').on('keypress', 'form', function (event) {
        return event.which != 13;
    });
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      That worked great.

      So, for any other pages I might want to implement the same behavior on, I can just change .product-information to be whatever class is assigned to the div that contains the form?
      Nick Harkins
      www.loveisarose.com
      *Web Developer
      *Miva
      *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

      Comment


        #4
        and of course add it within the corresponding 'jsPAGECODE' function
        Nick Harkins
        www.loveisarose.com
        *Web Developer
        *Miva
        *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

        Comment


          #5
          Correct
          Matt Zimmermann

          Miva Web Developer
          Alchemy Web Development
          https://www.alchemywebdev.com
          Site Development - Maintenance - Consultation

          Miva Certified Developer
          Miva Professional Developer

          https://www.dev4web.net | Twitter

          Comment


            #6
            Awesome.

            Thanks again.

            I'm sure I will be back for more.
            Nick Harkins
            www.loveisarose.com
            *Web Developer
            *Miva
            *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

            Comment


              #7
              It looks like I can't get this to work on the OCST form. I would also like to prevent autofill if that is possible.

              This is what I added to the jsOCST function of the scripts.js file

              Code:
                      $('#js-ocst-form').disableAutoFill();
              
                      $('.cart-contents').on('keypress', 'form', function (event) {
                          return event.which != 13;
                      });
              Thanks.
              Nick Harkins
              www.loveisarose.com
              *Web Developer
              *Miva
              *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

              Comment


                #8
                Hi Nick,

                I am not familiar with the disableAutoFill() function. Does the 'enter' prevention work without the disableAutoFill() function?
                Matt Zimmermann

                Miva Web Developer
                Alchemy Web Development
                https://www.alchemywebdev.com
                Site Development - Maintenance - Consultation

                Miva Certified Developer
                Miva Professional Developer

                https://www.dev4web.net | Twitter

                Comment


                  #9
                  Removing the disableAutoFill() function worked. Sounds like I won't be disabling autofill

                  Another question I have is: Should the Bill To same as shipping checkbox be checked by default?

                  Nick Harkins
                  www.loveisarose.com
                  *Web Developer
                  *Miva
                  *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                  Comment


                    #10
                    Hi Nick,

                    That will only be checked if you have an account and the ship to and bill two addresses match.
                    Matt Zimmermann

                    Miva Web Developer
                    Alchemy Web Development
                    https://www.alchemywebdev.com
                    Site Development - Maintenance - Consultation

                    Miva Certified Developer
                    Miva Professional Developer

                    https://www.dev4web.net | Twitter

                    Comment


                      #11
                      Okay thanks Matt
                      Nick Harkins
                      www.loveisarose.com
                      *Web Developer
                      *Miva
                      *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                      Comment


                        #12
                        FYI, why would you not want auto fill on OCST. I know I would be ticked off.
                        Bruce Golub
                        Phosphor Media - "Your Success is our Business"

                        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                        phosphormedia.com

                        Comment


                          #13
                          Yeah initially I didn't like the fact that it kept populating fields that aren't necessary such as the other state field, but now after thinking about it, I do agree that overall it would make checkout take longer an be more frustrating for the mobile user especially.

                          I would however like to figure out a way to only show the "Other State" field if another country other than the United States is selected.

                          And if US is the country have the state drop down show "Select One" instead of "Outside US"

                          I think the multiple state fields can be a little confusing to the average user, especially those in the US.

                          I also wouldn't mind having one field for their "Full Name" rather than "First Name" and "Last Name"

                          We also may eliminate the "Fax" field since its rarely used anymore.

                          Eliminating a few of those fields would also help clean up the customer fields a little bit and make them feel a little less overwhelming.

                          Nick Harkins
                          www.loveisarose.com
                          *Web Developer
                          *Miva
                          *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                          Comment


                            #14
                            Yes, definenty ditch stuff like Fax/Company/ etc as who even has a fax number these days (customers at least). As for the show hide, a simply jquery call could do it. Make sure you are defaulting the Country to US, then use CSS (display:none) to hide the Other State field, and then add jquery function to "on change, check value of the Country Drop Down and if not US, change the display value of State Other to Block.
                            Bruce Golub
                            Phosphor Media - "Your Success is our Business"

                            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                            phosphormedia.com

                            Comment


                              #15
                              Awesome thank you for those tips Bruce.

                              -Nick
                              Nick Harkins
                              www.loveisarose.com
                              *Web Developer
                              *Miva
                              *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                              Comment

                              Working...
                              X