How can I get html onchange function to work when page loads

I have an onChange function that works on the booking form that I have created but when the update form I have created loads I cant find a way of filtering as if it has been selected, below is a snippet of the code used which repeats for each element that is filtered;

<input name="CQty" id="CQty" value="<?php echo $noc; ?>" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}"

Here is where I am at with the jquery attempt so far (although it is shortened compared to the length of the final requirement);

document.onload = function clientQty() {

var Qty = document.update.CQty;

  if (['#CQty'].value=='1'){

      $['#C1N'].style.visibility='visible'

      $['#C1Al'].style.visibility='visible'

      $['#C1Gen'].style.visibility='visible'

      $['#C1DOB'].style.visibility='visible'

      $['#C1Age'].style.visibility='visible'

      $['#C1Rel'].style.visibility='visible'

      $['#C1IDNo'].style.visibility='visible'

      $['#C1Photo'].style.visibility='visible'

      $['#C1PoC'].style.visibility='visible'

      $['#C1PKB'].style.visibility='visible'

      $['#C1Res'].style.visibility='visible'

      $['#C2N'].style.visibility='hidden'

      $['#C2Al'].style.visibility='hidden'

      $['#C2Gen'].style.visibility='hidden'

      $['#C2DOB'].style.visibility='hidden'

      $['#C2Age'].style.visibility='hidden'

      $['#C2Rel'].style.visibility='hidden'

   }

else if (['#CQty'].value=='10'){

      $['#C1N'].style.visibility='visible'

      $['#C1Al'].style.visibility='visible'

      $['#C1Gen'].style.visibility='visible'

      $['#C1DOB'].style.visibility='visible'

      $['#C1Age'].style.visibility='visible'

      $['#C1Rel'].style.visibility='visible'

      $['#C1IDNo'].style.visibility='visible'

      $['#C1Photo'].style.visibility='visible'

      $['#C1PoC'].style.visibility='visible'

      $['#C1PKB'].style.visibility='visible'

      $['#C1Res'].style.visibility='visible'

      $['#C2N'].style.visibility='visible'

      $['#C2Al'].style.visibility='visible'

      $['#C2Gen'].style.visibility='visible'

      $['#C2DOB'].style.visibility='visible'

      $['#C2Age'].style.visibility='visible'

      $['#C2Rel'].style.visibility='visible'

}

};

Any ideas would be most appreciated as it is the only thing that I am stuck on now.

edited Nov 21 '18 at 11:17

asked Nov 20 '18 at 18:41

R.Nock

1

try document.onload

– Katie.Sun
Nov 20 '18 at 19:25

Unfortunately that didn't work, thank you for the help.

– R.Nock
Nov 21 '18 at 9:55

1

Can you provide that document.onload code

– Tamilvanan N
Nov 21 '18 at 10:01

Are you basically trying to hide different parts of the form based on which value is selected in that input? Also what type of input is it? What is the value when it loads?

– Katie.Sun
Nov 21 '18 at 22:34

add a comment |

<input name="CQty" id="CQty" value="<?php echo $noc; ?>" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}"

Here is where I am at with the jquery attempt so far (although it is shortened compared to the length of the final requirement);

document.onload = function clientQty() {

var Qty = document.update.CQty;

  if (['#CQty'].value=='1'){

      $['#C1N'].style.visibility='visible'

      $['#C1Al'].style.visibility='visible'

      $['#C1Gen'].style.visibility='visible'

      $['#C1DOB'].style.visibility='visible'

      $['#C1Age'].style.visibility='visible'

      $['#C1Rel'].style.visibility='visible'

      $['#C1IDNo'].style.visibility='visible'

      $['#C1Photo'].style.visibility='visible'

      $['#C1PoC'].style.visibility='visible'

      $['#C1PKB'].style.visibility='visible'

      $['#C1Res'].style.visibility='visible'

      $['#C2N'].style.visibility='hidden'

      $['#C2Al'].style.visibility='hidden'

      $['#C2Gen'].style.visibility='hidden'

      $['#C2DOB'].style.visibility='hidden'

      $['#C2Age'].style.visibility='hidden'

      $['#C2Rel'].style.visibility='hidden'

   }

else if (['#CQty'].value=='10'){

      $['#C1N'].style.visibility='visible'

      $['#C1Al'].style.visibility='visible'

      $['#C1Gen'].style.visibility='visible'

      $['#C1DOB'].style.visibility='visible'

      $['#C1Age'].style.visibility='visible'

      $['#C1Rel'].style.visibility='visible'

      $['#C1IDNo'].style.visibility='visible'

      $['#C1Photo'].style.visibility='visible'

      $['#C1PoC'].style.visibility='visible'

      $['#C1PKB'].style.visibility='visible'

      $['#C1Res'].style.visibility='visible'

      $['#C2N'].style.visibility='visible'

      $['#C2Al'].style.visibility='visible'

      $['#C2Gen'].style.visibility='visible'

      $['#C2DOB'].style.visibility='visible'

      $['#C2Age'].style.visibility='visible'

      $['#C2Rel'].style.visibility='visible'

}

};

Any ideas would be most appreciated as it is the only thing that I am stuck on now.

edited Nov 21 '18 at 11:17

asked Nov 20 '18 at 18:41

R.Nock

1

try document.onload

– Katie.Sun
Nov 20 '18 at 19:25

Unfortunately that didn't work, thank you for the help.

– R.Nock
Nov 21 '18 at 9:55

1

Can you provide that document.onload code

– Tamilvanan N
Nov 21 '18 at 10:01

Are you basically trying to hide different parts of the form based on which value is selected in that input? Also what type of input is it? What is the value when it loads?

– Katie.Sun
Nov 21 '18 at 22:34

add a comment |

<input name="CQty" id="CQty" value="<?php echo $noc; ?>" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}"

Here is where I am at with the jquery attempt so far (although it is shortened compared to the length of the final requirement);

document.onload = function clientQty() {

var Qty = document.update.CQty;

  if (['#CQty'].value=='1'){

      $['#C1N'].style.visibility='visible'

      $['#C1Al'].style.visibility='visible'

      $['#C1Gen'].style.visibility='visible'

      $['#C1DOB'].style.visibility='visible'

      $['#C1Age'].style.visibility='visible'

      $['#C1Rel'].style.visibility='visible'

      $['#C1IDNo'].style.visibility='visible'

      $['#C1Photo'].style.visibility='visible'

      $['#C1PoC'].style.visibility='visible'

      $['#C1PKB'].style.visibility='visible'

      $['#C1Res'].style.visibility='visible'

      $['#C2N'].style.visibility='hidden'

      $['#C2Al'].style.visibility='hidden'

      $['#C2Gen'].style.visibility='hidden'

      $['#C2DOB'].style.visibility='hidden'

      $['#C2Age'].style.visibility='hidden'

      $['#C2Rel'].style.visibility='hidden'

   }

else if (['#CQty'].value=='10'){

      $['#C1N'].style.visibility='visible'

      $['#C1Al'].style.visibility='visible'

      $['#C1Gen'].style.visibility='visible'

      $['#C1DOB'].style.visibility='visible'

      $['#C1Age'].style.visibility='visible'

      $['#C1Rel'].style.visibility='visible'

      $['#C1IDNo'].style.visibility='visible'

      $['#C1Photo'].style.visibility='visible'

      $['#C1PoC'].style.visibility='visible'

      $['#C1PKB'].style.visibility='visible'

      $['#C1Res'].style.visibility='visible'

      $['#C2N'].style.visibility='visible'

      $['#C2Al'].style.visibility='visible'

      $['#C2Gen'].style.visibility='visible'

      $['#C2DOB'].style.visibility='visible'

      $['#C2Age'].style.visibility='visible'

      $['#C2Rel'].style.visibility='visible'

}

};

Any ideas would be most appreciated as it is the only thing that I am stuck on now.

edited Nov 21 '18 at 11:17

asked Nov 20 '18 at 18:41

R.Nock

<input name="CQty" id="CQty" value="<?php echo $noc; ?>" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}"

Here is where I am at with the jquery attempt so far (although it is shortened compared to the length of the final requirement);

document.onload = function clientQty() {

var Qty = document.update.CQty;

  if (['#CQty'].value=='1'){

      $['#C1N'].style.visibility='visible'

      $['#C1Al'].style.visibility='visible'

      $['#C1Gen'].style.visibility='visible'

      $['#C1DOB'].style.visibility='visible'

      $['#C1Age'].style.visibility='visible'

      $['#C1Rel'].style.visibility='visible'

      $['#C1IDNo'].style.visibility='visible'

      $['#C1Photo'].style.visibility='visible'

      $['#C1PoC'].style.visibility='visible'

      $['#C1PKB'].style.visibility='visible'

      $['#C1Res'].style.visibility='visible'

      $['#C2N'].style.visibility='hidden'

      $['#C2Al'].style.visibility='hidden'

      $['#C2Gen'].style.visibility='hidden'

      $['#C2DOB'].style.visibility='hidden'

      $['#C2Age'].style.visibility='hidden'

      $['#C2Rel'].style.visibility='hidden'

   }

else if (['#CQty'].value=='10'){

      $['#C1N'].style.visibility='visible'

      $['#C1Al'].style.visibility='visible'

      $['#C1Gen'].style.visibility='visible'

      $['#C1DOB'].style.visibility='visible'

      $['#C1Age'].style.visibility='visible'

      $['#C1Rel'].style.visibility='visible'

      $['#C1IDNo'].style.visibility='visible'

      $['#C1Photo'].style.visibility='visible'

      $['#C1PoC'].style.visibility='visible'

      $['#C1PKB'].style.visibility='visible'

      $['#C1Res'].style.visibility='visible'

      $['#C2N'].style.visibility='visible'

      $['#C2Al'].style.visibility='visible'

      $['#C2Gen'].style.visibility='visible'

      $['#C2DOB'].style.visibility='visible'

      $['#C2Age'].style.visibility='visible'

      $['#C2Rel'].style.visibility='visible'

}

};

Any ideas would be most appreciated as it is the only thing that I am stuck on now.

html onchange

edited Nov 21 '18 at 11:17

asked Nov 20 '18 at 18:41

R.Nock

edited Nov 21 '18 at 11:17

asked Nov 20 '18 at 18:41

R.Nock

edited Nov 21 '18 at 11:17

asked Nov 20 '18 at 18:41

R.Nock

asked Nov 20 '18 at 18:41

R.Nock

asked Nov 20 '18 at 18:41

R.Nock

1

try document.onload

– Katie.Sun
Nov 20 '18 at 19:25

Unfortunately that didn't work, thank you for the help.

– R.Nock
Nov 21 '18 at 9:55

1

Can you provide that document.onload code

– Tamilvanan N
Nov 21 '18 at 10:01

Are you basically trying to hide different parts of the form based on which value is selected in that input? Also what type of input is it? What is the value when it loads?

– Katie.Sun
Nov 21 '18 at 22:34

add a comment |

1

try document.onload

– Katie.Sun
Nov 20 '18 at 19:25

Unfortunately that didn't work, thank you for the help.

– R.Nock
Nov 21 '18 at 9:55

1

Can you provide that document.onload code

– Tamilvanan N
Nov 21 '18 at 10:01

Are you basically trying to hide different parts of the form based on which value is selected in that input? Also what type of input is it? What is the value when it loads?

– Katie.Sun
Nov 21 '18 at 22:34

try document.onload

– Katie.Sun
Nov 20 '18 at 19:25

Unfortunately that didn't work, thank you for the help.

– R.Nock
Nov 21 '18 at 9:55

Can you provide that document.onload code

– Tamilvanan N
Nov 21 '18 at 10:01

Are you basically trying to hide different parts of the form based on which value is selected in that input? Also what type of input is it? What is the value when it loads?

– Katie.Sun
Nov 21 '18 at 22:34

add a comment |

2 Answers
2

active

oldest

votes

window.onload = function() {

  if (document.getElementById("number").value=='1'){

      this.form['C1N'].style.visibility='visible'

   }

};

give this a try.

answered Nov 21 '18 at 10:27

manish kumar

1,30811028

Unfortunately that didn't work

– R.Nock
Nov 21 '18 at 10:51

add a comment |

I don't have your PHP scripts, so to test this, I changed your HTML so the input value defaults to 1 like so:

<input name="CQty" id="CQty" value="1" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}">

And your JavaScript to this:

window.onload = clientQty;



function clientQty() {

  console.log($('#CQty').attr('value')) //1

  //OR

  console.log(document.getElementById('CQty').value) //1

  //change all of these selectors so they work like the ones in the console.log statement

};

Your selectors aren't working properly. If you are using jQuery selectors (ie $), you can't reference those elements the way you would reference regular DOM elements in JavaScript as you do when you write .style.visibility = 'visible'-- you have to use jQuery functions like I did in $('#CQty').attr('value') above. The reverse is also true -- you can't use JavaScript DOM elements in jQuery without turning them into jQuery objects.

To try this, I would recommend viewing the console (Google how to do it in your browser of choice) and making sure that you have a value for those console.log statements when the page loads. If the value is undefined, your if statement will never be true, because undefined is not equal to 1.

One last note -- look into the meaning of this in JavaScript. In the line onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}" you say this.form, but this in that context is the input, and my guess is it doesn't have a form property.

answered Nov 21 '18 at 23:01

Katie.Sun

597114

Thank you, all that info was a big help, I will give the edits that you have suggested a go tomorrow.

– R.Nock
Nov 22 '18 at 18:49

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399480%2fhow-can-i-get-html-onchange-function-to-work-when-page-loads%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

window.onload = function() {

  if (document.getElementById("number").value=='1'){

      this.form['C1N'].style.visibility='visible'

   }

};

give this a try.

answered Nov 21 '18 at 10:27

manish kumar

1,30811028

Unfortunately that didn't work

– R.Nock
Nov 21 '18 at 10:51

add a comment |

window.onload = function() {

  if (document.getElementById("number").value=='1'){

      this.form['C1N'].style.visibility='visible'

   }

};

give this a try.

answered Nov 21 '18 at 10:27

manish kumar

1,30811028

Unfortunately that didn't work

– R.Nock
Nov 21 '18 at 10:51

add a comment |

window.onload = function() {

  if (document.getElementById("number").value=='1'){

      this.form['C1N'].style.visibility='visible'

   }

};

give this a try.

answered Nov 21 '18 at 10:27

manish kumar

1,30811028

window.onload = function() {

  if (document.getElementById("number").value=='1'){

      this.form['C1N'].style.visibility='visible'

   }

};

give this a try.

answered Nov 21 '18 at 10:27

manish kumar

1,30811028

answered Nov 21 '18 at 10:27

manish kumar

1,30811028

answered Nov 21 '18 at 10:27

manish kumar

1,30811028

answered Nov 21 '18 at 10:27

manish kumar

1,30811028

Unfortunately that didn't work

– R.Nock
Nov 21 '18 at 10:51

add a comment |

Unfortunately that didn't work

– R.Nock
Nov 21 '18 at 10:51

Unfortunately that didn't work

– R.Nock
Nov 21 '18 at 10:51

add a comment |

I don't have your PHP scripts, so to test this, I changed your HTML so the input value defaults to 1 like so:

<input name="CQty" id="CQty" value="1" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}">

And your JavaScript to this:

window.onload = clientQty;



function clientQty() {

  console.log($('#CQty').attr('value')) //1

  //OR

  console.log(document.getElementById('CQty').value) //1

  //change all of these selectors so they work like the ones in the console.log statement

};

answered Nov 21 '18 at 23:01

Katie.Sun

597114

Thank you, all that info was a big help, I will give the edits that you have suggested a go tomorrow.

– R.Nock
Nov 22 '18 at 18:49

add a comment |

I don't have your PHP scripts, so to test this, I changed your HTML so the input value defaults to 1 like so:

<input name="CQty" id="CQty" value="1" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}">

And your JavaScript to this:

window.onload = clientQty;



function clientQty() {

  console.log($('#CQty').attr('value')) //1

  //OR

  console.log(document.getElementById('CQty').value) //1

  //change all of these selectors so they work like the ones in the console.log statement

};

answered Nov 21 '18 at 23:01

Katie.Sun

597114

Thank you, all that info was a big help, I will give the edits that you have suggested a go tomorrow.

– R.Nock
Nov 22 '18 at 18:49

add a comment |

I don't have your PHP scripts, so to test this, I changed your HTML so the input value defaults to 1 like so:

<input name="CQty" id="CQty" value="1" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}">

And your JavaScript to this:

window.onload = clientQty;



function clientQty() {

  console.log($('#CQty').attr('value')) //1

  //OR

  console.log(document.getElementById('CQty').value) //1

  //change all of these selectors so they work like the ones in the console.log statement

};

answered Nov 21 '18 at 23:01

Katie.Sun

597114

I don't have your PHP scripts, so to test this, I changed your HTML so the input value defaults to 1 like so:

<input name="CQty" id="CQty" value="1" onChange="if (this.value=='1'){this.form['C1N'].style.visibility='visible'}">

And your JavaScript to this:

window.onload = clientQty;



function clientQty() {

  console.log($('#CQty').attr('value')) //1

  //OR

  console.log(document.getElementById('CQty').value) //1

  //change all of these selectors so they work like the ones in the console.log statement

};

answered Nov 21 '18 at 23:01

Katie.Sun

597114

answered Nov 21 '18 at 23:01

Katie.Sun

597114

answered Nov 21 '18 at 23:01

Katie.Sun

597114

answered Nov 21 '18 at 23:01

Katie.Sun

597114

Thank you, all that info was a big help, I will give the edits that you have suggested a go tomorrow.

– R.Nock
Nov 22 '18 at 18:49

add a comment |

Thank you, all that info was a big help, I will give the edits that you have suggested a go tomorrow.

– R.Nock
Nov 22 '18 at 18:49

Thank you, all that info was a big help, I will give the edits that you have suggested a go tomorrow.

– R.Nock
Nov 22 '18 at 18:49

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu