set onclick value based on select menu option

[bravo14]

Hi Guys

 

I am trying to set an onclick value based on the value of a select menu.  The function I have at the moment is 

 

 

 
function setSize() {
    if (document.getElementById('size').value >0) {
var size= document.getElementByID('size').value;
        document.getElementById('btnAddToCart').options.onClick = "window.location.href='<?php echo $cart_url; ?>&s=';";
    } else {
        document.getElementById('btnAddToCart').options.onClick = "window.location.href='<?php echo $cart_url; ?>';";
    }
}

 

Basically, if a size is required for an item then the value of the onclick needs to be window.location.href='<?php echo $cart_url; ?>&s=size variable

 

If no size is required then the value needs to be window.location.href='<?php echo $cart_url; ?>'

 

I am just not sure how to achieve this.

[dalecosp]

"size" might not be the best choice of names for this variable, as several objects in JS have this as one of their methods.  How about this?

function setSize() {
    if (document.getElementById('mySize').value >0) {
var theSize= document.getElementByID('mySize').value;
        document.getElementById('btnAddToCart').options.onClick = "window.location.href='<?php echo $cart_url; ?>&s="+theSize+'";
    } else {
        document.getElementById('btnAddToCart').options.onClick = "window.location.href='<?php echo $cart_url; ?>';";
    }
}

Does that work?  (You will need to change your HTML, of course, as well....)
 

Edited June 26, 2013 by dalecosp

[Psycho]

The problem is how you are referencing the value of the select list. I don't think you can get it that way in all browsers. Assuming setSize() is called onchange of the select list, then you should call the function passing a reference to the select list.

 

<input type="select" name="mySize" onchange="setSize(this);">

 

Yo can also greatly simplify the code:

 

function setSize(selObj)
{
    var sizeVal = selObj.options[selObj.selectedIndex].value;
    var hrefVal = '<?php echo $cart_url; ?>';

    if (sizeVal > 0)
    {
        hrefVal = hrefVal + '&s=' + sizeVal;
    }
    document.getElementById('btnAddToCart').options.onClick = "window.location.href='" + hrefVal + "'"
}

[bravo14]

Hi Psycho

 

I have tried to implement the functionyou supplied but am gettign an error in firebug saying TypeError: document.getElementById(...) is null

 

The source for page is displayed a such on load

 

Select field

 

<select name="pd_Size" id="pd_Size" onchange="setSize(this);">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="X-Large">X-Large</option>
<option value="XX-Large">XX-Large</option>
<option value="XXX-Large">XXX-Large</option>
</select>

 

The Add to Cart button says

 

<input type="button" name="btnAddToCart" value="Add To Cart >" onClick="window.location.href='<?php echo $cart_url; ?>';" class="addToCartButton">

 

The javascript function says

 

function setSize(pd_Size)
{
    var sizeVal = pd_Size.options[pd_Size.selectedIndex].value;
    var hrefVal = '<?php echo $cart_url; ?>';

    if (sizeVal > 0)
    {
        hrefVal = hrefVal + '&s=' + sizeVal;
    }
    document.getElementById('btnAddToCart').options.onClick = "window.location.href='" + hrefVal + "'"
}

 

Where am I going wrong?

 

If you need any more from the page then please let me know, I am not sure what info you would need

[nogray]

You are going the wrong way about setting this. First, there is no "options" in the button element, you would add the onclick directly to it. What you would need to do is set the onclick to a function that will check the value and redirect based on it.

 

e.g. First remove the change event from the select menu.

<input type="button" name="btnAddToCart" value="Add To Cart >" onClick="setSize();" class="addToCartButton">

function setSize()
{
    var sizeVal = document.getElementById('pd_Size').options[pd_Size.selectedIndex].value;
    var hrefVal = '<?php echo $cart_url; ?>';

    if (sizeVal != '')
    {
        hrefVal = hrefVal + '&s=' + sizeVal;
    }

    location.href = hrefVal;
}

[bravo14]

Thanks for your reply, it's almost there, however the URL that it redirects to becomes

 

http://localhost:8888/Nick%20Morris/shop/<?php echo $cart_url; ?>&s=Medium

 

Is there a way of incorporating the php varibale into a javascript function?  Does it matter if the javascript is held in an external file?

[Psycho]

Thanks for your reply, it's almost there, however the URL that it redirects to becomes

 

http://localhost:8888/Nick%20Morris/shop/<?php echo $cart_url; ?>&s=Medium

 

Is there a way of incorporating the php varibale into a javascript function?  Does it matter if the javascript is held in an external file?

 

PHP is only executed if the file is requested from the server as a PHP file. If the file is named .js, .html, .css then the server just picks up the file and sends it to the user. If the file is .php then the server will parse the file and execute the PHP code. Now, you can change the web server settings (assuming it is your dedicated server) to also process other file types for PHP code, but an easier alternative is to simply make the JavaScript include file a PHP file so it will be processed by the server before being sent to the user. JavaScript doesn't care about the file extension for files that are included. Heck you can even use PHP file for your stylesheets.

[Irate]

I actually got a Uncaught MIME Error when I referenced to an HTML document (by declaration!) which only contained the script on Chrome, so I would be cautious with file extensions.

You can set the MIME type of your PHP file with the header() function, though.

[Psycho]

I actually got a Uncaught MIME Error when I referenced to an HTML document (by declaration!) which only contained the script on Chrome, so I would be cautious with file extensions.

You can set the MIME type of your PHP file with the header() function, though.

 

Yeah, there might be a problem with html since the browser might try to parse it. However, I remembering having a problem years ago where an included .js file was used to define an array of values that were used to perform some dynamic actions based upon a select list. It worked fine until we needed to update that .js file. The browser was caching the file so changes were not being reflected for users who had previously accessed the page. By changing the file to .asp it resolved that problem.

[dalecosp]

The browser was caching the file so changes were not being reflected for users who had previously accessed the page.

$.02, just for the sake of the future reader: we do lots of caching here.

 

Our SOP is to always update the HTML by adding a querystring to resources that are cached whenever the cached item is changed.

 

That is, if we make changes to "general.js", the corresponding script tag in the HTML will now look like this:

 

<script src="/js/general.js?datecode" />

This will cause the browser to see the file as a different resource, so it won't be cached. (Better than trying to "fake out" the server/browser by changing file names to imply other types). Edited June 28, 2013 by dalecosp

[Psycho]

Our SOP is to always update the HTML by adding a querystring to resources that are cached whenever the cached item is changed.

 

Yep, I've done that too, but that seems more of a hack to me. Besides, making the resource file a .php (or other dynamically processed file) provides a great deal more flexibility. For example, with my previous problem above, the array of options could be dynamically generated from a DB query. So, there would be no need to create a new flat-file and put it out on the server - just create a new DB entry.

 

In any event, there is no single correct solution. There are always different factors that make one solution preferable to others.

[dalecosp]

Yep, I've done that too, but that seems more of a hack to me. Besides, making the resource file a .php (or other dynamically processed file) provides a great deal more flexibility. For example, with my previous problem above, the array of options could be dynamically generated from a DB query. So, there would be no need to create a new flat-file and put it out on the server - just create a new DB entry.

True enough, but what's the point of serving anything from cache if not to negate the need for dynamic processing?   

 

In any event, there is no single correct solution. There are always different factors that make one solution preferable to others.

True dat!