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) (hit F12) and read any errors. Inline event handlers like onclick or oninput are not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener. — Sebastian Simon
– Sebastian Simon, Commented Aug 5, 2018 at 17:20
@Xufox thanks for your suggestion but it also never work for me :( — user10181758
– user10181758, Commented Aug 6, 2018 at 3:42

lzagkaretos · Accepted Answer · 2018-08-05 18:04:59Z

1

Disabling a html button by:

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

Enabling a html button by:

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

edited Aug 5, 2018 at 18:04

lzagkaretos

2,9202 gold badges19 silver badges28 bronze badges

answered Aug 5, 2018 at 17:25

TechSet

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

caylee · Accepted Answer · 2018-08-06 11:49:19Z

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>

Collectives™ on Stack Overflow

button not enable in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related