Using jscript onload to focus on input box with constantly varying name

27 Feb 2012, 4:04 PM

#1

New Zenner

Join Date:: Feb 2011
Location:: Indianapolis, IN
Posts:: 38
Plugin Contributions:: 0

Using jscript onload to focus on input box with constantly varying name

So I discovered how to individually call a <body onload""> function via the Zen Cart Wiki Article, and it works perfectly! However, I am now stuck with how to on_load_focus on a particular input box, whose name varies. Let me explain:

Our on-line Zen Cart store is our POS terminal at our bricks and mortar store. We are implementing bar code scanning to streamline the check-out process. First we have made each product model a corresponding number to the product bar codes, which are printed on our products. The idea is to make it so that when a new customer wants to check out, we click on "home" to get to our store's index page. The focus at that point should be on the search box. Upon "beeping" a product bar code, it automatically returns the data and ends up at the advanced search page.

From here, I want the focus to switch to the first search term's quantity box. (FWIW, theoretically there should only be one resulting search term, however, I have already had the experience of there being two search terms. No big deal there, as long as I can still get the focus to occur on the top most result's quantity box.) That way, all I have to do is enter a number instead of having to click on that box to activate it. As soon as I key in the quantity and press enter, I will be whisked away to my shopping cart, at which point we will focus on the search box so that we can continue to scan another product's bar code. This will keep going until we are ready to check out.

So, in the resulting advanced_search_results page code, the quantity box(es) are appropriately labeled by product ID as such: "products_id[XXX]" where XXX is the actual product ID. Given that each search makes the XXX something different for each given search result, I think that an on_load event would need to be looking for a name with wildcards in order to focus appropriately on that box.

The only two ways I can think to deal with this, is to either give the on_load command a name with valid wildcards in place of the product id or to establish a name for the quantity box which relates to its position in the list as opposed to its relationship to the search term.

Can anyone recommend a method, or help with the wildcard generation, if it is even possible to do? I am also having trouble with determining where the "name" of the search box is being generated -- if I could change it at the source, and it wouldn't screw something else up, it might be an easier way to change the way those terms are identified in the HTML on that page.

Thanks in advance.

Jason
http://www.tuxedoparkbrewers.com/
jason-at-tuxedoparkbrewers.com

27 Feb 2012, 10:38 PM

#2

niccol

Totally Zenned

Join Date:: Apr 2009
Posts:: 2,138
Plugin Contributions:: 1

Re: Using jscript onload to focus on input box with constantly varying name

quite a few ways of doing this that you have hinted at.

But as a start let's go the php route.

The file you need is includes/modules/YOUR_TEMPLATE/product_listing.php . If the override version does not exist then create it.

Where exactly you put this code depends on your set up. What I mean by that is if you have multiple add to cart selected or not. I believe that you have multiple switched on so....

You are looking for this in product_listing about line 135ish:

            } else {
              $lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';
            }

which you want to replace with

            } else {
                if(!$notfirst)
                {
                    $string = ' id="first_input" ';
                    $notfirst = true;
                }else{
                    $string = '';
                }
              $lc_button = TEXT_PRODUCT_LISTING_MULTIPLE_ADD_TO_CART . "<input".$string." type=\"text\" name=\"products_id[" . $listing->fields['products_id'] . "]\" value=\"0\" size=\"4\" />";
            }

What that will do is add a new id (#first_input) to the first input on the page. Then you can target that with javascript easily.

There are other ways of doing this. For instance jQuery would make targeting that element much easier without php changes and you could probably find a way to do it in straight javascript. But this should work.

I am guessing that that is enough to get you rolling.

28 Feb 2012, 12:15 AM

#3

drbyte

Sensei

Join Date:: Jan 2004
Posts:: 63,513
Plugin Contributions:: 176

Re: Using jscript onload to focus on input box with constantly varying name

Or to do it without any code changes, just use this in a new file: /includes/modules/pages/advanced_search_result/on_load_focus.js

document.forms['multiple_products_cart_quantity'].elements[1].focus();

28 Feb 2012, 2:36 AM

#4

lindenboy

New Zenner

Join Date:: Feb 2011
Location:: Indianapolis, IN
Posts:: 38
Plugin Contributions:: 0

Re: Using jscript onload to focus on input box with constantly varying name

@Niccol thank you for the creative approach. I was psyched when you replied so quickly to assure me that it was possible! Then along comes Dr. Byte to steal your thunder with a one-liner! Sorry : P Alas both solutions are much appreciated!

I was a bit stumped at first, when Dr. Byte's solution only worked on the pages with multiple products listed. And even then, it highlighted the second item, not the first! Something clicked from far back in my brain, that instead of using [1] to identify the position in what I assume to be the array, one should use [0].

It could be a fluke at the moment, but making that minor change made it work correctly on both types of pages, those with only one product listing search result, and then those also with at least two results. I haven't tested further.

Thanks again for the help!

Jason

28 Feb 2012, 3:02 AM

#5

drbyte

Sensei

Join Date:: Jan 2004
Posts:: 63,513
Plugin Contributions:: 176

Re: Using jscript onload to focus on input box with constantly varying name

Yes, using [0] grabs the first element.
My test site has the Add Selected button at the top of the form, so must have been seeing that button as the first element, thus I had to use [1] for it to work here.
Adjust as needed, of course.

niccol's approach is good if you have farther-reaching needs for doing additional customization.
And his jQuery suggestion is also good ... if you're already using jQuery. If you're not, then it's needless overhead to add it just for that.

28 Feb 2012, 11:19 AM

#6

niccol

Totally Zenned

Join Date:: Apr 2009
Posts:: 2,138
Plugin Contributions:: 1

Re: Using jscript onload to focus on input box with constantly varying name

Well, having thunder stolen by Dr Byte is no bad thing :smile: It is just a question of how you target that particular element in javascript. It suits me to do that with a hard coded id rather than navigating through the DOM, as this may actually change as the site is developed, but that is just my way of doing things.

29 Feb 2012, 10:03 PM

#7

lindenboy

New Zenner

Join Date:: Feb 2011
Location:: Indianapolis, IN
Posts:: 38
Plugin Contributions:: 0

Re: Using jscript onload to focus on input box with constantly varying name

One last question to finalize my quest for streamlining inventory updates. Using the above-mentioned DOM method, I was able to make the "search" box in the admin-->categories.php focus as follows:

onload="init(); document.forms['search'].elements['search'].focus();">

I had planned to highlight the quantity box in the product listing the same way, which worked except that the iframe with the FCKeditor kept stealing away the focus. I couldn't figure out how to make that stop happening.

Then, once you move onto the "preview" page, I wanted to set focus on the "update" button so all we had to do is hit "enter" to confirm that we wanted to update. I don't understand the difference between boxes and buttons, but the update button would not respond even focused with "document.NAME_OF_FORM.name_of_button.focus()" in the onload for the page. (I did ensure the input element had a name by changing code in preview_product.php).

I was hoping to streamline our most common task which is selecting a product and quickly changing the quantity for inventory with simple text inputs and "enter" keystrokes instead of always having to move the mouse after each page advance; the boxes and buttons could be focused and "ready" to receive the data.

As always, any help is appreciated, particularly with focusing on a button element instead of a box element -- I've almost got that nailed down on "preview."

Jason

29 Feb 2012, 11:33 PM

#8

drbyte

Sensei

Join Date:: Jan 2004
Posts:: 63,513
Plugin Contributions:: 176

Re: Using jscript onload to focus on input box with constantly varying name

As far as the FCKeditor goes, set your default preference for the editor to plain-text, and then the FCKeditor won't even fire. You can always temporarily override that by choosing from the pulldown before clicking on a product.

1 Mar 2012, 3:36 AM

#9

lindenboy

New Zenner

Join Date:: Feb 2011
Location:: Indianapolis, IN
Posts:: 38
Plugin Contributions:: 0

Re: Using jscript onload to focus on input box with constantly varying name

Didn't even realize there was a drop down to choose! Yes, that makes a difference, thanks.

On the submit button focus issue, I've solved it well enough for now by doing the following:

It seems that the button is actually created by the function zen_image_submit. I'm not sure how the parameters work together, but I did notice that in the back button above the below code, it included a name="back". In preview_info.php around line 157:

if (isset($_GET['pID'])) {
        echo zen_image_submit('button_update.gif', IMAGE_UPDATE, 'tabindex="1"');

To the "update" button, I added the 'tabindex="1"' portion in place of what was the 'name' element from for the back button. When the code is drawn on the page, the tabindex in fact allows you to press tab ONE time and it will activate the correct submit button. The onload focus() referenced above did not seem to want to activate the input image submit button. I suspect if that button was a true input type="submit" button it may have been a different story, but I'm not about to go around changing those sorts of things. This is the only instance I'm truly interested in.

The only way it could be better now is if the submit button were highlighted without having to hit tab, but I am never the less delighted in how this will streamline basic quantity changes to our inventory!

Jason