Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.01.2016, 09:47
Новичок на форуме
Отправить личное сообщение для bstpan Посмотреть профиль Найти все сообщения от bstpan
 
Регистрация: 14.01.2016
Сообщений: 4

Вопрос новичка по popap-ам
Всем хорошего дня!

У меня возникла некоторая проблемка

Скажу сразу, в Java не силен совсем, немного программирую на Питоне, поэтому скорее всего вопрос мой будет глупым)

Собственно суть: пытаюсь сделать несколько кнопок на сайте, по клику на которые открывается форма обратной связи в попапе. Нашел скрипт в интернете, использовал на всех страницах, работало нормально, форма по клику открывается - в форме все обрабатывается, письмо идет. Но, когда попытался сделать 2-3 кнопки на одной странице - появилась проблема.

При нажатии на 1ю кнопку скрипт нормально работает, как нужно. При нажатии на 2ю кнопку и более, скрипт на долю секунды открывает попап с форомой и перезагружает страницу. Пробовал и delay и функции с задержкой - не помогает. Скрипт простой:

<script>
 
 
    $('.open_popup').click(function() {
        var popup_id = $('#' + $(this).attr("rel"));
        $(popup_id).show();
        $('.overlay2').show();
    })
 
 
    $('.popup .close, .overlay2').click(function() {
        $('.overlay2, .popup').hide();
    })
 
</script>


Вот, собственно вызов его

<div align="center">
<span class="open_popup" rel="popup1"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span>
</div>

<div class="overlay2"></div>

<div class="popup" id="popup1">
<span class="close">X</span>
ФОРМА
</div>
</div>


Последующие кнопки имеют похожий код вызова, только popup2 и тд, но долю секунды они открывают нужную форму

Кто-нибудь может подсказать, как сделать так, что бы при нажатии 2й кнопки и 3й происходило тоже, что и в первом случае, то есть, не было перезагрузки страницы)
Ответить с цитированием
  #2 (permalink)  
Старый 14.01.2016, 10:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

bstpan,
перезагрузка будет в том случае если клик идёт по ссылке и нет event.preventDefault();
html допишите для примера
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2016, 12:34
Новичок на форуме
Отправить личное сообщение для bstpan Посмотреть профиль Найти все сообщения от bstpan
 
Регистрация: 14.01.2016
Сообщений: 4

event.preventDefault(); не помог (

С первой то все нормально, кликаю, заполняю форму, нажимаю
отправить и сообщение идет

Кликаю по по второму button, код аналогичный, открывается на долю секунды форма и перезагрузка страницы


<div align="center"><br>
<span class="open_popup" rel="popup1"> <button class="knopka"  value="Отправить заявку"> Отправить заявку </button> </span>
</div>


<div class="overlay2"></div>

<div class="popup" id="popup1">
	<span class="close">X</span>
	        <form action="" class="contact-form" name="contact-form" method="post" >
                    <div class="col-sm-4 col-sm-offset-1">
                        <div class="form-group">
                           <p align="left"><font color="green"> Тема: </font> </p>
                            <input id="id_subject" type="text" name="subject" maxlength="100" />
                        </div>
                        <div class="form-group">
                            <font color="green"> <p align="left">E-mail: </font></p>
                            <input type="text" name="email" id="id_email" />
                        </div>
                        <div class="form-group">
                            <p align="left"><font color="green">  Cообщение:</font></p>
                            <textarea id="id_message" rows="10" cols="30" name="message"></textarea>
                        </div>
                                       <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" />
                        
</div>   
</div>
</div>
Ответить с цитированием
  #4 (permalink)  
Старый 14.01.2016, 12:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

bstpan,
форма незакончена, второого button нет ... всё в прятки играем?

вариант с двумя кнопками и одной формой
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style type="text/css">
   .popup {
     display: none;
   }

    </style>
</head>

<body>


<script>
$(function(){
    $('.open_popup').click(function() {
        var popup_id = $('#' + $(this).attr("rel"));
        $(popup_id).show();
        $('.overlay2').show();
    })


    $('.popup .close, .overlay2').click(function() {
        $('.overlay2, .popup').hide();
    })


});
</script>

<div align="center"><br>
<span class="open_popup" rel="popup1"> <button class="knopka"  value="Отправить заявку"> Отправить заявку </button> </span>
</div>


<div class="overlay2"></div>

<div class="popup" id="popup1">
	<span class="close">X</span>
	        <form action="" class="contact-form" name="contact-form" method="post" >
                    <div class="col-sm-4 col-sm-offset-1">
                        <div class="form-group">
                           <p align="left"><font color="green"> Тема: </font> </p>
                            <input id="id_subject" type="text" name="subject" maxlength="100" />
                        </div>
                        <div class="form-group">
                            <font color="green"> <p align="left">E-mail: </font></p>
                            <input type="text" name="email" id="id_email" />
                        </div>
                        <div class="form-group">
                            <p align="left"><font color="green">  Cообщение:</font></p>
                            <textarea id="id_message" rows="10" cols="30" name="message"></textarea>
                        </div>
                                       <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" />

</div>
</div></form>
</div>


 <div align="center"><br>
<span class="open_popup" rel="popup1"> <button class="knopka"  value="Отправить заявку"> Отправить заявку </button> </span>
</div>
</body>

</html>

Последний раз редактировалось рони, 14.01.2016 в 12:47.
Ответить с цитированием
  #5 (permalink)  
Старый 14.01.2016, 12:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

bstpan,

вариант с 2 кнопками и у каждого своя форма
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style type="text/css">
   .popup {
     display: none;
   }

    </style>
</head>

<body>


<script>
$(function(){
    $('.open_popup').click(function() {
        var popup_id = $('#' + $(this).attr("rel"));
        $(popup_id).show();
        $('.overlay2').show();
    })


    $('.popup .close, .overlay2').click(function() {
        $('.overlay2, .popup').hide();
    })


});
</script>

<div align="center"><br>
<span class="open_popup" rel="popup1"> <button class="knopka"  value="Отправить заявку"> Отправить заявку </button> </span>
</div>


<div class="overlay2"></div>

<div class="popup" id="popup1">
	<span class="close">X</span>
	        <form action="" class="contact-form" name="contact-form" method="post" >
                    <div class="col-sm-4 col-sm-offset-1">
                        <div class="form-group">
                           <p align="left"><font color="green"> Тема: </font> </p>
                            <input id="id_subject" type="text" name="subject" maxlength="100" />
                        </div>
                        <div class="form-group">
                            <font color="green"> <p align="left">E-mail: </font></p>
                            <input type="text" name="email" id="id_email" />
                        </div>
                        <div class="form-group">
                            <p align="left"><font color="green">  Cообщение:</font></p>
                            <textarea id="id_message" rows="10" cols="30" name="message"></textarea>
                        </div>
                                       <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" />

</div>
</div></form>
</div>


 <div align="center"><br>
<span class="open_popup" rel="popup2"> <button class="knopka"  value="Отправить заявку"> Отправить заявку </button> </span>
</div>


<div class="popup" id="popup2">
	<span class="close">X</span>     это вторая форма
	        <form action="" class="contact-form" name="contact-form" method="post" >
                    <div class="col-sm-4 col-sm-offset-1">
                        <div class="form-group">
                           <p align="left"><font color="green"> Тема: </font> </p>
                            <input id="id_subject" type="text" name="subject" maxlength="100" />
                        </div>
                        <div class="form-group">
                            <font color="green"> <p align="left">E-mail: </font></p>
                            <input type="text" name="email" id="id_email" />
                        </div>
                        <div class="form-group">
                            <p align="left"><font color="green">  Cообщение:</font></p>
                            <textarea id="id_message" rows="10" cols="30" name="message"></textarea>
                        </div>
                                       <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" />

</div>
</div></form>
</div>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 14.01.2016, 13:01
Новичок на форуме
Отправить личное сообщение для bstpan Посмотреть профиль Найти все сообщения от bstpan
 
Регистрация: 14.01.2016
Сообщений: 4

форма незакончена, второого button нет ... всё в прятки играем?

Извините, он просто был аналогичный потому не скинул, виноват.

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

rel="popup2" id="popup2" - тоже самое, но на долю секунды возникает вторая форма

Хотя, тут на форуме все нормально. Может у меня проблема не в скрипте тогда.
Ответить с цитированием
  #7 (permalink)  
Старый 14.01.2016, 13:12
Новичок на форуме
Отправить личное сообщение для bstpan Посмотреть профиль Найти все сообщения от bstpan
 
Регистрация: 14.01.2016
Сообщений: 4

Ооо! Все гениальное просто! Спасибо вам большое - я просто не закрыл тег form!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
XML и JavaScript - вопрос новичка KLD Общие вопросы Javascript 11 26.06.2014 16:06
Вопрос новичка по архитектуре MVC GroZa ExtJS 2 13.11.2013 00:50
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56
Что не так (вопрос от новичка) wermut Общие вопросы Javascript 3 12.07.2010 13:53
Вопрос новичка XML "when test" gosha_kap (X)HTML/CSS 1 16.07.2009 12:30