带提交表单数据的toggle()div元素 [英] toggle() div element with submitting form data
问题描述
这是我的问题: 提交表单后，我想从div元素中的所选对象的数据库(MySQL)中查看一些数据.页面启动时，此元素设置为"display:none".
this is my problem: After submitting a form I want to see some data from a database (MySQL) for the selected object in a div-element. This element was set to "display:none" when the page starts.
如果用户单击按钮，则<div>应该变为可见，并且应该看到数据.再次单击<div>应该再次不可见.为此，我使用jQuery函数toggle().
If the user clicks a button the <div> should become visible and the data should be seen. With another click the <div> should become invisible again. To achieve this I use the jQuery function toggle().
如果我将输入元素与type=submit一起使用，则将提交表单，并且由于<div>中的php语句，我将获得数据.但是不幸的是<div>将立即消失.我猜默认情况下，提交将重新开始该页面，因此<div>再次设置为display:none.
If I use an input-element with "type=submit" the form is submitted and I get the data due to the php statements in the <div>. But unfortunately the <div> will disappear immediately. I guess the submit is starting the page again by default and therefore the <div> is set to "display:none" again.
如果我改用按钮元素，则可以切换<div>，但未提交表单，因此不会填充$ _POST，因此我没有从数据库中获取该对象的任何数据.想法是使用对象的名称为$ id变量设置一个值以启动SQL语句.
If I use a button-element instead I am able to toggle the <div> but the form is not submitted, the $_POST is not filled and therefore I did not get any data from the database for the object. The idea was to use the name of the object to set a value for an $id variable to start the SQL-statement.
我试图使源代码非常简短，因此在此未编写与数据库相关的语句.这不是问题–当我使用普通的提交并且<div>没有切换功能时，我能够获取对象的数据.
I tried to keep the source code very short and therefore I did not program the database related statements here. This is not the problem – I am able to get data for the object when I used a normal submit and no toggle function for the <div>.
正如您在源代码中看到的那样，我尝试了三种输入类型的输入.但是没有一个像我想要的那样工作.
As you can see in the source code I tried it with three variations of input types. But none of it works like I want it to work.
我知道使用另一个额外的页面来显示数据会很容易.但是我想用<div>来实现它.
I know that everything would be easy using another extra page to show the data. But I want to realize it with the <div>.
我该如何解决这种情况? 这是我的源代码:
How can I solve this situation? Here is my source code:
<!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"可以覆盖该行为. (我同意这有点违反直觉.)
By default, a button element will submit a form, however, you overrode that behavior by setting type="button". (A tad counterintuitive, I agree.)
由于您已经在使用jQuery，因此可以利用其内置的AJAX支持并覆盖默认的表单提交行为.这是一种方法，它会导致性能下降:如果用户在未执行JavaScript的环境中运行，则他们将使用默认的浏览器行为提交表单，但仍会看到结果. (在这种情况下，您将调整CSS以使div在默认情况下可见，并在页面加载期间使用JS将其隐藏.) 演示jsFiddle
Since you're already using jQuery, you can take advantage of its built-in AJAX support and override the default form submission behavior. That's an approach that degrades gracefully: if a user is running in an environment that doesn't execute JavaScript, they will submit the form using default browser behavior and still see the results. (You would tweak your CSS to make your div visible by default in that case, and use JS to hide it during page load.) 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);
}
});
(此外，由于这是一个测试文章，有可能您没有在实际代码中执行此操作，但出于天堂的缘故，请务必谨慎对待向用户透露有关其内部工作信息的脚本，或者脚本，将未经转义的用户提供的内容回传到网页.这些是迈向相当大的安全漏洞的第一步.)
(Also, since this is a test post, it's possible you aren't doing this in your actual code, but for heaven's sake, be extremely careful about a script that reveals information about its internal working to a user, or a script that echoes user-supplied content, unescaped, back to a web page. These are the first steps toward a fairly major security hole.)
这篇关于带提交表单数据的toggle()div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
