Javascript button submit after first textbox is filled in does not change color of next textbox

user_8619699 0
Viewed 50

I have found help here before and I am totally new to coding in general. I am writing a Javascript script to change colours when I insert text. When there is text, the first one goes red. I want all of them to go to red. And when they are filled in they must go blue one by one. I have used an if statement for this. Should I rather look at a different method? 

function btnSubmit(input) {
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var message = document.getElementById('message');

    if (name.value == '') {

      name.style.borderColor = 'red';
      return false;

      // stop submission until textbox is not ''
    }else{
      name.style.borderColor = 'blue';
      return false;
    }

    if (email.value == '') {
      email.style.borderColor = 'red';
      return false;
    }else{
      email.style.borderColor = 'blue';
      return false;
    }

    if (message.value == '') {
      message.style.borderColor = 'red';
      return false;
    }else{
      message.style.borderColor = 'blue';
      return false;
    }

    if (name.value != '' && email.value != '' && message.value != ''){
      alert('all fields filled in');
      return true;
    }
}
javascript
3 Answers

You should not return false in else statements, return statement stops function execution and all lines after return statement will not get executed. In your code, function btnSubmit will always check name field only as you are have return in both if and else conditions.

You code should be like 

function btnSubmit(input) {
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var message = document.getElementById('message');

    if (name.value == '') {

      name.style.borderColor = 'red';
      return false;
    }else{
      name.style.borderColor = 'blue';
    }

    if (email.value == '') {
      email.style.borderColor = 'red';
      return false;
    }else{
      email.style.borderColor = 'blue';
    }

    if (message.value == '') {
      message.style.borderColor = 'red';
      return false;
    }else{
      message.style.borderColor = 'blue';
    }

    // No need to add this condition as you have already checked all three fields individually
    //if (name.value != '' && email.value != '' && message.value != ''){
      alert('all fields filled in');
      return true;
    //}
}
user_71888580

I'll just show you an example, how to iterate through all your input tags and apply blue or red style to them based on content. It's a more proper way than declaring every input inside your function. I think it's a good point to start, so you need to modify this code a little to get what you want:

function btnSubmit(input) {
  var inputs = document.getElementsByTagName('input')
  var counter = 0;
  
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].value == '') {
      inputs[i].style.borderColor = 'red';
    } else {
      counter++
      inputs[i].style.borderColor = 'blue';
    }
  }

  if (inputs.length === counter) {
    alert('all fields filled in');
  }
}
<input id="name">
<input id="email">
<input id="message">

<button onclick="btnSubmit()">Submit</button>

user_60536540 

var name = document.getElementById('name');
var email = document.getElementById('email');
var message = document.getElementById('message');

var inputs = [name, email, message];

inputs.forEach(function(input) {
  input.addEventListener('change', check);
  input.addEventListener('focusout', check);
});

function check() {
  if (this.value.length === 0) {
    inputs.forEach(function(el) {
      if (el.value.length === 0) el.style.borderColor = 'red'
    });
  } else {
    this.style.borderColor = 'blue';
  }
}
<input id="name" type="text">
<input id="email" type="text">
<input id="message" type="text">

user_27135330
Related