CODEWITHSUNDEEP
jqueryhtmlcssforms
MichalDusza
MichalDusza

Reputation: 15

Change the button's color after fill out the form

I am wondering if I can change the color of the button after everything in form is filled in. I think I have to do it with jQuery, but I'm not sure how to do it.

here is my code for the form:

 <form action="">
    <div>
      <label for="name"></label>
      <input type="text" id="name" name="user_name" placeholder="  Full Name">
    </div>
    <div>
      <label for="mail"></label>
      <input type="email" id="mail" name="user_mail" placeholder="  Email Address">
    </div>
    <div>
      <label for="message"></label>
      <textarea name="user_message" id="message" cols="30" rows="10" placeholder="  Let me know what's on your mind"></textarea>
    </div>
    <div class="sendButton">
      <button class="btn" type="submit" disabled="disabled">Send</button>
    </div>
  </form>

and the Jquery which I have for now (I know it is not completed but I don't know how to do it)

    $("input[type='text'], textarea").on("keyup", function () {
  if ($(this).val() != "" && $("textarea").val() != "") {
    $(".btn").removeAttr("disabled");
  } else {
    $(".btn").attr("disabled", "disabled");
  }
});

I want a button (.btn) to change its background color to purple.

Upvotes: 1

Views: 5590

Answers (5)

benb
benb

Reputation: 783

I would suggest controlling the colour of the button using a class on the containing form element. This will give you some flexibility to show or hide or restyle other content when the form is in it's incomplete state.

I've also used a css class to target the form fields that you want to check, in case you want fields that are optional.

$(function() {
  // listen to the keydown event which will bubble up to the containing 
  // form element
  $('#myForm').on('keydown', function() {
    // set a flag
    var hasAnEmptyField = false;
    // iterate through each 'required input' and check if it's value 
    // is 'falsey' (i.e. empty)
    $('.requiredInput').each(function() {
      if (!this.value) {
          // update the flag if this input has no value
          hasAnEmptyField = true
      }
    });
    
    // use the flag to decide whether or not to have a class on the 
    //form element
    if (hasAnEmptyField) {
      $('#myForm').addClass('is-incomplete')
      // could also disable the button here.
    } else {
      $('#myForm').removeClass('is-incomplete')
      // optionally re-enable button here.
    }
  });

})
.btn {
  background-color: green;
  border: 0;
  color: white
}
.is-incomplete .btn {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="myForm" class="is-incomplete">
    <div>
      <label for="name"></label>
      <input type="text" id="name" class="requiredInput" name="user_name" placeholder="  Full Name">
    </div>
    <div>
      <label for="mail"></label>
      <input type="email" id="mail" class="requiredInput" name="user_mail" placeholder="  Email Address">
    </div>
    <div>
      <label for="message"></label>
      <textarea name="user_message" class="requiredInput" id="message" cols="30" rows="10" placeholder="  Let me know what's on your mind"></textarea>
    </div>
    <div class="sendButton">
      <button class="btn" type="submit" disabled="disabled">Send</button>
    </div>
  </form>

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4452

You can call a function() in each input>keyup (I prefer input event), to check all inputs were filled.
Check https://fiddle.jshell.net/kgm3hs9k/4/
Hope it help.
Cheers

Working example:

$("input[type='text'], textarea").on("input", function () {    	
  canChangeColor();
});


function canChangeColor(){  
  	
  var can = true;  

  $("input[type='text'], textarea").each(function(){
     if($(this).val()==''){
        can = false;
     }
  });
  
  if(can){
    $('.btn').css({background:'red'})
  }else{
    $('.btn').css({background:'transparent'})
  }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="">
    <div>
      <label for="name"></label>
      <input type="text" id="name" name="user_name" placeholder="  Full Name">
    </div>
    <div>
      <label for="mail"></label>
      <input type="email" id="mail" name="user_mail" placeholder="  Email Address">
    </div>
    <div>
      <label for="message"></label>
      <textarea name="user_message" id="message" cols="30" rows="10" placeholder="  Let me know what's on your mind"></textarea>
    </div>
    <div class="sendButton">
      <button class="btn" type="submit" disabled="disabled">Send</button>
    </div>
  </form>

Upvotes: 1

VladimirBalun
VladimirBalun

Reputation: 131

Of course, you can do it:

var inputName = $("#name");
var inputMail = $("#mail");
var textareaMessage = $("#message");
var btn = $(".btn");

inputName.change(function(){
    if(isValidForm()){
        btn.css("background-color" : "...");
    } else {
        // If necessary, the user will again remove the data
        btn.css("background-color" : "...");
    }
});

inputMail.change(function(){
    if(isValidForm()){
        btn.css("background-color" : "...");
    } else {
        // If necessary, the user will again remove the data
        btn.css("background-color" : "...");
    }
});

textareaMessage.change(function(){
    if(isValidForm()){
        btn.css("background-color" : "...");
    } else {
        // If necessary, the user will again remove the data
        btn.css("background-color" : "...");
    }
});

function isValidForm(){
    return (inputName.val() & inputMail.val() & textareaMessage.val() != "");
}

Upvotes: 1

helb
helb

Reputation: 3234

The easy way is to check all the values on each change. It can be slow for very large forms, however:

function allFilled() {
  var filled = true; // let's assume the form is complete…
  $("form input[type=text], form textarea").each(function() { //…and go through each of its fields
    if ($(this).val() === "") { // if a field is empty
      filled = false; // flip the variable to false
    }
  });
  return filled;
}

$("form input[type=text], form textarea").on("input", function() { // on every form change ('input' works better than 'keyup' here, because it handles cases like paste or autofill)
  if (allFilled()) { // if everything is filled (see functiuon above)
    $(".btn").addClass("completed"); // add a class to button, causing it to change background
  } else {
    $(".btn").removeClass("completed"); // if not, remove the background (happens if some field is cleared)
  }
});
.btn.completed {
  background: crimson;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
    <div>
      <label for="name"></label>
      <input type="text" id="name" name="user_name" placeholder="  Full Name">
    </div>
    <div>
      <label for="mail"></label>
      <input type="email" id="mail" name="user_mail" placeholder="  Email Address">
    </div>
    <div>
      <label for="message"></label>
      <textarea name="user_message" id="message" cols="30" rows="10" placeholder="  Let me know what's on your mind"></textarea>
    </div>
    <div class="sendButton">
      <button class="btn" type="submit" disabled="disabled">Send</button>
    </div>
  </form>

Upvotes: 0

M.Nabeel
M.Nabeel

Reputation: 1066

Try this Give your input fields the same class in my case I gave it "mandatoryfields"

< input type="text" id="name" class="mandatoryfields" name="user_name" placeholder="  Full Name">

Script

$(".mandatoryfields").on("keyup", function () {
    if($(this).val()==''){
    $('.btn').css({background:'red'})
  }
else{
    $('.btn').css({background:'transparent'})
  }

});

Upvotes: 3

Related Questions