button not enable in javascript

Question

I'm new to javascript. I have created a page that includes an add and a disabled unfriend button. Each button fetches a data id from the registration page.

The add button is a link to a prompt box. The data entered into the prompt box will be inserted into the database. Once completed, the unfriend button will be enabled. Before that, users cannot click it. To avoid users clicking the add button many times, I add the disable option after they click it. Now, my problem is that data can be inserted but the unfriend button cannot be clicked. I have already tried a lot of tutorials but haven't fixed the problem. Can anyone help me to solve my problem? Thanks a lot in advance! Below is my code and the form.

<html>
  <script>
    function myFunction(form){
      var subject = prompt("Please enter Subject that want to study");
      var btn = document.getElementById("btn");
      var add = document.getElementById("add");
      btn.disabled=false;
      add.disabled=true;
      if (subject != null){
        form['subject'].value= subject;
        form['add'].value="request sent";
      }
      form.submit();
    }

  function unfriend(form){
    var btn = document.getElementById("btn");
    var add = document.getElementById("add");
    add.disabled=false;
    btn.disabled=true;
    add.value="Add friend"; 
  }
</script>
<body>
  <form method="post" id="form" enctype="multipart/form-data" autocomplete="off"> 
    <input type="hidden" name="id" value="<?php echo $row['register_ID'];?>" />
    <input type="hidden" id="subject" name="subject" data-uid=<?php echo $_SESSION['sid'] ;?>/>
    <td>
      <input type="submit" onclick="myFunction(form);" name="addfriend" data-type='addfriend' id="add" class="btn" value="add" onchange="document.getElementById('btn').disabled = false" />                  
      <input type="submit" value="unfriend" id="btn"  onclick="unfriend(form);" disabled="" />
    </td>
  </form>
</body>
</html>

Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Inline event handlers like `onclick` or `oninput` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don't_use_these). — Sebastian Simon, Aug 05 '18 at 17:20
[What's the difference between JavaScript and Java?](https://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java) — Joe C, Aug 05 '18 at 17:29
@Xufox thanks for your suggestion but it also never work for me :( — , Aug 06 '18 at 03:42

score 1 · Answer 1 · edited Aug 05 '18 at 18:04

1

Disabling a html button by:

document.getElementById("Button").disabled = true;

Enabling a html button by:

document.getElementById("Button").disabled = false;

edited Aug 05 '18 at 18:04

lzagkaretos

2,842
2
16
26

answered Aug 05 '18 at 17:25

TechSet

11
1

score 0 · Answer 2 · answered Aug 06 '18 at 11:49

The problem with your code is that information is not transmitted between page accesses. So, as you click the button, the page is reloaded and the information lost. You either have to transmit the information (on page load, check what has been send or saved and display that) or do not reload the page.

Another problem is, to use the $_SESSION variable, in PHP you need a session_start() command.

For the second solution, you just do not form.submit() and use type=button instead of type=submit.

Below, an example for the second solution (you can transmit the information to the server on another way, e. g., via AJAX):

<?php session_start(); ?>
<html>
    <head>
        <script>
            function myFunction(form){
                var subject = prompt("Please enter Subject that want to study");
                var btn = document.getElementById("btn");
                var add = document.getElementById("add");
                btn.disabled=false;
                add.disabled=true;
            }
            function unfriend(form){
                var btn = document.getElementById("btn");
                var add = document.getElementById("add");
                add.disabled=false;
                btn.disabled=true;
            }
        </script>
    </head>
    <body>
        <form method="post" id="form" enctype="multipart/form-data" autocomplete="off"> 
            <input type="hidden" name="id" value="<?php echo $row['register_ID'];?>" />
            <input type="hidden" id="subject" name="subject" data-uid="<?php echo $_SESSION['sid'] ;?>" />
            <td>
                <input type="button" onclick="myFunction(form);" name="addfriend" data-type='addfriend' id="add" class="btn" value="add" onchange="document.getElementById('btn').disabled = false" />                  
                <input type="button" value="unfriend" id="btn"  onclick="unfriend(form);" disabled="" />
            </td>
        </form>
    </body>
</html>

button not enable in javascript

2 Answers2