在.php中创建Textarea并提交按钮以隐藏数据库表中的每一行？

Been working on this for long time.. want to add a js effect (hide/unhide) to a simple submit form...

一直在研究这个...想要在简单的提交表单中添加js效果(隐藏/取消隐藏)...

Fortunately it is working but unfortunately it is only working for single row in the DB table.

幸运的是它正在工作,但不幸的是它只适用于DB表中的单行。

I made script:1 (posted below) which was corrected by a well wisher from this site which is script:2 (posted below).

我制作了剧本:1(在下面发布),这是由一个来自这个网站的祝福者纠正的脚本:2(发布在下面)。

unfortunately both are not working. hope you guys help me find the missing peice in it..

不幸的是两个都没有工作。希望你们能帮我找到失踪的阴茎..

SCRIPT#1

<!DOCTYPE html>
<html lang="en">
<head>
<?php
$servername = "localhost";
$password = "*****";
 $dbname = "the_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
 $sql = "SELECT * FROM input";
$result = $conn->query($sql);
?>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<style>
.name {
width: 700px;
margin-top: 1%;
margin-left: 20%;
padding-left:2%;
padding-right:2%;
padding-top:10%;
margin-right: 35%;
word-wrap: break-word;
}
textarea#addtext{
width:600px;
height:100px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js">
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$().ready = function() {
 $('#addtext').hide();
$('#addsubmit').hide();
$("#add").click(function() {
$('#add').hide();
$('#addtext').fadeIn('slow').focus();
$('#addsubmit').fadeIn('slow');
});

$('#addtext').blur(function(){
    $('#addtext').hide();
    $('#addsubmit').hide();
    $('#add').fadeIn('slow');    
});
}();
});//]]>

</script>

</head>
<body>

                        <div class="name">

                                <?php 
                            if ($result->num_rows > 0) {
                            while($row = $result->fetch_assoc()) { ?>

                        <div id="q">
                            <B><big><font color= #ba4a00> Q:</font></big> <?php echo $row["question"]; ?> </B></br>
                            <B><small><font color= #ba4a00> Description:</font> <?php echo $row["description"]; ?>  </small></B></br>
                            <p id="tag1"><small> <?php echo $row["subject"]; ?> </small></p><p id="tag2"><small> <?php echo $row["sub_subject"]; ?> </small></p>
                            <button class="addanswer" id="add"><B>Add Answer</B></button>
                        <form>
                        <textarea class="addtext" name="addtext" required id="addtext" placeholder="Please type your question here.."></textarea>
                        <button class="addanswer" id="addsubmit"><B>Submit</B></button>
                        </form>
                            <small><p><?php echo $row["date"]; ?></p></small>
                                                    </div>                                                  
                            <?php     }
                                } else {
                                    echo "0 results";
                                        }
                                $conn->close();
                            ?>
                        </div>

</body>
</html>

SCRIPT#2

<!DOCTYPE html>
<html lang="en">
<head>
<?php
$servername = "localhost";
$username = "root";
$password = "******";
$dbname = "the_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM input";
$result = $conn->query($sql);
?>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<style>
.name {
width: 700px;
margin-top: 1%;
margin-left: 20%;
padding-left:2%;
padding-right:2%;
padding-top:10%;
margin-right: 35%;
word-wrap: break-word;
}
textarea#addtext{
width:600px;
height:100px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js">
</script>
<script type='text/javascript'>
function addanswer(index){
 $('#add_' + index).hide();
$('#addtext_' + index).fadeIn('slow').focus();
$('#addsubmit_' + index).fadeIn('slow');
}
</script>

</head>
<body>

                        <div class="name">

                            <?php 
                            if ($result->num_rows > 0) { 
                            $index = 0; 
                            while($row = $result->fetch_assoc()) { 
                            $index++; // stuff inside foreach goes here 
                            ?>

                        <div id="q">
                            <B><big><font color= #ba4a00> Q:</font></big> <?php echo $row["question"]; ?> </B></br>
                            <B><small><font color= #ba4a00> Description:</font> <?php echo $row["description"]; ?>  </small></B></br>
                            <p id="tag1"><small> <?php echo $row["subject"]; ?> </small></p><p id="tag2"><small> <?php echo $row["sub_subject"]; ?> </small></p>
                        <?php 
                            echo '<button class="add" id="add_'.$index.'"><B>Add</B></button>';
                            echo '<form style="display:none;" name="answer_'.$index.'" method="post" action="output.php">'; // I dont think openning form from row to row would be nice!
                            echo '<textarea style="display:none;"  type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your question here.."></textarea>';
                            echo '<button style="display:none;" onClick="addsubmit('.$index.');" type="addsubmit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>';
                            echo '</form>';
                        ?>
                            <small><p><?php echo $row["date"]; ?></p></small>
                        </div>                                                  
                            <?php     }
                                } else {
                                    echo "0 results";
                                        }
                                $conn->close();
                            ?>
                        </div>

</body>
</html>

Any Help would be greatly Appreciated..

任何帮助将不胜感激..

1 个解决方案

#1

Ok so here is your code rewritten, I have not tested it but it should work if your PHP code has no syntax error and your DB is up and running:

好的,所以这里是你的代码重写,我还没有测试过,但是如果你的PHP代码没有语法错误并且你的数据库启动并运行它应该可以工作:

config.php (I added config.php as its just better practice)

config.php(我添加了config.php作为其更好的做法)

<?php
$servername = "localhost";
$username = "root";
$password = "******";
$dbname = "the_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

list.php (this will be your template file and some php logic in there *not the best practice)

list.php(这将是你的模板文件和那里的一些php逻辑*不是最佳实践)

<?php require_once('config.php') ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <style>
        .name {
            width: 700px;
            margin-top: 1%;
            margin-left: 20%;
            padding-left: 2%;
            padding-right: 2%;
            padding-top: 10%;
            margin-right: 35%;
            word-wrap: break-word;
        }

        textarea#addtext {
            width: 600px;
            height: 100px;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js">
    </script>
</head>

<body>

    <div class="name">

        <?php 
                                $sql = "SELECT * FROM input";
                                $result = $conn->query($sql);

                                if ($result->num_rows > 0) { 
                                $index = 0; 
                                while($row = $result->fetch_assoc()) { 
                                $index++; // stuff inside foreach goes here 
                                ?>

        <div id="q">
            <!-- NEVER user an ID on elements that are recurring, thats completely wrong, use a class or 'data-' attr  -->
            <B><big><font color= #ba4a00> Q:</font></big> <?php echo $row["question"]; ?> </B>
            </br>
            <B><small><font color= #ba4a00> Description:</font> <?php echo $row["description"]; ?>  </small></B>
            </br>
            <p id="tag1"><small> <?php echo $row["subject"]; ?> </small></p>
            <p id="tag2"><small> <?php echo $row["sub_subject"]; ?> </small></p>
            <?php 
                                echo '<button class="add" id="add_'.$index.'"><B>Add</B></button>';
                                echo '<form style="display:none;" name="answer_'.$index.'" method="post" action="output.php">'; // I dont think openning form from row to row would be nice!
                                echo '<textarea  type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your question here.."></textarea>';
                                echo '<button onClick="addsubmit('.$index.');" type="submit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>';
                                echo '</form>';
                            ?>
            <small><p><?php echo $row["date"]; ?></p></small>
        </div>
        <?php     }
                                    } else {
                                        echo "0 results";
                                            }
                                    $conn->close();
                                ?>
    </div>
    <script type='text/javascript'>
        $(document).ready(function() {
            $('.add').click(function(e) {
                e.preventDefault();
                $(this).parent().find('form').fadeIn('slow').focus();
                $(this).hide();
            });
        });
    </script>
</body>

</html>

Second Edit

If you need to hide the form when the textarea is out of focus: https://api.jquery.com/focusout/

如果您需要在textarea失焦时隐藏表单:https://api.jquery.com/focusout/

$('.addtext').focusout(function() {
     $(this).parent().fadeOut('slow');
     $(this).parent().parent().find('.add').show();
});

** Third Edit ** Auto Focus on the textarea specifically

**第三次编辑**专门针对textarea进行自动聚焦

    <script type='text/javascript'>
        $(document).ready(function() {
            $('.add').click(function(e) {
                e.preventDefault();
                $(this).parent().find('form').fadeIn('slow');
                $(this).parent().find('form textarea.addtext').focus();
                $(this).hide();
            });
        });
    </script>

#1