When I put input inside some div the javascript does not work

Question

When I put input inside some div the javascript does not work

Navigation

#1 by (5 votes)
#2 by (0 votes)

4

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

<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><formid="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 in 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 this and fill in both fields the javascript of activating the button does not work. Can someone help me? I need to put these inputs inside their respective divs to stylize the form.

javascript jquery css

asked by anonymous 28.10.2017 / 19:09

2 answers

Using LISP Functional Programming, answer the exercises? Change button color at runtime

score 5 · Answer 1

You must remove the > sign from the selector. When you put the div s, inputs cease to be direct descendants of the #formLog selector 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><formid="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, you would have to do this: $('#formLog > div > input') if you wanted to refer only to input s direct descendants of div s within #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>

score 0 · Answer 2

Two things I could observe:

Inputs have space between the opening tag "< input". You should rule this space.
Since you want to put the effect for any input within the form in question, you should remove the ">" and leave only #formLog input, so any input inside #formLog will take effect.