簡體   English   中英

帶有兩種形式的包裝盒

[英]Box with two form options

我有一個表單,其中顯示一個具有兩個選項的框,一個是“接受”,另一個是“不接受”。 事實證明,當用戶用來發送電子郵件時,他可以使用標記為“不接受”的按鈕來發送電子郵件。 有什么辦法可以使其驗證?

的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>

Java腳本

$('.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);
            }

        });
    }

});

頁面顯示“模擬”中的內容。

因此,您需要檢查是否使用無線電輸入checked “不接受”。

 $('.send-quote').click(function() { if ($('[name=terms]:checked').val() === 'no') { console.log('got an error'); } else { console.log('all good'); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="terms" value="yes" checked></input> <label for="terms">Do accept terms</label> <br> <input type="radio" name="terms" value="no"></input> <label for="terms">Don't accept terms</label> <br> <button type="button" class="send-quote">Send Quote</button> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM