Button available when filling fields

0

Good afternoon,

How can I make the send message button available only when the user populates all fields correctly?

     <h2>Quero um <span>Automóvel</span></h2>
                            <div class="form">

                                <h4>Valor do consórcio: <span class="slider-value quote-form-element" data-name="Valor | Automóvel"
                                        data-slider-id="consorcio-auto">R$ <span></span></span>
                                </h4>
                                <div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>

                                <h4>Seus dados:</h4>
                                <form>
                                <input type="text" name="Nome" placeholder="Nome..." class="quote-form-element" />
                                <input type="text" name="Cidade" placeholder="Cidade/UF..." class="quote-form-element quote-form-client-email last" />
                                <input type="text" name="Número de Telefone" placeholder="Telefone..." class="quote-form-element telefone" data-mask="(00) 0000-0000"
                                />
                                <input type="text" name="Endereço de Email" placeholder="E-mail..." class="quote-form-element quote-form-client-email last contact_email"
                                />
                                </form>


                                <h4>Política de Privacidade</h4>
                                <div class="checkbox quote-form-element" data-checked="yes" data-name="Política de Privacidade">

                                    <span class="checkbox-status"><i class="fa fa-check"></i></span>
                                    <span class="checkbox-values">


                                <button class="button button-navy-blue send-quote" type="submit">Simular meu consórcio <i class="fa fa-paper-plane-o"></i></button>



                                <div class="quote-form-thanks">

                                    <div class="quote-form-thanks-content">

                                        Obrigado pelo seu interesse, retornaremos em breve ;).
                                        <span class="quote-form-thanks-close">Fechar</span>

                                    </div>

                                </div>

                            </div>

Link in Fiddle .

Page that the content is found.

    
asked by anonymous 15.08.2016 / 22:12

2 answers

2

First you put the "disabled" attribute to disable the button. Then you verify with javascript if all fields have been filled, if so, you enable. With a single field, it would basically be like this:

$("input[type=text]").on('change', function() {   
  if($(".nome").val()) {
    $(".send-quote").prop("disabled", false);
  }
});

Already with all your fields, I set up there in your jsFiddle

    
15.08.2016 / 22:37
1

html

<h2>Quero um <span>Automóvel</span></h2>
                        <div class="form">

                            <h4>Valor do consórcio: <span class="slider-value quote-form-element" data-name="Valor | Automóvel"
                                    data-slider-id="consorcio-auto">R$ <span></span></span>
                            </h4>
                            <div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>

                            <h4>Seus dados:</h4>



                            <form name="cadastrar">
                            <input type="text" id="idNome" onchange="validarCadastrar()" name="Nome" placeholder="Nome..." class="quote-form-element" />
                            <input type="text" id="idCidade" onchange="validarCadastrar()" name="Cidade" placeholder="Cidade/UF..." class="quote-form-element quote-form-client-email last" />
                            <input type="text" id="idTelefone" onchange="validarCadastrar()" name="Número de Telefone" placeholder="Telefone..." class="quote-form-element telefone" data-mask="(00) 0000-0000"
                            />
                            <input type="text" id="idEmail" onchange="validarCadastrar()" name="Endereço de Email" placeholder="E-mail..." class="quote-form-element quote-form-client-email last contact_email"
                            />



                            <h4>Política de Privacidade</h4>
                            <div class="checkbox quote-form-element" data-checked="yes" data-name="Política de Privacidade">

                                <span class="checkbox-status"><i class="fa fa-check"></i></span>
                                <span class="checkbox-values">


                            <button id="idButton"  class="button button-navy-blue send-quote" type="submit" disabled>Simular meu consórcio <i class="fa fa-paper-plane-o"></i></button>
</form>

js

function validarCadastrar(){
var nomeVazio = idNome.value;
var cidadeVazio = idCidade.value; 
var telefoneVazio = idTelefone.value;
var emailVazio = idEmail.value;

if( !(nomeVazio == "") && !(cidadeVazio == "") && !(telefoneVazio == "") &&     !(emailVazio == "") ){
document.cadastrar.idButton.disabled=false;}

else{
    document.cadastrar.idButton.disabled=true;
}

}
    
15.08.2016 / 22:39