это моя проблема: после отправки формы я хочу увидеть некоторые данные из базы данных (MySQL) для выбранного объекта в div-элементе. Этот элемент был настроен на «display: none» при запуске страницы.
Если пользователь нажимает кнопку, <div> должен стать видимым, а данные должны быть видны. С помощью другого щелчка <div> снова станет невидимым. Для этого я использую функцию jQuery toggle() .
Если я использую элемент ввода с “type=submit” форма отправляется, и я получаю данные из-за операторов php в <div> . Но, к сожалению, <div> немедленно исчезнет. Я думаю, что сообщение снова начинает страницу по умолчанию, и поэтому для параметра <div> снова установлено значение “display:none” .
Если я использую элемент button вместо этого, я могу переключить <div> но форма не отправлена, $ _POST не заполнена, и поэтому я не получил никаких данных из базы данных для объекта. Идея заключалась в том, чтобы использовать имя объекта для установки значения переменной $ id для запуска SQL-оператора.
Я попытался сохранить исходный код очень коротким, и поэтому я не программировал здесь инструкции, связанные с базой данных. Это не проблема – я могу получить данные для объекта, когда я использовал обычную функцию submit и no toggle для <div> .
Как вы можете видеть в исходном коде, я попробовал его с тремя вариантами ввода. Но ничто из этого не работает, как будто я хочу, чтобы он работал.
Я знаю, что все будет легко с помощью другой дополнительной страницы, чтобы показать данные. Но я хочу понять это с помощью <div> .
Как я могу решить эту ситуацию? Вот мой исходный код:
<!DOCTYPE html> <html> <head> <style> #wbtogdiv { width:30%; height:100px; border:6px solid green; display:none; } </style> <script language="JavaScript" src="jquery-1.11.2.js"></script> <script language="JavaScript">$(document).ready(function(){$("#btn").click(function(){$("#wbtogdiv").fadeToggle(20);return true;});});</script> </head> <body style="color:#FF004C;"> <!-- I tried also with this action="<?php $_SERVER['PHP_SELF']?>" but of course then the page is fired again and the <div> is not visible due to the CSS--> <form method="post"> <input type="text" name="customer"> <input type="submit" id="btn" value="submit:Toggle div green"> <!-- <input type="submit" id="btn" value="submit:Toggle div green"> <input type="button" id="btn" value="input button: Toggle div green"> <button type="button" id="btn">Button: Toggle div green</button> --> </form> <div id="wbtogdiv">KASTEN: <?php echo print_r($_POST)?></div> </body> </html>
По умолчанию элемент button отправляет форму, однако вы переопределяете это поведение, устанавливая type="button" . (Согласен, я согласен).
Поскольку вы уже используете jQuery, вы можете воспользоваться встроенной поддержкой AJAX и переопределить поведение отправки формы по умолчанию. Это подход, который деградирует изящно: если пользователь работает в среде, которая не выполняет JavaScript, они будут отправлять форму, используя поведение браузера по умолчанию, и все еще видят результаты. (Вы бы отредактировали свой CSS, чтобы сделать ваш div видимым по умолчанию в этом случае и использовать JS, чтобы скрыть его во время загрузки страницы.) DEMO jsFiddle
var $form = $('form'); var $resultDiv = $('#wbtogdiv'); $resultDiv.hide(); var successHandler = function(data, textStatus, jqXhr) { $resultDiv.html(data); $resultDiv.fadeToggle(200); }; $form.submit(function(ev) { ev.preventDefault(); if (! $resultDiv.is(':visible')) { $.post( '/path/to/your/script', $form.serialize(), successHandler ); } else { $resultDiv.fadeToggle(200); } });
(Кроме того, поскольку это тестовое сообщение, возможно, вы не делаете этого в своем реальном коде, но, ради бога, будьте предельно внимательны к сценарию, который раскрывает информацию о его внутренней работе с пользователем или сценарий, который эхо пользовательский контент, не привязанный к экрану, обратно на веб-страницу. Это первые шаги к довольно серьезному отверстию безопасности.)
Вы можете попробовать следующее:
Не использовать display: none; в CSS и вместо этого сделать это с помощью JQuery.
<style> #wbtogdiv { width:30%; height:100px; border:6px solid green; } </style>
И это то, что вы делаете:
<div id="wbtogdiv" form-submitted = "no">KASTEN: <?php echo print_r($_POST)?></div> <script> $(document).ready(function(){ if($('#wbtogdiv').attr('form-submitted') == "no") { $('#wbtogdiv').hide(); } }); $(document).ready(function(){ $("#btn").submit(function(event){ $("#wbtogdiv").fadeToggle(20); return true; $("#wbtogdiv").attr('form-submitted', "yes"); }); }); </script>