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

Question

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

Navigation

#1 by (2 votes)
#2 by (2 votes)

0

How should I proceed with logic?

There is a data record form on the page, namely:

Name
Surname
Age
Mobile

I need to leave these fields as follows:

1- When the page loads the Last name , Age and Cell phone fields should be disabled

2 Click and fill in the next field below should be enabled

3- And so on, for others, being successively

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

NOTE - When the form receives the submit event, all fields [name, last name, age and cell phone] become inaccessible.

To have 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 mysql javascript ajax

asked by anonymous 20.04.2018 / 01:02

2 answers

2

Enables text field at a time when filled, and disables subsequent fields when cleaning 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><formclass="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 want to validate the number of characters in the inputs as well

Change this line

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

For this

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><formclass="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>

20.04.2018 / 05:15

Help with PHP and MongoDB Problems with NaN return in JavaScript

score 2 · Accepted Answer

With JQuery you can do this (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><formonsubmit="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 at 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>

It would look like this: link