How to make logic enable text field at a time when filled

Asked

Viewed 123 times

0

How should I proceed with logic?

There is a Data Registration Form on the page, to know:

  • Name
  • Surname
  • Age
  • Cellular

I need to leave these fields as follows:

1- When the tab is loaded the field Surname, Age and Cellular should be disabled

2- When click on and fill in the next field below should be enabled

3- And so on, for the rest, being successively

Finally, when all the fields are filled in, the button will appear submit.

NOTE - When the form receives the event submit return all fields [name, surname, age and mobile phone] to be inaccessible.

To get an Introductory Idea

function Inibe() {
  document.formulario.T1.disabled = true;
}

function Exibe() {
  document.formulario.T1.disabled = false;
}
<form name="formulario">
<p align="center">
<input type="text" name="T1" size="20" onload="Inibe()"></p>
<p align="center">
&nbsp;</p>
<p align="center">
&nbsp;</p>
<p align="center">
<input type="radio" name="a" onClick="Exibe()" value="1">Habilita</p>
<p align="center">
<input type="radio" name="a" onClick="Inibe()" value="2" checked>Desabilita</p>
<p align="center">
&nbsp;</p>
</form>

php javascript mysql ajax

  • One way to do this would be to: 1) set the minimum number of characters for each field 2) count the characters at the time they are typed 3) If the quantity is equal or higher enables the next field, otherwise not. Languages: javascript or jquery

  • @Wilsonrosagomes So Wilson, the means to validate the amount of characters within each field already held in Javascript! Now, if by chance you have a practical example in this segment could post as a response please.

2 answers

2


With Jquery you can do this way (follow the comments):

$($("input").on("change input paste", function(){ //Event handle para quando o usuario escrever algo
    if ($(this).val()){ //Checa se tem valor (truthy)
        let atual = $(this).data("order") //Pega a ordem do input
        $('input[data-order="' + (atual + 1) + '"]').removeAttr("disabled") //Remove o atributo disabled do prox input
    }
    else{
    	$("input[type=submit]").attr("disabled", true) //Adiciona disable ao botão
    }
}))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return false">
<input data-order="1" placeholder="nome">
<input data-order="2" placeholder="sobrenome" disabled>
<input data-order="3" placeholder="idade" disabled>
<input data-order="4" placeholder="celular" disabled>
<input data-order="5" type="submit" disabled>
</form>

See working on Jsfiddle.

Now with pure Javascript, using ES6, you can do it this way:

changed = (input) => {
    if (input.value){ //Checa se tem valor (truthy)
        let atual = parseInt(input.getAttribute("data-order")) //Pega a ordem do input
        document.querySelector('input[data-order="' + (atual + 1) + '"]').removeAttribute("disabled") //Remove o atributo disabled do prox input
    }
    else{    document.querySelector("input[type=submit]").setAttribute("disabled", true) //Adiciona disable ao botão
    }
}
<form onsubmit="return false">
<input data-order="1" onchange="changed(this)" oninput="changed(this)" placeholder="nome">
<input data-order="2" onchange="changed(this)" oninput="changed(this)" placeholder="sobrenome" disabled>
<input data-order="3" onchange="changed(this)" oninput="changed(this)" placeholder="idade" disabled>
<input data-order="4" onchange="changed(this)" oninput="changed(this)" placeholder="celular" disabled>
<input data-order="5" type="submit" disabled>
</form>

Would look like this: https://jsfiddle.net/a4tmj2d4/4/

  • 1

    No need to put document.querySelector('input[data-order="' + (atual + 1) + '"]'), just put input.nextElementSibling

2

Enables text field at a time when populated, and disables subsequent ones when clearing a field.

$(document).ready(function() {
  $('.step').on("change input paste", function() {
    next_step = $(this).next('.step');
    all_next_steps = $(this).nextAll('.step');
    // Se o elemento tiver um valor
    if ($(this).val()) {
        // deve também realizar a validação aqui
        next_step.attr('disabled', false);
    }
    // Se o elemento não tiver um valor ou for apagado
    else {
        // limpa o valor de todas as próximas etapas e adiciona disable
        all_next_steps.val('');
        all_next_steps.attr('disabled', true);
    }
  });

  $("#habilita").click(function (){
       // habilita o primeiro campo 
        $("#step1").prop("disabled", false);

    });

    $("#desabilita").click(function (){
       // desabilita e limpa  tudo 
        $('input[id^="step"]').val(''); 
        $('input[id^="step"]').prop("disabled", true);
        
        /******BONUS******/
        $('#step6').attr('disabled','disabled');
        $('#step6').val('');
        /****************/
 

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="formulario">
    <!-- Comece apenas com o primeiro habilitado -->
    <input type="text" class="step" id="step1" name="T1" disabled/>
    <input type="text" class="step" id="step2" disabled />
    <input type="text" class="step" id="step3" disabled />
    <input type="text" class="step" id="step4" disabled />
    <input type="text" class="step" id="step5" disabled />
    
    <!--*******Bonus********-->
    <select id="step6" class="step" data-id="cazzo" disabled>
        <option value="">Escolha um</option>
        <option value="Leo">Leo</option>
        <option value="Francisco">Francisco</option>
    </select>
    <!--*******************-->
    

<input type="radio" name="a" value="1" id="habilita">Habilita
<input type="radio" name="a" id="desabilita" checked>Desabilita

</form>

If you also want to validate the number of characters in the inputs

change that line

if ($(this).val()) {

for that

if (($(this).val())&&($(this).val()).length>3) {

length>3 means number of characters above 3

$(document).ready(function() {
  $('.step').on("change input paste", function() {
    next_step = $(this).next('.step');
    all_next_steps = $(this).nextAll('.step');

    if (($(this).val())&&($(this).val()).length>3) {
        next_step.attr('disabled', false);
    }
    // Se o elemento não tiver um valor ou for apagado
    else {
        all_next_steps.val('');
        all_next_steps.attr('disabled', true);
    }
  });

  $("#habilita").click(function (){
        $("#step1").prop("disabled", false);
    });

    $("#desabilita").click(function (){
        $('input[id^="step"]').val(''); 
        $('input[id^="step"]').prop("disabled", true);
        
        /******BONUS******/
        $('#step6').attr('disabled','disabled');
        $('#step6').val('');
        /****************/
 
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="formulario">
    <!-- Comece apenas com o primeiro habilitado -->
    <input type="text" class="step" id="step1" name="T1" disabled/>
    <input type="text" class="step" id="step2" disabled />
    <input type="text" class="step" id="step3" disabled />
    <input type="text" class="step" id="step4" disabled />
    <input type="text" class="step" id="step5" disabled />
    
    <!--*******Bonus********-->
    <select id="step6" class="step" data-id="cazzo" disabled>
        <option value="">Escolha um</option>
        <option value="Leo">Leo</option>
        <option value="Francisco">Francisco</option>
    </select>
    <!--*******************-->

<input type="radio" name="a" value="1" id="habilita">Habilita
<input type="radio" name="a" id="desabilita" checked>Desabilita

</form>

Browser other questions tagged php javascript mysql ajax

You are not signed in. Login or sign up in order to post.