How to hide a textarea? - javascript

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");
});
});

Related

Form: preview button in popup window, submit button without popup window

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','...
}

How to edit the form in html using edit button with javascript

I create a form which allows to view the form information in a
different page for the user to view using "view" button and I want
a "edit" button to edit the same details of the form by redirecting
to the previous page. I tried using window.history.back(); it didn't
work.
html file Index.html - the form
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="container">
<form action="result.html" method="GET">
<h1>Send us an Enquiry?</h1>
<h3>Fill in the Details Below</h3>
<input type="text" id="name" name="name" placeholder="Enter Name" />
<input type="text" id="email" name="email" placeholder="Enter Email" />
<select name="subject" id="subject" value="Subject">Subject
<option value="Destinations">Destinations</option>
<option value="Pricing">Pricing</option>
<option value="Accommodation">Accommodation</option>
<option value="Other">Other</option>
</select>
<textarea id="details" name="details" placeholder="Enter Details"></textarea>
<input type="submit" class="btn" value="View" onclick="handleSubmit()" />
</form>
</div>
</body>
</html>
The page view the form details result.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="result.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<h1>
Form Details
</h1>
<h2>
Name: <span id="result-name" />
</h2>
<h2>Email: <span id="result-email" />
</h2>
<h2>
Subject: <span id="result-subject" />
</h2>
<h2>Details: <span id="result-details" />
</h2>
<div class="action-btn">
<div class="inner">
<form action="" method="GET">
<input class="btn" type="submit" value="Edit" onclick="returnBack()" />
</div>
</form>
<div class="inner">
<form onsubmit="sendEmail(); reset(); return false;">
<input class="btn-1" type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The javascript file result.js
//call function using event listener
window.addEventListener('load',() => {
//create a const variable
const params = (new URL(document.location)).searchParams;
const name = params.get('name');
const email = params.get('email');
const subject = params.get('subject');
const details = params.get('details');
document.getElementById("result-name").innerHTML = name;
document.getElementById("result-email").innerHTML = email;
document.getElementById("result-subject").innerHTML = subject;
document.getElementById("result-details").innerHTML = details;
})
function returnBack(){
window.history.back();
}
I think the type="submit" in tag input is the problem. You should remove it and try again.

How to submit for after all the fields are filled in JavaScript

Basically I have a HTML form that contains a textbox and a submit button, what I want is when I pressed submit button it should check for the textbox that it have no error then proceed with submission.
Here is my button code:
<form id="thisform">
<div id="Registeration" class="Registeration">
<input type="text" id="textbox" class="textbox"
placeholder="My textbox" name="fBox" maxlength="30"/>
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="submitform" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" onclick="submit()"/>
</div></form>
function(){
alert('hello');
return false;
}
Here's a plain JS example where the form is only submitted if the text is at least 5 characters long.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="result.html" class="da-form">
<input type="text" name="textbox" class="textbox">
<input type="submit" class="submit">
</form>
<script>
var formEl = document.querySelector('.da-form');
var submitBtn = document.querySelector('.da-form .submit');
var textEl = document.querySelector('.textbox');
submitBtn.addEventListener('click', function(event) {
event.preventDefault();
if (textEl.value.length >= 5) {
formEl.submit();
} else {
console.error('text should be at least 5 chars long');
}
console.log();
});
</script>
</body>
</html>
you can use AngularJS:
Angular allow you to get status about your form: $invalid/$valid
the following code will disable the button until the form will be valid:
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
please see the following example:
HTML:
<div ng-app>
<form ng-controller="FormController" name="myForm">
<div class="header padding-b--10">Form Area</div>
<div class="padding-b--10">
<input name="empId" placeholder="Employee ID" ng-model="data.empId"
style="padding:5px" required/>
<span ng-if="myForm.empId.$dirty && myForm.empId.$invalid" ng-bind="invalid" class="error"></span>
</div>
<div class="padding-b--10">
<input name="empEmail" type="email" placeholder="Email" ng-model="data.empEmail"
style="padding:5px" required/>
<span ng-if="myForm.empEmail.$dirty && myForm.empEmail.$invalid" ng-bind="invalid" class="error"></span>
</div>
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
</form>
Controller:
function FormController($scope){
$scope.invalid = "Invalid";
$scope.submit = function(){
console.log($scope.data);
}
};
Working Example: https://jsfiddle.net/pqz3hsac/22/

Disable Multiple Form and enable one form Based on Condition in Javascript or jquery

I have four form like form-1 , form-2 , form-3 , form-4 and three Buttons as Button-1, Button-2 , Button-3.
When first jsp page load it has form elements which will display on the screen.
Now my question is when i click to button-2 it should display form-2 and disable other three forms (form-1 , form-3 , form-4 ).Same case with the others two buttons.
Please provide me proper solution using javascript or jquery.
I am using jsp page for html form design.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
});
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
});
$("#b3").click(function(){
alert("jj");
$("#f1,#f2,#f4").hide();
$("#f3").show();
});
</script>
<style type="text/css">
#f2,#f3,#f4{
display: none;
}
</style>
</head>
<body >
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
</body>
</html>
I have done the coding as per above answer but i am not able to get the different form when i click. I check with alert message also the click is not working . Please tell me where i am doing wrong.
here is the sample.
live Demo : http://jsfiddle.net/a6NJk/626/
Html
You need four forms and three buttons for this:
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
Jquery
When you will click in the button you need to show corresponding form and hide all other form.
see jquery api : http://api.jquery.com/
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
})
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
})
$("#b3").click(function(){
$("#f1,#f2,#f4").hide();
$("#f3").show();
})
CSS
#f2,#f3,#f4{
display: none;
}
If you wanted to use anchor tag instead of button then change your html :
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<a href="javascript:void(0)" id="b1" > b1</a >
<a href="javascript:void(0)" id="b2" > b2</a>
<a href="javascript:void(0)" id="b3" > b3</a >
Demo : http://jsfiddle.net/a6NJk/627/

unable to add new text box on onclick() using javascript and disable an element

I am not able to add a new input box after the onclick event is called and is there way to disable the select options after the input box appears? I am sorry for such a noob question but I am at the dead end here, been trying this for an hour. Please link me to a place where I can easily learn JS with examples.
<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div name="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/>
<select name = "category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
</div>
<select name = "site_type">
<?php
displaySitetype();
?>
</select>
<input type="submit" value="Submit data">
</form>
Try changing <div name="cat"> to
<div id="cat">
.getElementById only works on IDs,
as in
document.getElementById("cat");
If you want to leave <div name="cat"> you should use .getElementsByTagName[0] instead.
As foir a a link to learn JavaScript by example, I recommend the W3Schools JavaScript Tutorial, as they let you try out code as you learn it on their website. Once you become more familiar, you can reference the Mozilla Developer Network.
Here
var foo = document.getElementById("cat"); is giving null
There is no element exist with id cat
Error is:TypeError: foo is null
Change this:
<div name="cat">
To this:
<div id="cat">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Untitled Document
</title>
<script>
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<td><input type='text'<td><input type='text'<td><input type='text' name='food'name='food'name='food'name='food'>";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<td>
<input name="food" type="text" id="food" />
</td>
<td>
<input name="food" type="text" id="food" />
</td>
<div id="div">
</div>
<td>
<input type="button" value="Add" onclick="generateRow()"/>
</td>
<td>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</td>
</form>
</body>

Categories