- popup modal window on input submit
123
WT форуми -> HTML / Javascript / CSS -> popup modal window on input submit
Създайте нова тема Напишете отговор 
Автор Съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 28/07/2017 1:39 pm     popup modal window on input submit Отговорете с цитат


Здравейте, възможно ли е да се направи popup modal window on input submit? Пробвах някакви скриптове но не можах да ги подкарам коректно. Проблема е че при натискане на submit страницата се рефрешва.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
flafy
Нов
Нов

Регистриран на: 22/09/2013 6:36 pm

Support: 7
Bonus: 14
Мнения: 60
Мнение 28/07/2017 2:46 pm      Отговорете с цитат


На теория може. Използвай https://api.jquery.com/event.preventdefault/

Javascript code:
$('form').on('submit', function(event){

event.preventDefault();

// popup open ...

});
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 28/07/2017 2:54 pm      Отговорете с цитат


Това не ми върши работа, защото аз при submit правя запис в базата, а с този код нищо не се записва.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
flafy
Нов
Нов

Регистриран на: 22/09/2013 6:36 pm

Support: 7
Bonus: 14
Мнения: 60
Мнение 28/07/2017 3:02 pm      Отговорете с цитат


Имаш 2 варианта :
1 - да използваш горепосочения код в комбинация с ajax
2 - при submit да пренасочваш към страница, която ти отваря popup прозореца
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 28/07/2017 3:14 pm      Отговорете с цитат


От вариант 2 нямам файда защото така мога и директно с php да си го направя.

А вариант 1 как ще стане Smile?

Нека да обясня какво целя за да стане по-ясно. Имам форма в която се избират някакви стойности. При submit се записват стойностите в базата. Искам след това да изскочи прозорче с два линка, примерно "продължете да разглеждате" и "количка".
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
flafy
Нов
Нов

Регистриран на: 22/09/2013 6:36 pm

Support: 7
Bonus: 14
Мнения: 60
Мнение 28/07/2017 4:27 pm      Отговорете с цитат


Нещо такова:
Javascript code:
$(document).ready(function(){

$('form').on('submit', function(event){

event.preventDefault();

$.post("post-data.php", $(this).serialize()).done(function(){
//display popup
});

});
});


HTML code:
<form method='post'>
<input type='text' name='a' />
<input type='text' name='b' />
<input type='submit' />
</form>


PHP code:

$a = $_POST['a'];
$b = $_POST['b'];

// ...
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 28/07/2017 8:44 pm      Отговорете с цитат


За съжаление и по този начин не се получава. Продължава да не записва в базата.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
flafy
Нов
Нов

Регистриран на: 22/09/2013 6:36 pm

Support: 7
Bonus: 14
Мнения: 60
Мнение 28/07/2017 9:00 pm      Отговорете с цитат


Според мен нещо ти бъркаш.
Какви грешки дава ?
Сподели и код, за да може да ти се помогне повече.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
raiden
Активен
Активен

Регистриран на: 08/12/2006 10:13 am

Support: 181
Bonus: 448
Мнения: 2136
Мнение 28/07/2017 9:06 pm      Отговорете с цитат


Провери какво се случва в Developer Tools - в таба Network се записват рекуестите, ако не излиза нищо там вероятно ще видиш проблема в конзолата. Само отвори Developer Tools преди да събмитнеш, за да може да логне рекуеста.

Ако до преди това формата е работила, това би трябвало също да работи:

    $('form').on('submit', function (e) {

        e.preventDefault();
        var form = $(this);
        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success: function (data) {
                //Показваш модала
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            },
        });
    });

Разбира се трябва да имаш и jQuery. И все пак, за да не гадаем, дай да видим HTML-а на страницата с формата и php-то към което праща
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 80
Bonus: 172
Мнения: 1577
Мнение 28/07/2017 11:04 pm      Отговорете с цитат


Ето какво е положението. Имам модел, контролер и вю.

В модела имам метод който прави записа в базата.

public function cart($size, $counter)
    {
        $this->_database->prepare('INSERT INTO cart (email,image,sizes,counter) VALUES(?,?,?,?)', array($arr['email'], $img[0]['image'], $size, $counter))->execute();
    }


В контролера викам модела и правя проверки

        $submit = $this->_normalize->post('submit');
        $size = $this->_normalize->post('size');
        $counter = $this->_normalize->post('counter');

if (isset($submit))
            {
                try
                {
                    $this->_isLoggedModel->isLogged();
                }
                catch (\Throwable $exc)
                {
                    if ($exc->getMessage() != 'logged')
                    {
                        header("Location:" . $this->_link . $this->_data['link_login']);
                    }
                    $this->_offerModel->cart($size, $counter);
                }
            }
            $this->layout();


Във вю-то е формата и джаваскрипта.

<form method="post">
                    <select name="size">
                        <option value="<?php echo $value['size']; ?>">size</option>
                    </select>

                    <a id="js-minus" class="minus">-</a>
                    <span id="counter">1</span>
                    <a id="js-plus" class="plus">+</a>

                    <input type="hidden" id="inputCounter" value="" name="counter"/>

                    <div id="overlay">
                        <div>
                            <p>Content you want the user to see goes here.</p>
                        </div>
                    </div>

                    <input type="submit" name="submit" value="Add"/>
                </form>

<script type="text/javascript">

    $(document).ready(function(){

        $('form').on('submit', function(event){

            event.preventDefault();

            $.post("http://localhost/market/public/offer/", $(this).serialize()).done(function(){
                el = document.getElementById("overlay");
                el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
            });

        });
    });

</script>


Без event.preventDefault(); формата се субмитва и записа влиза в базата, иначе не. Предполагам може да е заради проверката в контролера if (isset($submit)).
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
raiden
Активен
Активен

Регистриран на: 08/12/2006 10:13 am

Support: 181
Bonus: 448
Мнения: 2136
Мнение 29/07/2017 10:18 am      Отговорете с цитат


На пръв поглед виждам, че променливите $arr и $img в модела не са дефинирани, но щом иначе записва, значи проблема е другаде и трябва да го идентифицираш.
Виж какво се случва в конзолата и network лога, праща ли се рекуест, какъв статус код връща, има ли грешки в response-а. Провери дали не достъпваш сайта през различен хост (например 192.168.0.1) от този към който пращаш рекуеста (localhost) - в такъв случай сесията би се изгубила
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
lam3r4370
Активен
Активен

Регистриран на: 20/08/2008 6:12 pm

Support: 131
Bonus: 244
Мнения: 3410
Мнение 29/07/2017 12:02 pm      Отговорете с цитат


А то докъде стига точно ajax-а? Я сложи едно echo преди isset проверката, може serialize() да не праща submit бутона и затова да става така
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
123
Страница 1 от 3


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети