+ Start a Discussion
ankur khattriankur khattri 

comment section is not working.i have made a form using css and js.submit comment is not working..

<apex:page >
    <head>
        <meta name = "viewport" content = "width=device-width, initial-scale=1"/>
        <link href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>
        <link href="css.css" rel="stylesheet" type="text/css"/>
        <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
        <title>Comment Box</title>
    </head>
    
    <html style="height: 100%;">
        <head>
            <meta name = "viewport" content = "width=device-width, initial-scale=1"/>
            <link href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>
            <link href="css.css" rel="stylesheet" type="text/css"/>
            <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
            <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
            
             <style>
                 #p.ex {
                height: 1034px;
                width: 100px;
                }
                 #body {
                width: 1054px;
                height: 1054px;
                background-color: #F4F4F4;
                }
                #wrap{
                border: 1px solid lightgray;
                alignment-adjust: central;
                width: 1000px;
                margin-left: 50px;
                margin-top: 10px;
                padding-bottom: 50px;
                }
                h1{
                /*color: blue-violet;*/
                text-align: center;
                }
                
                h3.heading{
                margin-left: 20px;
                background-color: #fafafa;
                font-size: 25px;
                float: left;
                padding-left: 40px;
                position: relative;
                width: 405px;
                height: 40px;
                padding-top: 5px;
                
                }
                /*#upper_blank{
                border-bottom: 3px solid #ee5d10;
                margin-top: 40px;
                margin-right: 480px;
                width: 520px;
                padding-right: 480px;
                }*/
                #name{
                margin-left: 20px;
                box-shadow: 0 2px 0 #e6e6e6;
                height: 40px;
                padding-left: 10px;
                width: 500px;
                }
                #name2{
                margin-left: 20px;
                padding-left: 10px;
                height:50px ;
                width:50px ;
                }
                #email{
                margin-left: 20px;
                box-shadow: 0 2px 0 #e6e6e6;
                height: 40px;
                padding-left: 10px;
                width: 500px;
                }
                #url{
                margin-left: 20px;
                box-shadow: 0 2px 0 #e6e6e6;
                height: 40px;
                padding-left: 10px;
                width: 500px;
                }
                #comment{
                margin-left: 20px;
                box-shadow: 0 2px 0 #e6e6e6;
                height: 40px;
                padding-left: 10px;
                width: 650px;
                height: 200px;
                }
                #commentSubmit{
                margin-left: 20px;
                width: 100px;
                height: 30px;
                color: white;
                font-size: 10px;
                background-color: #ee5d10;
                margin-bottom: 30px;
                padding-left: 10px;
                border-radius: 0px;
                }
                #commentSubmit:hover {
                background-color: #d65e1f;
                }
                h3.second_heading{
               /* margin-left: 0;
                margin-top: 30px;
                font-size: 20px;
                width: 250px;
                height: 50px;
                padding-top: 10px;
                padding-left: 55px;*/
                
                margin-left: 900px;
                margin-top: 100px;
                padding-top: 0px;
                padding-left: 0px;
                width: 30px;
                height: 10px;
                background-color: #ee5d10;
                align: right;
                font-size: 10px;
                color: white;
                border-radius: 0px;
                }
                #middle{
                border: 1px solid lightgray;
                width: 1000px;
                height: 200px;
                background-color: #F7F7F7;
                margin-left: 45px;
                text-align: left;
                margin-top: 10px;
                }
                .blank{
                border-bottom: 3px solid #ee5d10;
                margin-top: 40px;
                margin-left: 50px;
                margin-right: 480px;
                width: 520px;
                padding-right: 480px;
                }
                #inner_reply{
                margin-left: 800px;
                margin-top: 160px;
                width: 100px;
                height: 30px;
                background-color: #ee5d10;
                text-align: center;
                font-size: 18px;
                color: white;
                border-radius: 8px;
                }
            </style>
            
            <script>
                   function previewFile()
                   {
                   var preview = document.querySelector('img'); //selects the query named img
                   var file    = document.querySelector('input[type=file]').files[0]; //sames as here
                   var reader  = new FileReader();
                   reader.onloadend = function ()
                   {
                   preview.src = reader.result;
                   }
                   if (file)
                   {
                       reader.readAsDataURL(file); //reads the data as a URL
                   } else
                   {
                   preview.src = "";
                   }
                  }
                  previewFile();  //calls the function named previewFile()
                  </script>
            
        </head>
        <body style="height: 100%;">
            <!------------container------->
            
            <div class="container">
            
            <!-------Wrap------------>
            <div id="wrap">
           
            <div class="row">
            <div class="col-md-5">
            </div>
            <div class="col-md-7">
            <div id="upper_blank"></div>
            </div>
            </div>
            
            
            <!------------Form Start---------->
            
            <div id='form'>
            <div class="row">
            <div class="col-md-12">
            
            <form action="" method="POST" id="commentform">
            
            <input type="file" onchange="previewFile()"/><br></br>
            <img src="" alt="Image preview..." id="name2"/>
            
            <div id="comment-name" class="form-row">
            <input type = "text" placeholder = "Name (required)" name = "dname"  id = "name" />
            </div>
            <div id="comment-message" class="form-row">
            <textarea name = "comment" placeholder = "Message" id = "comment" ></textarea>
            </div>
            <a href="#"><input type="submit" name="dsubmit" id="commentSubmit" value="Submit Comment"/></a>
 
            </form>
            
            </div>
            </div>
            </div>
            </div>
            
            <!-------------------Reply Section------->
            <div id="second">
            <div class="row">
            <div class="col-md-2">
            <h3 class="second_heading">Q&amp;A</h3>
            </div>
            <div class="col-md-10">
            <div class="blank"></div>
            </div>
            </div>
            </div>
            <div id="middle">
            <form>
            <a href="#"><input type = "text" value = "reply" name = "dreply" id = "inner_reply"/></a>
            </form>
            </div>
            
            </div>
        </body>
    </html>
    
</apex:page>
Prem Anandh 1Prem Anandh 1
There is no action on your comment button. Can you please tell me what you are expecting here?
ankur khattriankur khattri
i want comments to be added in the lower div of reply section