toggle() div element with submitting form data

问题

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.

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().

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.

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.

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.

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>

回答1:

By default, a button element will submit a form, however, you overrode that behavior by setting type="button". (A tad counterintuitive, I agree.)

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.)

回答2:

You can try this :

Do not use display: none; in CSS and instead do it by JQuery.

<style>
#wbtogdiv {
    width:30%; 
    height:100px;
    border:6px solid green;
}
</style>

And this is what you do :

<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>

来源：https://stackoverflow.com/questions/27586210/toggle-div-element-with-submitting-form-data

标签

javascript

php

jquery

togglebutton