У меня есть всплывающий класс в javascript и добавлены все скрипты на моей странице html, которые необходимы для отображения этого всплывающего окна. Я пытаюсь загрузить страницу PHP в этом всплывающем окне на кнопку отправки кнопки в моей форме.
Popup отлично работает для кнопки, как показано ниже (текст из select.php отображается во всплывающем окне):
<a href="select.php" class="home-banner-button popup">Activate</a> Теперь у меня есть форма и на отправке мне нужно перенаправить на страницу PHP в зависимости от условия. И результат должен отображаться во всплывающем окне.
Я попытался загрузить страницу с моим всплывающим классом, как показано ниже, но не отображал всплывающее окно.
разметка, как показано ниже:
<form method="post" action="#" onSubmit="return check();"> <input type="text" id="textid" placeholder="Enter Here" /> <input type="submit" name="submit" /> </form>
Javasript:
<script type="text/javascript"> $(function () { $('.popup').colorbox({ iframe: true, opacity: 0.7, fixed: true, innerWidth: 500, innerHeight: 180, scrolling: false }); }); function check() { var price = $('#textid').val(); var new_value = price.replace(/\,/g, ''); var lower_limit_value = 375; var upper_limit_value = 1712; if (new_value >= lower_limit_value && new_value <= upper_limit_value) { $(".popup").load("correct.php"); return false; } else { $(".popup").load("incorrect.php"); return false; } } </script>
Я думаю, что я использую неправильный синтаксис этого $(".popup").load("correct.php");
Я не получаю, как использовать это / как мне вызвать класс (например .popup) в javascript с загрузкой php-страницы или другим способом сделать это.
или Как использовать ajax в этом случае? Может ли аякс поможет в такой ситуации?
Какую ошибку вы видите в консоли браузера? Я попытался запустить ваш код, я могу показать содержимое файла PHP на странице с помощью вашего кода.
Убедитесь, что у вас есть div или какой-либо другой элемент с прикрепленным к нему классом «popup». Мне пришлось добавить к вашему коду следующее, чтобы оно работало.
<div class="popup"></div>
EDIT: я попытался открыть colorbox при нажатии submit, в соответствии с комментарием ниже. Вот что-то, что работает и открывает всплывающее окно со страницей внутри. Это не идеально, но делает работу. Вы должны настроить height.width и другие свойства, чтобы они работали правильно. Попробуйте, если это сработает.
Измените свой скрипт на следующее:
$(function () { //Removed the popup code from here. Made that conditional. }); function check() { var price = $('#textid').val(); var new_value = price.replace(/\,/g, ''); var lower_limit_value = 375; var upper_limit_value = 1712; if (new_value >= lower_limit_value && new_value <= upper_limit_value) { $('.popup').colorbox({ iframe: true, opacity: 0.7, fixed: true, height: 500, width: 180, scrolling: false, href: "correct.php", open: true }); return false; } else { $('.popup').colorbox({ iframe: true, opacity: 0.7, fixed: true, height: 500, width: 180, scrolling: false, href: "incorrect.php", open: true }); return false; } } </script>
Проверьте, не потерян ли DOM в скрипте jquery для проверки функции. напишите его в $(function) а также я сомневаюсь, что вы не ввели область, содержащую класс .popup на вашей HTML-странице. Пожалуйста, проверьте … он будет решен.
Я решил свою проблему, используя функцию .colorbox (), как показано ниже. Теперь он работает отлично. 🙂
<script type="text/javascript"> function check() { var price = $('#textid').val(); var new_value = price.replace(/\,/g,''); var lower_limit_value = 375; var upper_limit_value = 1712; if (new_value>=lower_limit_value && new_value<=upper_limit_value) { $.colorbox({ href:"correct.php", iframe:true, opacity:0.7, fixed:true, innerWidth:500, innerHeight:250, scrolling:false}); return false; } else { $.colorbox({ href:"incorrect.php", iframe:true, opacity:0.7, fixed:true, innerWidth:500, innerHeight:320, scrolling:false}); return false; } } </script>