javascript — элемент div toggle () с отправкой данных формы
это моя проблема:
После отправки формы я хочу увидеть некоторые данные из базы данных (MySQL) для выбранного объекта в div-элементе. Этот элемент был установлен на «display: none» при запуске страницы.
Если пользователь нажимает кнопку <div> должно стать видимым, и данные должны быть видны. С другим нажатием <div> должен снова стать невидимым. Для этого я использую функцию jQuery toggle(),
Если я использую элемент ввода с “type=submit” форма отправлена, и я получаю данные из-за заявления php в <div>, Но к сожалению <div> исчезнет сразу. Я предполагаю, что отправка снова запускает страницу по умолчанию, и поэтому <div> установлен в “display:none” снова.
Если вместо этого я использую элемент кнопки, я могу переключать <div> но форма не отправлена, $ _POST не заполнен, и поэтому я не получил никаких данных из базы данных для объекта. Идея состояла в том, чтобы использовать имя объекта для установки значения переменной $ id для запуска SQL-оператора.
Я пытался сделать исходный код очень коротким и поэтому не программировал здесь заявления, связанные с базой данных. Это не проблема — я могу получить данные для объекта, когда я использовал обычную отправку и без функции переключения для <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, чтобы скрыть его во время загрузки страницы.) ДЕМО 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>