Получение значения из модальной проблемы

#javascript #php #jquery #bootstrap-modal

#javascript #php #jquery #bootstrap-модальный

Вопрос:

Что я пытаюсь сделать, так это щелкнуть по изображению, и загрузится модальное окно, затем пользователь введет свой адрес электронной почты, я буду использовать его для сохранения в .txt-файл (или позже поместить в базу данных)

Код:

 <p><img src="images/img-get-discount.png" data-toggle="modal" data-target="#optin_modal" alt="Get your discount on <?= htmlspecialchars($this->getTitle()) ?>"></p> 

    <div id="optin_modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6>Enter your email and get a discount on <strong><?= htmlspecialchars($this->getTitle()) ?></strong></h6>
                </div>
                <form id="optin_form" method="post" name="contact" role="form">
                    <div class="modal-body">                
                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input type="email" id="optin_email" name="optin_email" class="form-control">
                        </div>                  
                    </div>
                    <div class="modal-footer">                  
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-success" id="submit" value="I Want The Discount!">
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <?php
    if (isset($_POST['optin_email'])) {
        echo $_POST['optin_email'];
    }
    ?>
    
    <script>
        $(document).ready(function(){   
            $("#optin_form").submit(function(event){
              alert($('#optin_email').val());
              return false;
            });
        });
    </script>

Когда пользователь нажимает на изображение, модальное загружается нормально, похоже, у меня возникли проблемы с получением значения на данный момент: alert($('#optin_email').val()); по какой-то причине оно не отображается, я вообще пропустил что-то очевидное в коде? я не лучший с jquery.

1. Я не могу воспроизвести это = у меня все работает нормально, и я вижу, как появляется предупреждение с введенным электронным письмом. Вы уверены, что загружаете скрипты jQuery на свои страницы и в консоли браузера нет ошибок?

Ответ №1:

По умолчанию форма будет отправляться с перезагрузкой браузера, сделайте это, чтобы остановить поведение

 <script>
    $(document).ready(function(){   
        $("#optin_form").submit(function(event){
            event.preventDefault(); // will prevent the browser from submitting your form normally 
            alert($('#optin_email').val());
            return false;
        });
    });
</script>

Ответ №2:

Он работает нормально. Вы можете проверить это здесь https://jsfiddle.net/qrmnyvg3 /

 <p><img src="images/img-get-discount.png" data-toggle="modal" data-target="#optin_modal" alt="Get your discount on <?= htmlspecialchars($this->getTitle()) ?>"></p> 

    <div id="optin_modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6>Enter your email and get a discount on <strong><?= htmlspecialchars($this->getTitle()) ?></strong></h6>
                </div>
                <form id="optin_form" method="post" name="contact" role="form">
                    <div class="modal-body">                
                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input type="email" id="optin_email" name="optin_email" class="form-control">
                        </div>                  
                    </div>
                    <div class="modal-footer">                  
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-success" id="submit" value="I Want The Discount!">
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <?php
    if (isset($_POST['optin_email'])) {
        echo $_POST['optin_email'];
    }
    ?>
    
    <script>
               $(document).ready(function(){   
            $("#submit").click(function(){
              alert($('#optin_email').val());
              return false;
            });
        });
    </script>