douzheng9221
douzheng9221
2018-07-14 16:00

使用slideToggle on按钮显示/隐藏信息

Objective Inserting name(input-text) and info(textarea-contains multiple lines) into the database, and after submission of the form, at the same page, 2 columns are for displaying the same data in columns, name & info, but under info column. I have made buttons for each row in front of the names, which is used as slideToggle for showing/hiding which contains the data retrieved from the 'info' column

Problem - when I am clicking the button of 1st row, instead of displaying the info related to 1st entry only, it is sliding and showing all info(s) related to all entries at only click.

*others - one more input has been added to the form but as hidden used for id(auto increment)

screenshot with the toggle problem

----index.php-----

<?php  include('php_code.php'); ?>
<?php 
    if (isset($_GET['edit'])) {
        $id = $_GET['edit'];
        $update = true;
        $record = mysqli_query($db, "SELECT * FROM records WHERE id=$id");

        if (count($record) == 1 ) {
            $n = mysqli_fetch_array($record);
            $name = $n['name'];
            $acc = $n['acc_no'];
            $info = $n['info'];
        }
    }
?>
<html>
<head>
<title>JSK</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('form').hide();
    $('p').hide();
    $('#sp').hide();
    $("#inf").click(function(){
        $("p").slideToggle();
        $('#sp').slideToggle();
    });
$("#fo").click(function(){
        $("form").slideToggle();
        });
});
</script>
</head>
<body>
    <div class="container">
        <div class="left">
        <?php if (isset($_SESSION['message'])): ?>
        <div class="msg">
        <?php 
            echo $_SESSION['message']; 
            unset($_SESSION['message']);
        ?>
        </div>
        <?php endif ?>

        <?php $results = mysqli_query($db, "SELECT * FROM records"); ?>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Account No</th>
            <th>Info</th>
            <th colspan="2">Action</th>
        </tr>
    </thead>
    <?php while ($row = mysqli_fetch_array($results)) { ?>
        <tr>
            <td><?php echo $row['name']; ?></td>
            <td><?php echo $row['acc_no']; ?></td>
            <td><button id="inf" onclick="myFunction()">show</button></td>
            <td>
                <a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
            </td>
            <td>
                <a href="php_code.php?del=<?php echo $row['id']; ?>" class="del_btn">Delete</a>
            </td>
        </tr>
        <tr  id="sp"> <td colspan="4"><p> <?php echo $row['info']; ?> </p></td>
        </tr>
        <?php } ?> 
</table>
<div id="fotable" align="center">
<button id="fo">Add New/Edit</button> 
</div>

    <form method="post" action="php_code.php" >
        <input type="hidden" name="id" value="<?php echo $id; ?>">

        <div class="input-group">
            <label>Name</label>
            <input type="text" autocomplete="off" name="name" value="<?php echo $name; ?>">
        </div>
        <div class="input-group">
            <label>Account No</label>
            <input type="text" name="acc" value="<?php echo $acc; ?>">
        </div>
        <div class="input-group">
      <label for="info">Info</label>

      <textarea class="form-control" rows="8" name="info" id="info"><?php echo $row['info']; ?></textarea>

    </div>
        <div class="input-group">
            <?php if ($update == true): ?>
    <button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
    <button class="btn" type="submit" name="save" >Add Account</button>
<?php endif ?>
        </div>
    </form>
</div><!-- left closed -->
<div class="right">

hello



</div>    <!-- right closed -->
</div> <!-- container closed -->
</body>
</html>

---php_code.php-----

<?php 
    session_start();
    $db = mysqli_connect('localhost', 'root', '', 'jskrecords');
    

    // initialize variables
    $name = "";
    $acc = "";
    $info = "";
    $id = 0;
    $update = false;

    if (isset($_POST['save'])) {
        $name = $_POST['name'];
        $acc = $_POST['acc'];
        $info = $_POST['info'];

        mysqli_query($db, "INSERT INTO records (name, acc_no, info) VALUES ('$name', '$acc', '$info')"); 
        $_SESSION['message'] = "Account saved"; 
        header('location: index.php');
    }
    if (isset($_POST['update'])) {
    $id = $_POST['id'];
    $name = $_POST['name'];
    $acc = $_POST['acc'];
    $info = $_POST['info'];

    mysqli_query($db, "UPDATE records SET name='$name',acc_no='$acc',info='$info' WHERE id=$id");
    $_SESSION['message'] = "Account updated!"; 
    header('location: index.php');
}
if (isset($_GET['del'])) {
    $id = $_GET['del'];
    mysqli_query($db, "DELETE FROM records WHERE id=$id");
    $_SESSION['message'] = "ACC deleted!"; 
    header('location: index.php');
}

?>

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • douxian5963 douxian5963 3年前

    Concept:

    If you are creating multiple form from same mysql table using php script, You need to give each form a unique id. e.g.

    <form method="post" action="php_code.php" id="form<?= $id ?>">
    

    Then add data-target="#form" to button with class 'inf'. It will store id of form.

    <button class="inf" data-target="#form<?= $id ?>">show</button>
    

    When button is clicked we know which form to open from data-target.

    <script>
    $('.container').on('click','button.inf',function(e){
     e.preventDefault();
     var formid=$(this).attr('data-target');  //get value of data-target attribute 
           //...proceed to play toggle with this form 'formid'
    
    点赞 评论 复制链接分享