我正在尝试在使用 javascript 单击按钮时显示表单

I am trying to make a form display when button is clicked with javascript

本文关键字：按钮 单击 显示 表单 javascript      更新时间：2023-09-26

我正在制作一个有留言簿页面的网站。页面上有一个对话区域，顶部有一个链接，上面写着"单击以发布"。我尝试使用 jquery 让它显示允许您添加到页面的表单，但我似乎无法使其工作。 我已经能够让它使用普通的javascript工作，但没有动画，所以我尝试使用.slideToggle（）; 但没有成功。有很多代码，我不确定罪魁祸首在哪里，所以如果它真的很长，我很抱歉。 紧跟在脚本标签后面的函数是我最初使用的函数。

以防万一这是一个愚蠢的错误，我不知道 JS/Jquery。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Guestbook -- My Coding</title>
<link rel="stylesheet" href="/css/styles.css" type="text/css">
<script type="text/javascript">
   function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }
    $("#display_post").click(function(){
    $("#post_new_table").slideToggle();
    }); 
</script>
</head>
<body>
<div id="wrapper">
    <?php
        $title = '<a href="/guestbook/adminlogin.html" style="color: white; text-decoration: none; cursor: text;">guestbook</a>';
        $desc = 'hassle-free conversations';
        require('../includes/header.html');

        //connect to DB.
        //REMOVED THIS PART
        /**************************************************************************/
        //form to add new post.
        if (isset($_POST['n'])) {
            echo ($_POST['n']);
        }
        else {};
    ?>
        <div id="post_new">
        <div id='display_post' onclick="">Click to post</div>
        <form action="/guestbook/add_post_gb.html" method="POST">
        <table id="post_new_table">
        <tr>
            <td>Name<red>*</red>:</td>
            <td><input type='text' name='name' style='width: 400px;' /></td>
        </tr>
        <tr>
            <td>E-Mail<red>*</red>:</td>
            <td><input type='text' name='email' style='width:400px;' /></td>
        </tr>
        <tr>
            <td>Message<red>*</red>:</td>
            <td><textarea name='message' style='width: 400px; height: 100px;'></textarea></td>
        </tr>
        <tr>
            <td>3*2=<red>*</red></td>
            <td><input type='text' name='human_test' style='width: 400px;' /></td>
        </tr>       
        <tr>
            <td></td>
            <td><input type='submit' name='postbtn' value='POST' />
        </tr>

        </table>
        </form>     
        </div> 
    <?php   
        //print_r($_POST);
        /**************************************************************************/
        What was here just outputted the already made comments.

</div>
<div style="position: fixed; right: 8px; bottom: 3px;"><a href="#">^Back to top^</a></div>
</body>

你正在将一个 click 事件附加到一个尚不存在的元素，你可以将 JavaScript 移动到 #post_new_table 元素下面，或者你可以将脚本放在 $（ document ）.ready（） 调用中。

$(document).ready(function(){
    $("#display_post").click(function(){                
        $("#post_new_table").toggle();
    }); 
});
将

js 包装在一个函数中，如下所示：

<script type="text/javascript">
$(function(){
   function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }
    $("#display_post").click(function(){
    $("#post_new_table").slideToggle();
    }); 
});
</script>

根据 JQuery API 文档，这应该可以工作：

$("#display_post").click(function(){
  $("#post_new_table").toggle();
});
相关文章：