CODEWITHSUNDEEP
javascriptjqueryhtml
Salamander115
Salamander115

Reputation: 29

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

I am making a site that has a guestbook page. On the page there is a conversation area, at the top there is a link that says \'Click To post\'. I tried to use jquery to make it display the form that allows you to add to the page, but i can't seem to make it work. I have been able to get it to work using plain javascript, but with no animation, so i have tryed to use .slideToggle(); But with no success. There is a lot of code and i'm not sure where the culprit is, so im sorry if it is really long. The function directly after the script tag is what i used originally.

Just in case this is a dumb mistake, i don't know 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>

Upvotes: 0

Views: 79

Answers (3)

EsIstIch
EsIstIch

Reputation: 1

According to the JQuery api doc this should work:

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

Upvotes: 0

Jorge Zuverza
Jorge Zuverza

Reputation: 915

wrap your js in a function as follows:

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

Upvotes: 0

The Code Father
The Code Father

Reputation: 116

You are attaching a click event to an element that doesn't yet exist, you can either move the JavaScript below the #post_new_table element, or you can place your script within a $( document ).ready() call.

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

Upvotes: 2

Related Questions