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

**lindenboy** · 27 Feb 2012, 05:04 PM

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

**niccol** · 27 Feb 2012, 11:38 PM

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:

Code:

            } 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

Code:

            } 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.

**DrByte** · 28 Feb 2012, 01:15 AM

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

Code:

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

**lindenboy** · 28 Feb 2012, 03:36 AM

@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

**DrByte** · 28 Feb 2012, 04:02 AM

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.

**niccol** · 28 Feb 2012, 12:19 PM

Well, having thunder stolen by Dr Byte is no bad thing

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.

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

Thread Tools

Search Thread

Display

Hybrid View

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

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

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

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

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

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

Similar Threads

v139h How to remove focus on Contact Us - Full Name field

left box content font size varying between ie and firefox

Setting a quantity discount with items with varying attributes?

Extra 'input' box needed on product info input page

Posting Permissions