Box of two form options

Asked

Viewed 62 times

0

I have a form that presents a box that has two options, one represents accepted and the other unaccepted. It turns out that when the user uses to send the email he can send even with the button marking unaccepted. Is there any way I can make it worth my while?

HTML:

<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>
   <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" />
   <input type="text" 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">
      <span class="checkbox-value-checked" style="font-size: 12px">Li e aceito a politica de privacidade</span>
      <span class="checkbox-value-unchecked">Não aceito</span> 
      </span>
   </div>
   <button class="button button-navy-blue send-quote" type="button">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>

Javascript:

$('.send-quote').click(function() {

    var quoteForm = $(this).parent();
    var quoteFormParent = quoteForm.parent().parent();

    var insuranceType = quoteFormParent.data('quote-form-for');
    var fields = {};
    var fieldID = 0;

    var fieldName = '';
    var fieldValue = '';

    var clientName = '';
    var clientEmail = '';

    var errorFound = false;

    quoteForm.find('.quote-form-element').each(function(fieldID) {

        fieldName = $(this).attr('name');
        if (typeof fieldName == 'undefined' || fieldName === false) {

            fieldName = $(this).data('name');
        }

        if ($(this).hasClass('checkbox')) {

            fieldValue = $(this).data('checked') == 'yes' ? $(this).children('.checkbox-values').children('.checkbox-value-checked').text() : $(this).children('.checkbox-values').children('.checkbox-value-unchecked').text();
        } else {

            fieldValue = $(this).is('input') || $(this).is('select') ? $(this).val() : $(this).text();
            if (($(this).is('input') && fieldValue == '') || ($(this).is('select') && fieldValue == '-')) {

                errorFound = true;
                $(this).addClass('error');
            } else {

                $(this).removeClass('error');
            }
        }

        if ($(this).hasClass('quote-form-client-name')) clientName = $(this).val();
        if ($(this).hasClass('quote-form-client-email')) clientEmail = $(this).val();

        fields[fieldID] = {
            'name': fieldName,
            'value': fieldValue
        };
        fieldID++;

    });

    if (errorFound == false) {

        $.ajax({
            url: '_assets/submit.php',
            data: {
                'send': 'quote-form',
                'values': fields,
                'clientName': clientName,
                'clientEmail': clientEmail
            },
            type: 'post',
            success: function(output) {

                quoteForm.children('.quote-form-thanks').fadeIn(300);
            }

        });
    }

});

Page which displays the contents in the menu Simulation.

  • Usually it’s just a checkbox, if you don’t check it, the form doesn’t allow it to be sent...

  • I didn’t understand why it uses the <span> in < input type="checkbox" />, then it would only be to perform the validation of which input is checked. If I didn’t get it wrong.

  • uses the Event.PreventDefault() if the checkbox is checked. It will prevent your form from being sent.

  • if I don’t accept you from a $("#iddoform").hide(); in onclik fo jquery

No answers

Browser other questions tagged

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