Search code examples
javascriptbuttononclickautoresize

onclick event - call a button using something other than id

I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->

<input type="submit" value="Continue">

Is there anyway I can call to this by using the value of 'Continue'?

FYI: the button is coded with php and I want to rerun the following

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
    $(window).load(function resizePole(){
    var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
    $('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>

and I am attempting to call this using:

onclick="return resizePole();"

Oh and I know next to nothing about javascript :)

Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later

link to site

What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.

Solution

  • This will work.

    $('[type="submit"][value="Continue"]').click(function () {
{
    return resizePole();
});

    EDIT

    As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).

    $('[type="submit"][value="Continue"]').click(resizePole);

    EDIT 2

    To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.

    $('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);

    EDIT 3

    This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).

    $('[type="submit"][value="Continue"]:last').click(resizePole);