I need to disable some filed and button in a form. The form shows user data and the button "Modifica" allow the user to modify field (username, mail, password). If user is worker can modify also exp and photo field. If user is manager this field are hidden.
I wrote some javascript in order to hide and disable fields but the button "modifica" seems to be blocked and I don't know why.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" media="all" href="../CSS/style.css" th:href="#{.../CSS/style.css}"/>
<script type="text/javascript" src="../js/updateProfile.js" th:src="#{/js/updateProfile.js}" defer> </script>
<script type="text/javascript" th:src="#{/js/loadimage.js}" defer ></script> <!--defer fa eseguire js dopo il parsing di html-->
</head>
<body>
<div class="container">
<div th:replace="header :: header"></div>
<h1>Profilo Utente</h1>
<div class="form">
<form action="updateprofile" method="post" enctype="multipart/form-data">
<p>
<label for="username">Username: </label><br>
<input type="text" id="username" name="username" th:attr="value=${session.user.username}" required/><br>
</p>
<p>
<label for="email">Mail: </label><br>
<input type="email" id="email" name="email" th:attr="value=${session.user.email}" required/><br>
</p>
<p>
<label for="password">Password: </label><br>
<input type="password" id="password" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Deve contenere almeno 8 caratteri di cui un numero, una lettera maiuscola e una lettera minuscola." /><br>
</p>
<div id="password-confirm-block">
<p>
<label id="text-password-confirm" for="password-confirm">Reinserisci password: </label><br>
<input type="password" id="password-confirm" />
</p>
<p id="password-message" class="error-message"></p>
</div>
<p>
Tipo di utente:<br>
<input type="radio" name="usertype" id="manager" value="manager" th:checked="${session.user.isManager!=null && session.user.isManager}" required/>
<label for="manager">Manager</label><br>
<input type="radio" name="usertype" id="worker" value="worker" th:checked="${session.user.isManager!= null && !session.user.isManager}" checked required/>
<label for="worker">Worker</label><br>
</p>
<div id="worker-data">
<p>
<label for="exp">Exp level:</label><br>
<select name="exp" id="exp">
<option value="" disabled selected>Exp level</option>
<option value="LOW" th:selected="${session.user.exp == 'LOW'}">LOW</option>
<option value="MEDIUM" th:selected="${session.user.exp == 'MEDIUM'}">MEDIUM</option>
<option value="HIGH" th:selected="${session.user.exp == 'HIGH'}">HIGH</option>
</select><br>
</p>
<p>
<label for="photo">Profile photo</label><br>
<div id="container"style="position: relative; width:300px;">
<canvas id="canvas_background" width="300px" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
</div>
<input type="file" name="photo" id="photo" accept="image/*"/><br>
</div>
<!-- TODO: Rivedere i messaggi di errore inseriti -->
<span class="error-message" th:if="${session.signupfailed}">Salvataggio non riuscito</span>
<p>
<input id="buttonModifica" type="button" value="Modifica" />
<input id="buttonAnnulla" type="reset" value="Annulla" />
<input id="buttonAggiorna" type="submit" value="Aggiorna" />
</p>
</form>
</div>
</div>
</body>
</html>
Javascript:
var username = document.getElementById("username");
var email = document.getElementById("email");
var password = document.getElementById("password");
var passwordConfirmBlock = document.getElementById("password-confirm-block");
var radioWorker = document.getElementById("worker");
var radioManager = document.getElementById("manager");
var exp = document.getElementById("exp");
var photo = document.getElementById("photo");
var buttonModifica = document.getElementById("buttonModifica");
var buttonAnnulla = document.getElementById("buttonAnnulla");
var buttonAggiorna = document.getElementById("buttonAggiorna");
function init() {
view();
buttonModifica.addEventListener("click", modify, true);
buttonAnnulla.addEventListener("click", view, true);
}
init();
function modify() {
unlockImputs();
buttonAnnulla.hidden=false;
buttonAggiorna.hidden=false;
buttonModifica.hidden=true;
}
function view() {
lockImputs();
buttonAnnulla.hidden=true;
buttonAggiorna.hidden=true;
buttonModifica.hidden=false;
}
function lockImputs (){
username.readOnly=true;
email.readOnly=true;
password.readOnly=true;
passwordConfirmBlock.hidden=true;
radioManager.disabled=true;
radioWorker.disabled=true;
exp.disabled=true;
photo.disabled=true;
}
function unlockImputs (){
username.readOnly=false;
email.readOnly=false;
password.readOnly=false;
radioManager.disabled=false;
radioWorker.disabled=false;
exp.disabled=false;
photo.disabled=false;
}
If you need to disable the button "Modifica", You can just set "disabled" to true for this button's id:
document.getElementById("buttonModifica").disabled = true;
You can get that HTML_DOM with document object then you can apply event listener on it.
Then get another id to which you want to disable and apply disable property into it
For reference :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled
Related
I have a form and 3 buttons on it: Preview, reset and submit. And I want a new window to pop up when I click on the preview. Unfortunately, it also pops up when I send it
<html lang="cs-cz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<link rel="stylesheet" href="styly.css">
<form name="submit" method="POST" action="preview.php" id="formID" onsubmit="target_popup(this)" >
<form name="submit" method="POST" action="mailer.php" >
<div class="box">
<h1>ODVOZY</h1>
<p class="info"><input type="text" name="name" class="textfield1" placeholder="Jméno a příjmení"/></p>
<p class="info"><input type="text" name="adress" class="textfield1" placeholder="Adresa"/></p>
<p class="info"><input type="text" name="contact" class="textfield1" placeholder="Kontakt"/></p>
<p class="info"><input type="text" name="model" class="textfield1" placeholder="Typ zboží"/></p>
<p class="info"><input type="datetime-local" name="date" class="textfield1" placeholder="Date"/></p>
<select name="money" class="info1" name="money" method="post">
<option value="Vyber způsob platby">Vyber způsob platby</option>
<option value="Placeno">Placeno</option>
<option value="Platit doma">Platit doma</option>
<option value="Placeno jen odvoz">Placeno jen odvoz</option>
<option value="Jiné (viz poznámky)">Jiné (viz poznámky)</option>
</select>
<select name="city" class="info1" name="city" method="post" >
<option value="Vyber pobočku">Vyber pobočku</option>
<option value="Dvůr Králové n/L">Dvůr Králové n/L</option>
<option value="Hořice">Hořice</option>
</select>
<textarea name="message" class="info1" type="text" cols="20" rows="5"placeholder="Poznámka"></textarea>
<p> </p>
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
<script src="script.js"></script>
</div>
</form> </form>
</body>
</html>
Here is the Javascript, can you please tell me where it is going wrong
var myForm = document.querySelector("#formID");
if(myForm === "#formID" ){
myForm.onsubmit = function() {
var w = window.open('about:blank','Popup_Window','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300,left = 312,top = 234');
this.target = 'Popup_Window';
}
;
Your code is really badly formatted and I see a lot of issues here
</form> </form>
for instance.
BTW you have
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
Do you want to submit the form when you click the preview button?
Otherwise change the type ( input type="button" instead of submit).
Add a function on the click and change the js consequently.
<input type="button" name="preview" onclick="openPopup()">
/// JS
function openPopup(){
var w = window.open('about:blank','...
}
Error codesI created the signup form page and If I skip entering the information, I want to make an alert box with javascript. But in JavaScript, it's showing the errors and doesn't show any alert if I skip. Is there any way to fix it? I will provide error codes with screenshot. Also, I want to do that If I click submit, I want to show Your request is successful box.
function validateForm() {
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var birthday = document.forms["myForm"]["birthday"].value;
var interest = document.forms["myForm"]["shopping"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
if (birthday == "") {
alert("Fill your birthday please");
return false;
}
if (shopping == "1") {
alert("Select your interested thing to do");
return false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Busy Bee Florist</title>
<meta charset="utf-8">
<link rel="stylesheet" a href="css/style.css">
</head>
<body>
<div id="containers">
<header>
<img src="images/logo.png">
</header>
<nav>
<div class="navbar">
Sign Up For Special Deals!"
Contact
Account
Cart
Gallery
<div class="dropdown">
<button class="dropbtn">Colors
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
White
Red
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Occasions
</button>
<div class="dropdown-content">
Congratulations
Generic
</div>
</div>
</div>
</nav>
<form></form>
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post"></form>
<div class="container">
<h1>Busy Bee Florist</h1>
<h4> Please Fill Up In the Form</h4>
<form>
<fieldset>
<legend>Personal Information:</legend>
Full Name: <input type="text" style="margin-left: 18px;" name="name" placeholder="Your Name"><br><br>
Email: <input type="email" style="margin-left: 51px;" placeholder="example#gmail.com" name="email"><br><br>
Date of birth: <input type="date" name="birthday">
</fieldset>
<br>
Which special offers you interest most?<br><br>
<input type="checkbox" name="shopping" value="Shopping"> Lemon Meringue Pie <br><br>
<input type="checkbox" name="shopping" value="Dining"> Respberry Cake <br><br>
<input type="checkbox" name="shopping" value="Dancing"> Bluebarry Muffins<br><br>
<input type="checkbox" name="shopping" value="caramelslice"> Caramel Slice <br><br>
<input type="checkbox" name="shopping" value="cheeryripeslice">Cheery Ripe Slice <br><br>
<input type="checkbox" name="shopping" value="chocolatechip">Chocolate Chip Muffin<br><br>
<div class="test3"><b>Terms and Condition</b><font color="red"></font></div>
<div class="test3"> <input type="radio" name="TC" value="agree" >I Agree</div>
<div class="test3"> <input type="radio" name="TC" value="disagree">I Disagree</div>
<br><br>
<div class="w">
<p>Please provide any additional feedbacks:- </p>
<br><br>
<textarea name="message" rows="5" cols="45" placeholder="Please Type Here...."></textarea>
<br><br>
</div>
<br><br>
<div id="q">
<button class="btn-submit" value="Submit Reservation" type="submit"> Submit </button>
<button class="btn-reset" value="Clear Input" type="reset"> Clear Input</button>
</div>
</form>
</div>
</form>
</body>
</html>
Let's perform some clean up to your HTML code first.
You have this in your form declaration
<form></form>
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post"></form>
Let's remove the empty form declaration and remove the close form tag immediately after your declaration. Change those 2 lines to the following:
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post">
It should function a lot more appropriately after those changes.
You had a few issues, as I detailed out in my comment.
Targeting the wrong form, myForm element was empty. So I changed this accordingly.
In your JS, you had interest declared but you tried to use variable shopping which you did not declare. So I changed that shopping to interest.
After amending all those mistakes, the code worked.
function validateForm(event) {
event.preventDefault(); //Pause form from submitting.
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var birthday = document.forms["myForm"]["birthday"].value;
var interest = document.forms["myForm"]["shopping"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
if (birthday == "") {
alert("Fill your birthday please");
return false;
}
if (interest == "1") {
alert("Select your interested thing to do");
return false;
}
else event.target.submit(); //submit, all checks were completed
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Busy Bee Florist</title>
<meta charset="utf-8">
<link rel="stylesheet" a href="css/style.css">
</head>
<body>
<div id="containers">
<header>
<img src="images/logo.png">
</header>
<nav>
<div class="navbar">
Sign Up For Special Deals!"
Contact
Account
Cart
Gallery
<div class="dropdown">
<button class="dropbtn">Colors
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
White
Red
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Occasions
</button>
<div class="dropdown-content">
Congratulations
Generic
</div>
</div>
</div>
</nav>
<div class="container">
<h1>Busy Bee Florist</h1>
<h4> Please Fill Up In the Form</h4>
<form name="myForm" action="action_page.php" onsubmit="validateForm(event)" method="post">
<fieldset>
<legend>Personal Information:</legend>
Full Name: <input type="text" style="margin-left: 18px;" name="name" placeholder="Your Name"><br><br>
Email: <input type="email" style="margin-left: 51px;" placeholder="example#gmail.com" name="email"><br><br>
Date of birth: <input type="date" name="birthday">
</fieldset>
<br>
Which special offers you interest most?<br><br>
<input type="checkbox" name="shopping" value="Shopping"> Lemon Meringue Pie <br><br>
<input type="checkbox" name="shopping" value="Dining"> Respberry Cake <br><br>
<input type="checkbox" name="shopping" value="Dancing"> Bluebarry Muffins<br><br>
<input type="checkbox" name="shopping" value="caramelslice"> Caramel Slice <br><br>
<input type="checkbox" name="shopping" value="cheeryripeslice">Cheery Ripe Slice <br><br>
<input type="checkbox" name="shopping" value="chocolatechip">Chocolate Chip Muffin<br><br>
<div class="test3"><b>Terms and Condition</b><font color="red"></font></div>
<div class="test3"> <input type="radio" name="TC" value="agree" >I Agree</div>
<div class="test3"> <input type="radio" name="TC" value="disagree">I Disagree</div>
<br><br>
<div class="w">
<p>Please provide any additional feedbacks:- </p>
<br><br>
<textarea name="message" rows="5" cols="45" placeholder="Please Type Here...."></textarea>
<br><br>
</div>
<br><br>
<div id="q">
<button class="btn-submit" value="Submit Reservation" type="submit"> Submit </button>
<button class="btn-reset" value="Clear Input" type="reset"> Clear Input</button>
</div>
</form>
</div>
</form>
</body>
</html>
Just starting with HTML and JavaScript, been set an assignment to use JavaScript for some logical function. I have created a form and wanted to check that the elements are filled in correctly. I have tried to look at the duration and ideally wanted to set a minimum value upon submission, however it is not working as expected.
I have to use codepen for the assignment which has a separate column for JavaScript but I have put the code used in the form, not sure what I need to do.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student recovery recording</title>
<link rel="stylesheet" href="newstyle.css" />
<meta charset="UTF-8" />
</head>
<body>
<header><h1>Student Recovery Recording</h1></header>
<main>
<div class="container1">
<p>form content goes here</p>
</div>
<div class="container">
<form name="myForm" form action="" method="get">
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" />
</div>
<div class="form-row">
<label for="Exam"> Exam Code:</label>
<select name="Exam" id="Exam">
<option value="">--Please choose the correct Exam code--</option>
<option value="code1">AT017</option>
<option value="code2">CT154</option>
<option value="code3">AT317</option>
<option value="code4">BT141</option>
</select>
</div>
<div class="form-row">
<label for="reason"> Reason For Training:</label>
<select name="reason" id="reason">
<option value="">
--Please select the correct reason for training
</option>
<option value="train1">ATT</option>
<option value="train2">ITT</option>
<option value="train3">ETT</option>
</select>
</div>
<div class="form-row">
<label for="date">Date:</label>
<input type="date" id="date" />
</div>
<div class="form-row">
<label for="Studentname"> Student Name:</label>
<input type="text" id="Studentname" />
</div>
<div class="form-row">
<label for="Duration">Duration:</label>
<input type="time" id="Duration" min="1:00" />
</div>
<div class="form-row">
<textarea name="comment" rows="4" cols="50">
Enter details of work carried out and KLP's covered here...</textarea
>
</div>
<input type="submit" value="Submit" onclick="myFunction()" />
<script>
function myFunction() {
var text;
if (document.getElementById("Duration").validity.rangeUnderflow) {
text = "Not enough Recovery Time";
} else {
text = "Recovery Time acceptable";
}
document.getElementById("myForm").innerHTML = text;
}
</script>
</form>
</div>
</main>
<footer>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img
style="border: 0; width: 88px; height: 31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"
/>
</a>
</p>
</footer>
</body>
</html>
Maybe you can use setTimeOut() method to the set duration trigger the method when the user load the window or the user starting to press the key.
example:
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" onkeypress="setTimeout(showSubmitButton(), 5000)" /> //trigger showSubmitButton() when key pressed wait 5 sec then run showSubmitButton()
<input type="submit" id="submit" value="submit" style="display:none">// set display to none for hiding the button
</div>
<script>
function showSubmitButton() {
document.getElementById("submit").style.display = "block" // show the button after 5 sec
}
</script>
hope this help you
I have to make a registration page in a project that uses Django as the backend framework.. In the registration page, I have to input the names, email, password and mobile... During registration, I need to validate email if its a valid format, check if the mobile number is of 10 digits and check if the password is a strong one.. I want to do it using javascript... I have written the code for the form and also the javascript function... But while running on the server I am unable to get the desired validation checks and alerts... Please help what should i do?
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% load static %}
<link rel="stylesheet" href="{% static 'signup1.css'%}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<!--Javascript form validator-->
<link rel="stylesheet" href="{% static './register.js' %}">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="text-center">
<h1>Signup</h1>
<h6>Register yourself</h6>
</div>
<form style="text-align: top;" name="myForm" method="POST" action="" onsubmit="validate()" >
{% csrf_token %}
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>First Name</b></label>
<input type="text" name="first_name"placeholder="First Name" class="form-control" id="name" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Last Name</b></label>
<input type="text" name="last_name"placeholder="Last Name" class="form-control" id="name" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Mobile Number</b></label>
<input type="tel" name="mobile" class="form-control" id="number" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"><b>Email address</b></label>
<input type="email" name="email" placeholder="Enter Email Id" class="form-control" id="email" required aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"><b>Password</b></label>
<input type="password" name="password" placeholder="Enter Password" class="form-control" id="password" required>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"><b>Your Choice</b></label><br>
<input type="radio" id="user" name="user_type" value="user">
<label for="html">User</label><br>
<input type="radio" id="admin" name="user_type" value="admin">
<label for="css">Admin</label><br>
</div>
<button type="submit" class="btn btn-primary" onclick="validate()">Submit</button>
</form>
<a style="color: aqua; margin-top: 10px;" href="http://localhost:8000/"><small>Already Registered? Click to login</small></a>
</div>
</div>
</div>
</div>
</body>
</html>
register.js (In static folder of the project)
function validate()
{
var abc=document.forms["myForm"]["first_name"].value;
if(abc=="")
{
alert("Please enter the first name");
return false;
}
var def=document.forms["myForm"]["last_name"].value;
if(def=="")
{
alert("Please enter the last name");
return false;
}
var email = document.forms["myForm"]["email"].value;
var re = "/^[a-z0-9+_.-]+#[a-z0-9.-]+$"
var x=re.test(email);
if(x)
{}
else
{
alert("Email id not in correct format");
return false;
}
var mobile = document.forms["myForm"]["mobile"].value;
var check="^(\+91[\-\s]?)?[0]?(91)?[789]\d{9}$"
var a=check.test(mobile);
if(a)
{}
else
{
alert("Invalid mobile number");
return false;
}
var pass=document.forms["myForm"]["password"].value;
var checks="^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[#$!%?&])[A-Za-z\d#$!%?&]{8,}$"
var res=checks.test(pass);
if(res)
{}
else
{
alert("Password must contain atleast 1 small, 1 capital, 1 numeric, 1 special character and must be atleast 8 characters long");
return false;
}
}
Your regular expressions are formatted as strings, not regular expressions.
For example...
// re is string
var re = "/^[a-z0-9+_.-]+#[a-z0-9.-]+$"
var x=re.test(email);
// re is regex
var re = /^[a-z0-9+_.-]+#[a-z0-9.-]+$/
var x=re.test(email);
I face problem that my div.hide is not working, because it just shows and whenever I click back link "reply" it's does not hide.
JavaScript
<script type="text/javascript">
$('body').on('click','a.btnGG',function(){
var va=$(this).data('comment_id');
$("#parent_id").val(va);
$("#formReply").attr("va",$("#formReply").attr("va") + va);
$(".formms").hide();
$(this).after('<div class="formms">'+$(".gg").html()+'</div>');
$("#hides").onclick(function (){
$(".gg").css("display","block");
});
</script>
tpl
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
I'm beginner programmer.
It's hard to tell what you are doing with your code. If you simply want to display div or hide clicking on reply button, there's a complete code (TPL file):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
<script type="text/javascript">
$('body').on('click','a.btnGG',function() {
$(".gg").toggle();
});
</script>
</body>
</html>
<a href="javascript;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
// Code
</div>
Change it to something like
<a href="#" id="hides" class="btnGG" > reply</a>
<div class="gg" id="testid" style="display:none;">
// Code
</div>
and use script like
$(document).ready(function(){
$("#hides").onclick(function(){
$("#testid").toggle("show");
});
});