Скрыть элемент в iframe, когда установлен флажок - PullRequest
Новая
       1

Скрыть элемент в iframe, когда установлен флажок

0 голосов
/ 09 октября 2019

Я работаю над собственным генератором подписи (электронной почты). Все работает, кроме одного функционала. Когда пользователь установит флажок, поле с номером телефона должно исчезнуть. JS выглядит следующим образом: 

<script>
$(document).ready(function(){
    $('form').on('submit', function(e){
        e.preventDefault();

        var imie = $('input[name="imie"]').val(),
            stanowisko = $('input[name="stanowisko"]').val(),
            telefon = $('input[name="telefon"]').val(),
            email = $('input[name="email"]').val();

        var iframe = $('iframe#emailSignature').contents();

        iframe.find('#imie').text(imie);
        iframe.find('#stanowisko').text(stanowisko);
        iframe.find('#telefon').text(telefon);
        iframe.find('#email').attr('href', 'mailto:' + email).text(email);

            $("#hide_phone_no").click(function () {
                if ($(this).is(":checked")) {
                    iframe.find("#disable_phone").hide();
                } else {
                    iframe.find("#disable_phone").show();
                }
            });

    });
});

id «disable_phone» относится к объекту в iframe, который имеет 2x TD.

Почему это не работает?

РЕДАКТИРОВАТЬ: ниже вы можете найти HTML-код как для index.html, так и для содержимого iframe

index.html 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
    body {
        font-family: 'Montserrat', sans-serif;
    }
    label {
        display: block;
    }
    table {
        border-bottom:10px solid #ffa312;
        margin-bottom:40px;
    }
    #gen_form {
        background:#e6e6e6;
        padding:0 1em;
    }
</style>
<script>
    $(document).ready(function(){
        $('form').on('submit', function(e){
            e.preventDefault();

            var imie = $('input[name="imie"]').val(),
                stanowisko = $('input[name="stanowisko"]').val(),
                telefon = $('input[name="telefon"]').val(),
                email = $('input[name="email"]').val();

            var iframe = $('iframe#emailSignature').contents();

            iframe.find('#imie').text(imie);
            iframe.find('#stanowisko').text(stanowisko);
            iframe.find('#telefon').text(telefon);
            iframe.find('#email').attr('href', 'mailto:' + email).text(email);

                $("#hide_phone_no").click(function () {
                    if ($(this).is(":checked")) {
                        iframe.find("#disable_phone").hide();
                    } else {
                        iframe.find("#disable_phone").show();
                    }
                });

        });
    });
</script>
</head>
<body>
    <form autocomplete="off" id="gen_form">
        <table width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top">
                    <h3>1. Wypełnij formularz:</h3>
                    <div class="row">
                        <label for="">Imię i nazwisko:</label>
                        <input type="text" placeholder="" name="imie" autocomplete="off">
                    </div>
                    <div class="row">
                        <label for="">Stanowisko:</label>
                        <input type="text" placeholder="" name="stanowisko" autocomplete="off">
                    </div>
                    <div class="row">
                        <label for="">Numer telefonu (+48 XXX XXX XXX)</label>
                        <input type="text" placeholder="" name="telefon" autocomplete="off">
                    </div>
                    <div class="row">
                        <label for="">Adres email:</label>
                        <input type="text" placeholder="" name="email" autocomplete="off">
                    </div>
                    <div class="row">
                        <label for="">Zaznacz pole jeżeli chcesz ukryć telefon:</label>
                        <input type="checkbox" id="hide_phone_no" name="hidephone">
                    </div>                
                    <br><br>
                </td>
                <td valign="top">
                    <h3>2. Kliknij w przycisk poniżej:</h3>
                    <div class="row">
                        <button type="submit">Generuj!</button>
                    </div>
                </td>
                <td valign="top">
                    <h3>3. Wykonaj poniższe kroki:</h3>
                    <ol>
                        <li>Kliknij w dowolnym (niepodlinkowanym) miejscu na wygenerowanej niżej stopce</li>
                        <li>CTRL + A i CTRL + C</li>
                        <li>Skopiowaną treść wklej za pomocą CTRL + V w używanym kliencie pocztowym</li>
                    </ol>
                </td>
            </tr>
        </table>
        <p>Wizualizacja stopki:</p>
    </form>
    <iframe src="email_signature.html" width="100%" height="350" frameborder="0" id="emailSignature" name="emailSignature"></iframe>
</body>
</html>

Тогда у нас есть содержимое iframe: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="400" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="100" valign="middle">
                <a href="https://qubicgames.com" target="_blank">
                    <img src="https://colorfill.pl/qubicgames/qg-logo.jpg" alt="QubicGames" width="90" height="90" style="display:block;border:0;">
                </a>
            </td>

            <td>
                <table cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif;font-size: small; line-height:1.5em; color:#000000;">
                    <tbody>
                        <tr>
                            <td id="imie" height="24" valign="top" style="font-size:14px;line-height:1.5em;">
                                Joanna Przykładowa
                            </td>
                        </tr>
                        <tr>
                            <td height="24" valign="top" style="font-size:12px;line-height:1.5em;border-bottom:1px solid #ffa312;">
                                <strong id="stanowisko">Head of Design</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif;font-size: 10px; padding-top:5px;line-height:1.5em; color:#000000;">
                                    <tbody>
                                        <tr id="disable_phone">
                                            <td width="27" style="font-weight:bold;color:#ffa312;">
                                                m.
                                            </td>
                                            <td id="telefon">
                                                +48 123 456 789
                                            </td>                                        
                                        </tr>
                                        <tr>
                                            <td width="27" style="font-weight:bold;color:#ffa312;">
                                                e.
                                            </td>
                                            <td>
                                                <a id="email" href="mailto:j.przykładowa@qubicgames.com" target="_blank" style="color:#000000;text-decoration:underline;">j.przykładowa@qubicgames.com</a>
                                            </td>

                                        </tr>
                                        <tr>
                                            <td width="27" style="font-weight:bold;color:#ffa312;">
                                                w.
                                            </td>
                                            <td>
                                                <a href="https://qubicgames.com" target="_blank" style="color:#000000;text-decoration:underline;">www.qubicgames.com</a>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size:10px;line-height:1.5em;font-weight:bold;padding-top:5px;">
                                QubicGames S.A. / Poland
                            </td>
                        </tr>
                        <tr>
                            <td height="44" valign="middle">
                                <table cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td width="30">
                                                <a href="https://www.facebook.com/QubicGamespl" target="_blank">
                                                    <img src="https://colorfill.pl/qubicgames/fb.png" alt="Facebook" width="20" height="20" style="display:block;border:0;">
                                                </a>
                                            </td>
                                            <td width="30">
                                                <a href="https://twitter.com/QubicGamespl" target="_blank">
                                                    <img src="https://colorfill.pl/qubicgames/tw.png" alt="Twitter" width="20" height="20" style="display:block;border:0;">
                                                </a>
                                            </td>
                                            <td width="30">
                                                <a href="https://www.instagram.com/QubicGamespl/" target="_blank">
                                                    <img src="https://colorfill.pl/qubicgames/in.png" alt="Instagram" width="20" height="20" style="display:block;border:0;">
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <!--<tr>
                            <td style="font-size:8px;line-height:15px;">
                                VikingCO Poland, ul. Tęczowa 13/210, 53-601 Wrocław, <br>NIP: 8971793-639, REGON: 022284492, KRS: 0000484436
                            </td>
                        </tr>-->
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 09 октября 2019

в вашем коде disable_phone будет работать только тогда, когда

вы отправите форму, и после этого hide_phone_no установите или снимите флажок

Я исправил ваш код 

$(document).ready(function(){
    $('form').on('submit', function(e){
        e.preventDefault();

        var imie = $('input[name="imie"]').val(),
            stanowisko = $('input[name="stanowisko"]').val(),
            telefon = $('input[name="telefon"]').val(),
            email = $('input[name="email"]').val();

        var iframe = $('iframe#emailSignature').contents();

        iframe.find('#imie').text(imie);
        iframe.find('#stanowisko').text(stanowisko);
        iframe.find('#telefon').text(telefon);
        iframe.find('#email').attr('href', 'mailto:' + email).text(email);
        hideShowPhoneNo(iframe)

    });
    $("#hide_phone_no").click(function () {
        var iframe = $('iframe#emailSignature').contents();
        hideShowPhoneNo(iframe)
   });

    function hideShowPhoneNo(iframe){
        if ($("#hide_phone_no").is(":checked")) {
            iframe.find("#disable_phone").hide();
        } else {
            iframe.find("#disable_phone").show();
        }
    }

});
0 голосов
/ 09 октября 2019

Проверьте ваше «это» в вашей функции обратного вызова. Может быть, использовать функцию стрелки или связать ее.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...