set default value to more than 1 product ID using javascript

Question

I have set default value to an input box and set it to readonly. I also disable some select options. It is working but when I add another ID for another product, only 1 ID works.

Please note that I don't have access to the actual html pages. I can only access the js file.

What I need is: if I go to product 1 OR product 2, I will see the text box is set to 28 in readonly and the Weeks/Months disabled.

Below is my sample HTMLs. The HTMLs below are two different HTML pages.

HTML for product 1

<p>Deliver products every <input type="text" id="thisInput_prod1"></p>
<select id="thisSelect_prod1">
    <option value="Days" selected>Days</option>
    <option value="Weeks">Weeks</option>
    <option value="Month">Month</option>    
</select>

HTML for product 2

<p>Deliver products every <input type="text" id="thisInput_prod2"></p>
<select id="thisSelect_prod2">
    <option value="Days" selected>Days</option>
    <option value="Weeks">Weeks</option>
    <option value="Month">Month</option>    
</select>

This is the .js file

window.onload = SetDefaultValue;

function SetDefaultValue() {

document.getElementById('thisInput_prod1').setAttribute('value','28');
document.getElementById('thisInput_prod1').readOnly = true;
var x = document.getElementById('thisSelect_prod1');
x.options[1].disabled=true;
x.options[2].disabled=true;

//below is to set the other product - I disable because its not working
//document.getElementById('thisInput_prod2').setAttribute('value','28');
//document.getElementById('thisInput_prod2').readOnly = true;
//var y = document.getElementById('thisSelect_prod2');
//y.options[1].disabled=true;
//y.options[2].disabled=true;
}

As you told me you are not a programmer, take a look at this post about [one JS file for multiple pages](http://stackoverflow.com/questions/8410298/one-js-file-for-multiple-pages) and to the blog of [P. Irish](http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/) who had this idea — user3241019, Aug 27 '14 at 06:52

score 0 · Answer 1 · answered Aug 26 '14 at 07:22

0

When there's no thisInput_prod2 element, document.getElementById('thisInput_prod2') will evaluate to null, and then the code will abort trying to call .setAttribute on that null. You should assign it to a variable and test it to see if it's === null before dereferencing it.

answered Aug 26 '14 at 07:22

aecolley

1,973
11
10

thanks for your comment but I don't know how to do that (not a programmer). product 1 and product 2 are two different HTML files, I actually have around 10 or more pages. – user3766081 Aug 26 '14 at 07:31

score 0 · Answer 2 · answered Aug 26 '14 at 07:28

0

Here is your working example : Fiddle

    document.getElementById('thisInput_prod1').value = '28';
    document.getElementById('thisInput_prod1').readOnly = true;
    var x = document.getElementById('thisSelect_prod1');
    x.options[1].disabled = true;
    x.options[2].disabled = true;

    document.getElementById('thisInput_prod2').readOnly = true;
    var y = document.getElementById('thisSelect_prod2');
    y.options[1].disabled=true;
    y.options[2].disabled=true;

answered Aug 26 '14 at 07:28

user3241019

811
9
20

sorry for the confusions, but product 1 and product 2 are two different html pages. – user3766081 Aug 26 '14 at 07:48
then I recommend you to check this answer about [JS for multiple pages](http://stackoverflow.com/questions/8410298/one-js-file-for-multiple-pages) – user3241019 Aug 26 '14 at 08:03
I am so sorry but I cannot understand that. I am not so programmer and just combining js codes from tutorials. – user3766081 Aug 26 '14 at 08:27

set default value to more than 1 product ID using javascript

2 Answers2