CODEWITHSUNDEEP
javascripthtml
Emirhan Bayrak
Emirhan Bayrak

Reputation: 63

Incorporating JS in Html page

I want to make a submit button that only activates when a radio button is checked, it works perfectly in JS fiddle http://jsfiddle.net/sYNj7/94/ 

var checker = document.getElementById('checkme');
 var sendbtn = document.getElementById('sendNewSms');
 // when unchecked or checked, run the function
 checker.onchange = function(){
if(this.checked){
    sendbtn.disabled = false;
} else {
    sendbtn.disabled = true;
}

}
<input type="checkbox" id="checkme"/>
  <input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

but it doesn't work when I try to make it into a html page with notepad++. I get the radio button next to a disabled submit button but the submit button doesn't activate when the radio button is checked. this is the code I have at the moment.https://gist.github.com/anonymous/e5f19f5745396926ce02

Upvotes: 3

Views: 81

Answers (3)

Amel
Amel

Reputation: 708

Just put your script just before closing body tag:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Captive portal</title>

</head>
<body>

<input type="checkbox" id="checkme"/>
  <input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
 <script>
     var checker = document.getElementById('checkme');
     var sendbtn = document.getElementById('sendNewSms');
     // when unchecked or checked, run the function
     checker.onchange = function(){
         if(this.checked){
             sendbtn.disabled = false;
         } else {
             sendbtn.disabled = true;
         }
     }
  </script>
</body>
</html>

Upvotes: 3

Buzinas
Buzinas

Reputation: 11725

It happens because you're trying to get the elements before they are rendered in the page.

In jsFiddle, it works, because they wrap your code into a onload event, and then, all the elements are already rendered when you try to use them.

There are two simpler ways of achieving what you want:

  • You can put your script tag right before ending the body tag, e.g:

     <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
   <!-- all your content -->
   <script>
   </script>
 </body>
 </html>

  • Or you can wrap your code in a onload or DOMContentLoaded event:

    <script>
document.addEventListener('DOMContentLoaded', function(e) {
  // your code goes here
});
</script>

Upvotes: 2

Alex K.
Alex K.

Reputation: 175748

Currently you attempt to access HTML elements before the page is fully loaded; they are not available at that point.

1. Put your code in a named function

function myFunc() {
    var checker = document.getElementById('checkme');
    var sendbtn = document.getElementById('sendNewSms');
    // when unchecked or checked, run the function
....

2. Use the body onload event to ensure it runs when all the HTML elements are available for use:

<body onload="myFunc();">

(JSFiddle does this for you by default)

Upvotes: 5

Related Questions