javascript – disable button with multiple inputs-ThrowExceptions

Exception or error:

I’m checking the inputs with javascript. It writes if an input is too long, and also disables the submit button. The problem is, if the first input disables the button and I start to write in the second input, it overwrites the the first one and the button will be enabled until I reach the max length of the second input aswell.
Here are two of my inputs:

<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength1()">
<p id="nev"><span style="color: red;">max 5 characters</span></p>

<input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength2()">
<p id="munka"><span style="color: red;">max 5</span></p>

and the javascript that makes the

class visible/invisible and also sets the button to enabled/disabled:

<script>
    document.getElementById('nev').setAttribute('style', 'display: none');
    document.getElementById('munka').setAttribute('style', 'display: none');
</script>
<script>
var checkLength1 = function () {
  if (document.getElementById('name').value.length > 5) {
    document.getElementById('nev').setAttribute('style', 'display: block');
    document.getElementById("send").disabled = true;
  } else {
    document.getElementById('nev').setAttribute('style', 'display: none');
    document.getElementById("send").disabled = false;
  }

}
</script>

<script>
var checkLength2 = function () {
  if (document.getElementById('job').value.length > 5) {
    document.getElementById('munka').setAttribute('style', 'display: block');
    document.getElementById("send").disabled = true;
  } else {
    document.getElementById('munka').setAttribute('style', 'display: none');
    document.getElementById("send").disabled = false;
  }

}
</script>

and the button:

<button type="submit" class="btn btn-primary btn-xl" id="send">Send</button>

EDIT:
full code:

<script>
    document.getElementById('nev').setAttribute('style', 'display: none');
    document.getElementById('munka').setAttribute('style', 'display: none');
    document.getElementById('mail').setAttribute('style', 'display: none');
    document.getElementById('telo').setAttribute('style', 'display: none');
    document.getElementById('telo2').setAttribute('style', 'display: none');
    document.getElementById('cim').setAttribute('style', 'display: none');
    document.getElementById('leiras').setAttribute('style', 'display: none');
    document.getElementById('iranyitoszam').setAttribute('style', 'display: none');

  var checkLength = function() {
  var name = document.getElementById('name').value;
  var job = document.getElementById('job').value;
  var job = document.getElementById('email').value;
  var job = document.getElementById('phone').value;
  var job = document.getElementById('phone2').value;
  var job = document.getElementById('address').value;
  var job = document.getElementById('description').value;
  var job = document.getElementById('zipcode').value;

  document.getElementById("send").disabled = name.length > 5 || job.length > 5 || email.length > 5 || phone.length > 5 || phone2.length > 5 || address.length > 5 || description.length > 5 || zipcode.length > 5;
  document.getElementById('nev')
    .setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
  document.getElementById('munka')
    .setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('mail')
    .setAttribute('style', email.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('telo')
    .setAttribute('style', phone.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('telo2')
    .setAttribute('style', phone2.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('cim')
    .setAttribute('style', address.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('leiras')
    .setAttribute('style', description.length > 5 ? 'display: block' : 'display: none');
    document.getElementById('iranyitoszam')
    .setAttribute('style', zipcode.length > 5 ? 'display: block' : 'display: none');
}
  </script>
<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength()">
                    <p id="nev"><span style="color: red;">A név maximum 50 karakterből állhat!</span></p>

  <input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength()">
                      <p id="munka"><span style="color: red;">A foglalkozás megnevezése maximum 50 karakterből állhat!</span></p>

 <input class="form-control" id="phone" name="phone"  type="text" required="required" onkeyup="checkLength()">
                      <p id="telo"><span style="color: red;">A telefonszám maximum 20 karakterből állhat!</span></p>

 <input class="form-control" id="phone2"  name="phone2" type="text" onkeyup="checkLength()">
                      <p id="telo2"><span style="color: red;">A másodlagos telefonszám maximum 20 karakterből állhat!</span></p>

<input class="form-control" id="email" name="email" type="email" onkeyup="checkLength()">
                    <p id="mail"><span style="color: red;">Az Email cím maximum 50 karakterből állhat!</span></p>

 <input class="form-control" id="zipcode" name="zipcode" type="text" onkeyup="checkLength()">
                      <p id="iranyitoszam"><span style="color: red;">Az irányítószám maximum 4 karakterből állhat!</span></p>

<input class="form-control" id="address" name="address" type="text" onkeyup="checkLength()">
                      <p id="cim"><span style="color: red;">A cím maximum 50 karakterből állhat!</span></p>

 <textarea class="form-control" id="description" name="description" rows="5" required="required" onkeyup="checkLength()"></textarea>
                    <p id="leiras"><span style="color: red;">A leírás maximum 500 karakterből állhat!</span></p>
How to solve:

You can update the onkeyup on both input to use one method named checkLength() and use few lines of code:

document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');

var checkLength = function() {
   var name = document.getElementById('name').value;
   var job = document.getElementById('job').value;

   document.getElementById("send").disabled = name.length > 5 || job.length > 5;
   document.getElementById('nev').setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
   document.getElementById('munka').setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
}

Demo:

document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');

var checkLength = function() {
  var name = document.getElementById('name').value;
  var job = document.getElementById('job').value;

  document.getElementById("send").disabled = name.length > 5 || job.length > 5;
  document.getElementById('nev')
    .setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
  document.getElementById('munka')
    .setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm form-group">
      <input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength()">
      <p id="nev"><span style="color: red;">max 5 characters</span></p>
    </div>
    <div class="col-sm form-group">
      <input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength()">
      <p id="munka"><span style="color: red;">max 5</span></p>
    </div>
    <div class="col-sm form-group">
      <button type="button" class="btn btn-primary btn-xl" id="send">Send</button>
    </div>
  </div>
</div>

EDIT:

You have to rename your variables also:

var name = document.getElementById('name').value;
  var job = document.getElementById('job').value;
  var job = document.getElementById('email').value;
  var job = document.getElementById('phone').value;
  var job = document.getElementById('phone2').value;
  var job = document.getElementById('address').value;
  var job = document.getElementById('description').value;
  var job = document.getElementById('zipcode').value;

to this:

var name = document.getElementById('name').value;
  var job = document.getElementById('job').value;
  var email = document.getElementById('email').value;
  var phone = document.getElementById('phone').value;
  var phone2 = document.getElementById('phone2').value;
  var address = document.getElementById('address').value;
  var description = document.getElementById('description').value;
  var zipcode = document.getElementById('zipcode').value;

###

You have to check for both inputs lengths in both checkLength functions :

document.getElementById('name').value.length > 5 || document.getElementById('job').value.length > 5
document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');

var checkLength1 = function() {
  if (document.getElementById('name').value.length > 5 || document.getElementById('job').value.length > 5) {
    document.getElementById('nev').setAttribute('style', 'display: block');
    document.getElementById("send").disabled = true;
  } else {
    document.getElementById('nev').setAttribute('style', 'display: none');
    document.getElementById("send").disabled = false;
  }

}

var checkLength2 = function() {
  if (document.getElementById('job').value.length > 5 || document.getElementById('name').value.length > 5){
    document.getElementById('munka').setAttribute('style', 'display: block');
    document.getElementById("send").disabled = true;
  } else {
    document.getElementById('munka').setAttribute('style', 'display: none');
    document.getElementById("send").disabled = false;
  }

}
#munka, #nev {
  position: absolute;
}

#munka{
  left: 200px;
}

#nev {
  left: 0;
}
<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength1()">
<p id="nev"><span style="color: red;">max 5 characters</span></p>

<input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength2()">
<p id="munka"><span style="color: red;">max 5</span></p>


<button type="submit" class="btn btn-primary btn-xl" id="send">Send</button>

###

The reason it’s not working is because your logic is wrong.

You should check both at the same time. If the logic passes, then you enable the send button.

So you should adjust your code like so:

if (document.getElementById('name').value.length > 5 && document.getElementById('job').value.length > 5)

It will enable the button ONLY when both inputs have length greater than 5.

###

You can combine both checks in a single function, like this:

document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');

var checkLength1 = function() {
  if (document.getElementById('name').value.length > 5) {
    document.getElementById('nev').setAttribute('style', 'display: block');
    return false;
  } else {
    document.getElementById('nev').setAttribute('style', 'display: none');
    return true;
  }
}

var checkLength2 = function() {
  if (document.getElementById('job').value.length > 5) {
    document.getElementById('munka').setAttribute('style', 'display: block');
    return false;
  } else {
    document.getElementById('munka').setAttribute('style', 'display: none');
    return true;
  }
}

var checkLength = function() {
  var nevOk = checkLength1();
  var munkaOk = checkLength2();
  document.getElementById("send").disabled = !(nevOk && munkaOk);
}
<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength()">
<p id="nev"><span style="color: red;">max 5 characters</span></p>

<input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength()">
<p id="munka"><span style="color: red;">max 5</span></p>

<button id="send">send</button>

###

sorry, i was taken elsewhere. Here is my answer anyway

const myForm     = document.getElementById('my-form')
  ,   btSubmit   = myForm.querySelector('button[type=submit]')
  ,   inControll = [...myForm.querySelectorAll('[data-maxchar]')]
  ;
myForm.oninput=e=>
  {
  btSubmit.disabled = !inControll.reduce((bool,elm)=>bool&&(elm.value.length<=Number(elm.dataset.maxchar)),true)

  let maxChar = Number(e.target.dataset.maxchar || '0')
  if (maxChar>0 && e.target.value.length>maxChar )
    {
    let sp = e.target.nextElementSibling.querySelector('span')
    sp.style.display = 'inline'
    setTimeout(()=>{ sp.style.display=''}, 2500)
    }
  }
textarea + p>span,
input + p>span {
  color: red;
  display: none;
  }
<form action="" id="my-form">

    <input class="form-control" placeholder="név" name="name" type="text" required data-maxchar="50">
    <p><span>A név maximum 50 karakterből állhat!</p>
    
    <input class="form-control" placeholder="foglalkozás megnevezése" name="job" type="text" required data-maxchar="50">
    <p><span>A foglalkozás megnevezése maximum 50 karakterből állhat!</p>
    
    <input class="form-control" placeholder="telefonszám" name="phone"  type="text" required data-maxchar="20">
    <p><span>A telefonszám maximum 20 karakterből állhat!</p>
    
    <input class="form-control" placeholder="másodlagos telefonszám"  name="phone2" type="text" data-maxchar="20">
    <p><span>A másodlagos telefonszám maximum 20 karakterből állhat!</p>
    
    <input class="form-control" placeholder="Email cím" name="email" type="email" data-maxchar="50">
    <p><span>Az Email cím maximum 50 karakterből állhat!</p>
    
    <input class="form-control" placeholder="irányítószám" name="zipcode" type="text" data-maxchar="4">
    <p><span>Az irányítószám maximum 4 karakterből állhat!</p>
    
    <input class="form-control" placeholder="cím" name="address" type="text" data-maxchar="50">
    <p><span>A cím maximum 50 karakterből állhat!</p>

    
    <textarea class="form-control" placeholder="leírás" name="description" rows="5" required data-maxchar="500"></textarea>
    <p><span>A leírás maximum 500 karakte

    <p>  <button type="submit" > submit </button>  </p>
  </form>

Leave a Reply

Your email address will not be published. Required fields are marked *