CODEWITHSUNDEEP
javascripthtmlbutton
Mick Jack
Mick Jack

Reputation: 580

disable and enabling a html button

Users will only be able to click the submit button if users select a video file and the textbox is not empty. i can disable the submit button but i cant re-enable it

<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file"><span></span></label>
<input type="file" name="videofile" id="videofile" />
<br/>
Please enter video title:
<br/>
<input type"text" name="videoTitle" />
<br />
<input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
</form>

                <script>

                document.getElementById('submit').disabled = true;
                var n=document.getElementById('videoTitle').value;

                function submit();

                if($('#videofile')[0].files.length != 0) && (n.length > 1)
                {
                document.getElementById('submit').disabled = false;
                }
                </script>

enter image description here

Upvotes: 0

Views: 824

Answers (5)

Ahs N
Ahs N

Reputation: 8386

Your code had a lot of mistakes. This is your corrected code:

function check() {
  if (document.querySelector('#videofile').files.length != 0 && (document.getElementById("videoTitle").value.length > 1)) {
    document.getElementById('Submit').disabled = false;
  } else {
    document.getElementById('Submit').disabled = true;
  }
}

Here is the JSFiddle demo

  • Missing ID added (u added only name attribute, and forgot the ID while still trying to use them)
  • Changed 'submit' in code to 'Submit'
  • Remove JQuery $ syntax
  • Validation on keypress rather than on submit click (which doesn't makes sense since u cant click the button while its disabled)
  • Else code added to re-disable the button if conditions are not valid

Upvotes: 2

Rayon
Rayon

Reputation: 36609

onclick event over submit button does not make sense here. You must listen change event of the file input and keyup event of the text input and apply conditions accordingly. You have not assigned id attribute as well(videoTitle)

Also note that click handler will not be invoked if the button is disabled

Try this:

 var submitBtn = document.getElementById('Submit');

 function enableDisable() {
   var elem = document.getElementById('videofile');
   var n = document.getElementById('videoTitle').value;
   if (elem.files.length && n) {
     submitBtn.disabled = false;
   } else {
     submitBtn.disabled = true;
   }
 }
<form action="upload.php" method="post" enctype="multipart/form-data">
  <label for="file"><span></span></label>
  <input type="file" name="videofile" id="videofile" onchange='enableDisable()' />
  <br/> Please enter video title:
  <br/>
  <input type="text" name="videoTitle" id='videoTitle' onkeyup='enableDisable()' />
  <br />
  <input type="button" disabled id="Submit" value="Submit" />
</form>

Upvotes: 1

SarangK
SarangK

Reputation: 690

I feel this is a bit simpler way to achieve this

<script>
    document.getElementById("submit").style.pointerEvents = "none"; //Disable
    var n=document.getElementById('videoTitle').value;

    function submit();

        if($('#videofile')[0].files.length != 0) && (n.length > 1)
        {
            document.getElementById("submit").style.pointerEvents = "all"; //Enable
        }
</script>

Just replace your script with this one & try..

Hope this works for you..

Upvotes: 0

vamshi krishna kurella
vamshi krishna kurella

Reputation: 332

you should use change event for text and videofile elements. So that whenever you modify something, change event is triggered and ur condition is checked inside it. Submit button is enable according to it.

Se the below code for reference!

    <form action="upload.php" method="post" enctype="multipart/form-data">
    <label for="file"><span></span></label>
    <input type="file" name="videofile" id="videofile" />
    <br/>
    Please enter video title:
    <br/>
    <input type"text" name="videoTitle" id="videoText"/>
    <br />
    <input type="button" disabled id="Submit" value="Submit" onclick="submit()"/>
    </form>

                    <script>

                    document.getElementById('submit').disabled = true;
                    var n=document.getElementById('videoTitle').value;

                    function submit();

    $('#videofile').change(function() {
          if($('#videofile')[0].files.length != 0) && (n.length > 1) {
              document.getElementById('submit').disabled = false;
          } else {
              document.getElementById('submit').disabled = true;
          }
    });

    $('#videoText').change(function() {
          if($('#videofile')[0].files.length != 0) && (n.length > 1) {
              document.getElementById('submit').disabled = false;
          } else {
              document.getElementById('submit').disabled = true;
          }
    });

                    </script>

Upvotes: 0

user4454229
user4454229

Reputation:

Can you try to make your submit function do something?

function submit() {
    if($('#videofile')[0].files.length != 0) && (n.length > 1) {
        document.getElementById('submit').disabled = false;
    }
};

Upvotes: 0

Related Questions