How to select input Value empty and not empty using JavaScript?

Question

How to select input:empty and input:not(:empty) value after click on submit button and add following conditions:

If value is empty, after click change background color.

(It's not working as you can see in the input Text3)
If value is not empty, after click add these three conditions:

(It's not working in my sample code)

• {cursor: not-allowed;} • readonly • Change Background color

Here is my sample code:

		$(".signupbtn").on('click', function() {
		    $("input").filter(function() {
		        return this.value.length !== 0;
		    }).val("Successfully Received!");
		    $("input:empty")
		        .css("background", "rgb(255,220,200)");

		    $("input:not(:empty)").style.cursor = "not-allowed";
		    $("input:not(:empty)")
		        .css("background", "rgb(220,20,60)");
		})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<form action="" method="POST" onsubmit="return false;">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
	<button type="submit" class="signupbtn">Sign Up</button>
	</form>

You’re already using .css correctly. Now read the error in the console and correct that too. — Sebastian Simon
– Sebastian Simon, Commented Jan 25, 2018 at 20:41

Andam · Accepted Answer · 2018-01-25 20:56:56Z

2

Here is a slightly modified version of your code. First select all the input tags with type of text then see if their length is 0 or not on this apply what you want to it.

$(".signupbtn").on('click', function() {
   $('input:text').each(function(){
   
      if($(this).val().length == 0 ){
        $(this).css("background", "red");
      }else{
        $(this).val("Successfully Received!");
        $(this).css("background", "green");
        $(this).css("cursor","not-allowed");
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
	<button type="submit" class="signupbtn">Sign Up</button>
</form>

answered Jan 25, 2018 at 20:56

Andam

2,1971 gold badge10 silver badges28 bronze badges

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

1 Comment

Jomla Over a year ago

Thank you Andam, nice way to select all input tags first. Thank you for your suggestion.

sricheta ruj · Accepted Answer · 2018-01-25 20:43:59Z

		$(".signupbtn").on('click', function() {
		    $("input").filter(function() {
		        return this.value.length !== 0;
		    }).val("Successfully Received!");
		    $("input:empty")
		        .css("background", "rgb(255,220,200)");

		    $("input:not(:empty)").css("cursor","not-allowed");
		    $("input:not(:empty)")
		        .css("background", "rgb(220,20,60)");
		})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<form action="" method="POST" onsubmit="return false;">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
	<button type="submit" class="signupbtn">Sign Up</button>
	</form>

Collectives™ on Stack Overflow

How to select input Value empty and not empty using JavaScript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related