When I put input inside some div javascript does not work

Question

I want to apply the css in a form but when I put the inputs inside some div javascript does not work See the code: In case when I type the email and the password was for the button to turn blue enabled.

<style>
    .btnDisabled{
        pointer-events:none;
        outline:none;
        border: none;
        background: gray; 
    }
    .btnEnabled{
        outline:none;
        border: none;
        background: blue; color: white;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">< /script>

<form id="formLog" method="post" action="website/login">
    <input type="text" id="txtELog" name="txtELog" placeholder="Userlogin ou E-mail: *" />
    <input type="password" id="txtPassLog" name="txtPassLog" placeholder="Senha: *" />
    <input type="submit" id="btnLog" name="btnLog" value="Login" disabled="disabled" class="btnDisabled" />
</form>

<script>
  $ (' #formLog > input').on('input', function () {
    var emptyLog = false;
    $('form > input, form > select').each(function () {
        if ($('#txtELog').val() == '' || $('#txtPassLog').val() == '') {
            emptyLog = true;
        }
    });
    if (emptyLog) {
        $('#btnLog').attr('disabled', 'disabled');
        $('#btnLog').attr('class', 'btnDisabled');
    } else {
        $('#btnLog').removeAttr('disabled');
        $('#btnLog').attr('class', 'btnEnabled');
    }
});

</script>

I want to do this on the form:

<form id="formLog" method="post" action="website/login">
    <div class="inputText">< input type="text" id="txtELog" name="txtELog" placeholder="Userlogin ou E-mail: *" /></div>
    <div class="inputText">< input type="password" id="txtPassLog" name="txtPassLog" placeholder="Senha: *" /></div>
    <div class="inputButton">< input type="submit" id="btnLog" name="btnLog" value="Login" disabled="disabled" class="btnDisabled" /></div>
</form>

But when I do that and fill in the two fields the javascript on the button doesn’t work. Can anyone help me? I need to put these inputs inside their respective Ivs to style the form.

Answer 1

You have to remove the signal from the dial >. When you put the divs, the inputs are no longer direct descendants of the selector #formLog indicated by the sign >:

$(' #formLog  input').on('input', function () {
	var emptyLog = false;
	$('form input, form select').each(function () {
    	if ($('#txtELog').val() == '' || $('#txtPassLog').val() == '') {
	        emptyLog = true;
    	}
	});
	if (emptyLog) {
		$('#btnLog').attr('disabled', 'disabled');
		$('#btnLog').attr('class', 'btnDisabled');
	} else {
		$('#btnLog').removeAttr('disabled');
		$('#btnLog').attr('class', 'btnEnabled');
	}
});

.btnDisabled{
    pointer-events:none;
    outline:none;
    border: none;
    background: gray; 
}
.btnEnabled{
    outline:none;
    border: none;
    background: blue; color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formLog" method="post" action="website/login">
<div class="inputText"><input type="text" id="txtELog" name="txtELog" placeholder="Userlogin ou E-mail: *" /></div>
<div class="inputText"><input type="password" id="txtPassLog" name="txtPassLog" placeholder="Senha: *" /></div>
<div class="inputButton"><input type="submit" id="btnLog" name="btnLog" value="Login" disabled="disabled" class="btnDisabled" /></div>
</form>

Otherwise I’d have to do it like this: $('#formLog > div > input') if he only wanted to refer to inputs direct descendants of divs within the #formlog.

What is a direct descendant?

It is a child element of the first level of tree:

<div>
   <span> <-- descendente direto da div
      <p></p> <-- descendente direto do span
      <a></a> <-- descendente direto do span
   </span>
   <h1></h1> <-- descendente direto da div
</div>

Answer 2

Two things I could see:

• Inputs are spaced between the "< input" opening tag. You should log this space.
• Since you want to put the effect for any input within the form in question, you should remove the ">" sign and leave only "#formLog input", so any input within #formLog will get the effect.