JavaScript Button not remaining disabled after submitting form

I am attempting to disable a button using an external JavaScript - activated by a submit button

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Join Email List</title>
        <link rel="stylesheet" target='_blank' href="Radio_Button.css">
        <script src="Radio_Button.js"></script>
    </head>
<body>
    <section>
        <h1>Fun with Radio Buttonst</h1>
        <form id="email_form" name="email_form" method="get">
            <input type="radio" name="food1" id="cake1" value="cake" > Cake <br>
            <input type="radio" name= "food2"id="muffns1"value="muffins" > Muffins   <br>
            <input type="radio" name= "food3"id="donuts1" value="donuts1" > hello   <br>
            <input type="radio" name="food4"  id="food1"  value="cookies" > Cookies<br>
            <input type="submit" id="drink_selection" value="Process Drink Selection" onclick = "join_list()">
            <br>
        </form>
    </section>
</body>
</html>

My JavaScript is as follows

var getsElement = function (id) {
        return document.getElementById(id);
};
var join_list = function () {

    getsElement("cake1").disabled = true;
    getsElement("cake1").parentElement.disabled = true;
};

I can see the button disable when I watch the code but when the HTML reappears for user access the button is not disabled.

Answer:1

Your button reload the page, so your JS is missing. Also you should change your var join_list (scope var problems if you use this var in other functions like window.onload) to function.

So your code should be

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Join Email List</title>
        <link rel="stylesheet" target='_blank' href="Radio_Button.css">
        <script src="Radio_Button.js"></script>
    </head>

    <body>
        <section>
            <h1>Fun with Radio Buttonst</h1>
            <input type="radio" name="food1" id="cake1" value="cake"> Cake
            <br>
            <input type="radio" name="food2" id="muffns1" value="muffins"> Muffins
            <br>
            <input type="radio" name="food3" id="donuts1" value="donuts1"> hello
            <br>
            <input type="radio" name="food4" id="food1" value="cookies"> Cookies
            <br>

            <input type="submit" id="drink_selection" value="Process Drink Selection" onclick="join_list()">

        </section>
    </body>


</html>

JavaScript

        var getsElement = function(id) {
            return document.getElementById(id);
        };

        function join_list() {
            getsElement("cake1").disabled = true;
            getsElement("cake1").parentElement.disabled = true;

        };
Answer:2

Create HTML Class and filter it by dropdown

I'm new to HTML (just started learning at school) and I have a small question about classes and the ability to filter them. Basicially, I'm working on a page of football fixtures, which will look as ...

I'm new to HTML (just started learning at school) and I have a small question about classes and the ability to filter them. Basicially, I'm working on a page of football fixtures, which will look as ...

  1. create html class in javascript
  2. create html class
  3. create class html css
  4. js create html class
  5. create html helper class in mvc
  6. create html element with class javascript
  7. html create element class
  8. html create style class
  9. create div class html
  10. create new class html
  11. create custom class html
  12. html create dynamic class
  13. html create paragraph class
  14. html create pseudo-class
  15. html create element add class
  16. html create element set class

Nested routes (/:foo/:bar) with parameters do not render, why?

So, I'm not sure if I should've structured my app different or if I'm doing something fundamentally wrong. I'm a bit confused, but let's explain first things first. In the first navigation level, ...

So, I'm not sure if I should've structured my app different or if I'm doing something fundamentally wrong. I'm a bit confused, but let's explain first things first. In the first navigation level, ...

CSS full page height content

I'd like to build a website with a full height whatever the user's screen. Scroll is impossible, everything is shown in the page. I tried something like : <body> <div class="header"> ...

I'd like to build a website with a full height whatever the user's screen. Scroll is impossible, everything is shown in the page. I tried something like : <body> <div class="header"> ...

  1. full page height css
  2. full page height bootstrap
  3. full page height javascript
  4. full page height
  5. full page height div bootstrap
  6. full page height js
  7. full page height header
  8. page full height html
  9. iframe full page height
  10. get full page height javascript
  11. body full page height css
  12. flex full page height
  13. flexbox full page height
  14. get full page height jquery
  15. bootstrap full page height container
  16. jquery full page height
  17. get full page height
  18. full page auto height
  19. full page responsive height
  20. get full page height css

How to get a variable from complex attribute?

Html looks like this: <input class="car-type-input" name="carType[bmw]".../> How to get a variable in javascript which contains bmw using jQuery? Html CANT be changed! Current javascript: ...

Html looks like this: <input class="car-type-input" name="carType[bmw]".../> How to get a variable in javascript which contains bmw using jQuery? Html CANT be changed! Current javascript: ...

  1. variable complex
  2. variable complex pdf
  3. variable complex numbers
  4. variable complex function
  5. variable complex sentences
  6. variable complex root
  7. variable complex method