Django button submit not work after using javascript code

Django button submit not work after using javascript code - javascript

This would be my Registration page. When the script html tag testscript.js code is remove or commented out, the register button works perfectly fine but when I input the testscript.js, the register button is kind of disabled. So, I think the problem is the javascript code because that's the only part of the code that blocks the function of the register button.
Here's my source code:
views.py:
def registration(request):
form = CustomUserCreationForm()
print("Working Form")
if request.method == 'POST':
form = CustomUserCreationForm(request.POST)
print("Form Submitted")
if form.is_valid():
form.save()
context = {'form' : form}
return render(request, 'activities/index.html', context)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../static/CSS/styles.css">
<link rel="stylesheet" href="../static/CSS/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../static/CSS/css/bootstrap.min.css">
<script src="../static/Javascript/js/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- Header -->
<div class="site-header" >
<nav class="navbar fixed-top navbar-expand-lg navbar-dark index__navbar scrolled">
<div class="container-fluid">
<div>
<img class="navbar-icon" style="margin-left:15px;" src="../static/Media/avatar.png" alt="dasma-logo">
<span id="hideHomeTitle" class="brand__name" style="color:#2c5f2dff;">Preschooler Profiling and Monitoring</span>
</a>
</div>
</div>
</nav>
</div>
<!-- Form -->
<div class="container-fluid" id="homeBody">
<br>
<div class="form">
<div class="form-toggle"></div>
<div class="form-panel one">
<div class="form-header">
<h1>Login</h1>
</div>
<div class="form-content">
<form action="">
<div class="form-group">
<label for="">Username</label>
<input type="text" id="username" name="username">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="password" id="password" name="password">
</div>
<div class="form-group">
<label class="form-remember">
<input type="checkbox">Remember Me
</label><a class="form-recovery" href="">Forgot Password?</a>
</div>
<div class="form-group">
<button type="submit">Log In</button>
</div>
</form>
</div>
</div>
<div class="form-panel two">
<div class="form-header">
<h1>Register Account</h1>
</div>
<div class="form-content">
<form method="POST" action="">
{% csrf_token %}
<div class="input-group mb-3">
<label for="">User Type</label>
{{ form.user_type }}
<br>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<label for="">First Name</label>
{{ form.first_name }}
</div>
<div class="col">
<label for="">Last Name</label>
{{ form.last_name }}
</div>
</div>
</div>
<div class="form-group">
<label for="">Email Address</label>
{{ form.email }}
</div>
<div class="form-group">
<label for="">Password</label>
{{ form.password1 }}
</div>
<div class="form-group">
<label for="">Confirm Password</label>
{{ form.password2 }}
</div>
<div class="form-group">
<button type="submit">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../static/Javascript/testscript.js"></script>
</html>
testscript.js:
$(function () {
$(document).scroll(function () {
var $nav = $(".fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
$(document).ready(function() {
var panelOne = $('.form-panel.two').height(),
panelTwo = $('.form-panel.two')[0].scrollHeight;
$('.form-panel.two').not('.form-panel.two.active').on('click', function(e) {
e.preventDefault();
$('.form-toggle').addClass('visible');
$('.form-panel.one').addClass('hidden');
$('.form-panel.two').addClass('active');
$('.form').animate({
'height': panelTwo
}, 200);
});
$('.form-toggle').on('click', function(e) {
e.preventDefault();
$(this).removeClass('visible');
$('.form-panel.one').removeClass('hidden');
$('.form-panel.two').removeClass('active');
$('.form').animate({
'height': panelOne
}, 200);
});
});
styles.css:
/* Login Form */
.overlay, .form-panel.one:before {
position: absolute;
top: 0;
left: 0;
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
}
.form {
z-index: 15;
position: relative;
background: #FFFFFF;
width: 600px;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
margin: 100px auto 10px;
overflow: hidden;
}
.form-toggle {
z-index: 10;
position: absolute;
top: 60px;
right: 60px;
background: #FFFFFF;
width: 60px;
height: 60px;
border-radius: 100%;
transform-origin: center;
transform: translate(0, -25%) scale(0);
opacity: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.form-toggle:before, .form-toggle:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 4px;
background: rgb(33, 146, 71);
transform: translate(-50%, -50%);
}
.form-toggle:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.form-toggle:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.form-toggle.visible {
transform: translate(0, -25%) scale(1);
opacity: 1;
}
.form-group{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 20px;
}
.form-group:last-child {
margin: 0;
}
.form-group label ,.input-group label{
display: block;
margin: 0 0 10px;
color: rgba(0, 0, 0, 0.6);
font-size: 12px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.two .form-group label ,.input-group label{
color: #FFFFFF;
}
.form-group input {
outline: none;
display: block;
background: rgba(0, 0, 0, 0.1);
width: 100%;
border: 0;
border-radius: 6px;
box-sizing: border-box;
padding: 12px 20px;
color: rgba(0, 0, 0, 0.6);
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: inherit;
transition: 0.3s ease;
}
.form-group input:focus {
color: rgba(0, 0, 0, 0.8);
}
.two .form-group input {
color: #FFFFFF;
}
.two .form-group input:focus {
color: #FFFFFF;
}
.form-group button {
outline: none;
background: rgb(33, 146, 71);
width: 100%;
border: 0;
border-radius: 4px;
padding: 12px 20px;
color: #FFFFFF;
font-family: inherit;
font-size: inherit;
font-weight: 500;
line-height: inherit;
text-transform: uppercase;
cursor: pointer;
}
.two .form-group button{
background: #FFFFFF;
color: rgb(33, 146, 71);
}
.form-group .form-remember {
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.form-group .form-remember input[type=checkbox] {
display: inline-block;
width: auto;
margin: 0 10px 0 0;
}
.form-group .form-recovery {
color: rgb(33, 146, 71);
font-size: 12px;
text-decoration: none;
}
.form-panel {
padding: 60px calc(5% + 60px) 60px 60px;
box-sizing: border-box;
}
.form-panel.one:before {
content: "";
display: block;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
}
.form-panel.one.hidden:before {
display: block;
opacity: 1;
visibility: visible;
}
.form-panel.two {
z-index: 5;
position: absolute;
top: 0;
left: 95%;
background: rgb(33, 146, 71);
width: 100%;
min-height: 100%;
padding: 60px calc(10% + 60px) 60px 60px;
transition: 0.3s ease;
cursor: pointer;
}
.form-panel.two:before, .form-panel.two:after {
content: "";
display: block;
position: absolute;
top: 60px;
left: 1.5%;
background: rgba(255, 255, 255, 0.2);
height: 30px;
width: 2px;
transition: 0.3s ease;
}
.form-panel.two:after {
left: 3%;
}
.form-panel.two:hover {
left: 93%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.form-panel.two:hover:before, .form-panel.two:hover:after {
opacity: 0;
}
.form-panel.two.active {
left: 10%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
cursor: default;
}
.form-panel.two.active:before, .form-panel.two.active:after {
opacity: 0;
}
.form-header {
margin: 0 0 40px;
}
.form-header h1 {
padding: 4px 0;
color: rgb(33, 146, 71);
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
}
.two .form-header h1 {
position: relative;
z-index: 40;
color: #FFFFFF;
}
I know it's too long but I hope someone would have a solution for this. Thanks!

The Django button which is not working after using javascript code is because , I feel like the div with form-panel is been used in the Js code whereas If you see the button is also under the same tag(form-panel). Try by removing the button div and place it outside the main div.
I hope it help. Best of luck

Related

fixed grid navbar and sidebar

I am working now on a control panel using HTML CSS, I split the page using grid layout, but the problem is that the navbar & sidebar is not fixed
I have tried several methods including position: fixed;
overflow-y: auto but that didn't work for me.
https://jsfiddle.net/khalil_elyacubi/ckj8bqe9/2/
picture one
picture two

I hope you are looking for something like this.
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template +=
'<span class="custom-select-trigger">' +
$(this).attr("placeholder") +
"</span>";
template += '<div class="custom-options">';
$(this)
.find("option")
.each(function() {
template +=
'<span class="custom-option ' +
$(this).attr("class") +
'" data-value="' +
$(this).attr("value") +
'">' +
$(this).html() +
"</span>";
});
template += "</div></div>";
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(
function() {
$(this)
.parents(".custom-options")
.addClass("option-hover");
},
function() {
$(this)
.parents(".custom-options")
.removeClass("option-hover");
}
);
$(".custom-select-trigger").on("click", function() {
$("html").one("click", function() {
$(".custom-select").removeClass("opened");
});
$(this)
.parents(".custom-select")
.toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this)
.parents(".custom-select-wrapper")
.find("select")
.val($(this).data("value"));
$(this)
.parents(".custom-options")
.find(".custom-option")
.removeClass("selection");
$(this).addClass("selection");
$(this)
.parents(".custom-select")
.removeClass("opened");
$(this)
.parents(".custom-select")
.find(".custom-select-trigger")
.text($(this).text());
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
transition: 0.3s;
}
html,body{
height:100%;
}
.container{
display: grid;
grid-template-columns: 260px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
height: 100%;
}
/*------------------------------------*/
/* Navbar */
/*------------------------------------*/
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: sticky;
}
.left-nav a{
font-weight: 300;
font-size: 13px;
text-decoration: none;
color: white;
margin: 0 10px;
}
.left-nav a:hover{
color: rgb(187, 187, 187);
}
.left-nav i:hover{
color: rgb(187, 187, 187);
}
.navbar{
grid-area: header;
background-color: rgba(38, 40, 48, 1);
color: white;
align-items: center;
height: 100%;
}
/*------------------------------------*/
/* Sidebar */
/*------------------------------------*/
.sidebar{
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.sidebar{
grid-area: sidebar;
background-color: rgba(38, 40, 48, 1);
color: white;
}
.logo{
padding: 20px;
}
.logo img{
width: 100%;
}
.category-head{
display: flex;
flex-direction: row;
align-items: flex-start;
width: 83%;
justify-content: space-between;
font-size: small;
font-weight: 300;
color: rgba(255, 255, 255, 0.452);
margin-top: 15%;
}
.width_element{
width: 81%;
}
.category-pages, .category-select{
display: flex;
flex-direction: column;
width: 84%;
}
.category-select{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 2.5% 7%;
color: #C6C6C7;
font-weight: 400;
transition: .3s;
font-size: 0.93rem;
}
.category-select:hover{
background-color: rgba(255, 255, 255, 0.06);
border-radius: 5px;
color: white;
}
.categorySelected{
color: rgba(255, 185, 97, 1);
box-shadow: 0px 0px 21px -13px #ff9d1c6b;
background-color: rgba(53, 56, 65, 1);
border-radius: 5px;
margin-top: 5%;
padding: 3.5% 7%;
}
/*-------select box-------*/
select {
z-index: 3;
float: left;
}
/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
cursor: pointer;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
font: 13px/1.5 "Poppins", sans-serif;
}
.custom-select-trigger {
position: relative;
/* display: block; */
min-width: 130px;
padding: 6% 104px 6% 25px;
font-weight: 600;
color: #6e7c83;
line-height: 50px;
background-color: rgba(53, 56, 65, 1);
border-radius: 7px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.custom-select-trigger:hover {
-webkit-box-shadow: 0px 10px 50px 0px rgba(70, 73, 83, 0.10);
box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
}
.custom-select-trigger:before {
position: absolute;
display: block;
content: "";
width: 1px;
height: 50px;
top: 3px;
right: 50px;
margin-top: -3px;
transition: all 0.35s ease-out;
transform-origin: 50% 0;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 20px;
margin-top: -3px;
border-bottom: 1px solid #c7d1d6;
border-right: 1px solid #c7d1d6;
transform: rotate(45deg) translateY(-50%);
transition: all 0.35s ease-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%;
left: 0%;
right: 0;
width: 100%;
margin: 10px 0;
border-radius: 5px;
box-sizing: border-box;
/* box-shadow: 0 2px 1px rgba(0, 0, 0, .1); */
background: rgba(53, 56, 65, 1);
transition: all 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
border: 0;
height: 300px;
overflow-y: auto;
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(-8px);
-webkit-box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10);
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
font: 13px/1.5 "Roboto", sans-serif;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all 0.05s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.custom-option:hover,
.custom-option.selection {
color: #fff;
background-color: rgba(253, 183, 102, 0.1);
border: 1px solid rgba(253, 183, 102, 1);
}
/*-------select box end*-------/
/*------------------------------------*/
/* main content */
/*------------------------------------*/
.main{
justify-content: start;
display: flex;
flex-direction: column;
align-items: center;
grid-area: main;
background-color: rgba(30, 31, 37, 1);
color: white;
height: 100%;
overflow-y: auto;
}
.cotainer{
margin-top: 2%;
width: 90%;
height: auto;
display: flex;
flex-direction: column;
align-content: center;
}
.server-banner{
width: 100%;
height: 250px;
/* background: url(./baner1.png) no-repeat; */
filter: blur(5px);
border-radius: 10px;
/* background-size: cover; */
overflow: hidden;
}
.server-banner img{
width: 100%;
position: relative;
top: -140px;
opacity: 25%;
z-index: -1;
}
.server{
display: flex;
align-items: center;
margin-left: 3%;
position: relative;
bottom: 55px;
}
.server img{
width: 9%;
}
.server-members{
padding-left:2%;
}
/*------------------------------------*/
/* Scroll Bar */
/*------------------------------------*/
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/solid.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>grid dashboard</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="left-nav">
<i class="fas fa-plus"></i> Support server
<i class="fas fa-code"></i> Commands
</div>
<div class="right-nav">user.icos</div>
</div>
<div class="sidebar">
<div class="logo"><img src="./logo.png" alt="" srcset=""></div>
<select name="potencial" id="potencial" class="custom-select sources" placeholder="Ticket Manager">
<option value="DH" selected><img src="server-logo.png" alt="server-logo"> Ticket Manager</option>
<option value="A">Ticket Manager</option>
<option value="B">Ticket Manager</option>
<option value="C">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D">Ticket Manager</option>
<option value="D"><i class="fas fa-cog"></i>Ticket Manager</option>
</select>
<div class="category-head">General <i class="fas fa-angle-down"></i></div>
<div class="category-pages">
<div class="category-select categorySelected"><div class="title">Overview</div> <div class="icon"><i class="fas fa-chart-bar"></i></div></div>
<div class="category-select "><div class="title">Premium</div> <div class="icon"><i class="fas fa-crown"></i></div></div>
</div>
<div class="category-head width_element">Customise bot<i class="fas fa-angle-down"></i></div>
<div class="category-pages">
<div class="category-select"><div class="title">Settings</div> <div class="icon"><i class="fas fa-cog"></i></div></div>
<div class="category-select"><div class="title">Pannels</div> <div class="icon"><i class="fas fa-paper-plane"></i></div></div>
<div class="category-select"><div class="title">Logs</div> <div class="icon"><i class="fas fa-history"></i></div></div>
<div class="category-select "><div class="title">Archived tickets</div> <div class="icon"><i class="fas fa-folder-open"></i></div></div>
</div>
</div>
<div class="main">
<div class="cotainer">
<p>content</p>
<div class="server-info">
<div class="server-banner"> <img src="./baner1.png" alt=""></div>
<div class="server">
<img src="./server-logo-lg.png" alt="">
<div class="server-members">
<div class="server-name">Ticket Manager</div>
<div class="server-id">ID: 123456789</div>
</div>
</div>
</div>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
<h1>some text here</h1>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>

Mailchimp unstyled form does not submit on the webpage

I have created a simple hardcoded popup with an unstyled Mailchimp form. But when I deploy it to a WordPress webpage through the "Insert Headers and Footers" plugin it does not work. When I test the code on an online HTML editor, then it works. I am trying to find out what is the problem, I presume that there is somewhere on the server-side something that is blocking the link to be clicked.
code for the popup:
<script>
var element = document.getElementById("wrapper");
var t=setTimeout(openPopUp,3000);
function openPopUp() {
element = document.getElementById("wrapper");
element.style.visibility = "visible";
element.style.opacity = "1";
}
/* Get all elements with class="close" */
function zatvori() {
var x = document.getElementById("wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<!DOCTYPE html>
<html lang="de-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Newsletter XXX</title>
<style>
* {
box-sizing: border-box;
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
line-height: 1.2;
}
#wrapper {
position: relative;
height: 950px;
max-width: 100%;
overflow: hidden;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 430px;
height: 950px;
opacity: 0.5;
-webkit-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
-moz-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
}
.content {
position: absolute;
width: 435px;
height: auto;
padding: 28px 25px;
background-color: #82BB28;
z-index: 1;
}
/* Style the close button (span) */
.close {
cursor: pointer;
color:white;
float: right;
position: absolute;
top: 5%;
right: 2%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: red;}
div .text-1 p {
text-transform: uppercase;
font-weight: normal;
font-size: 18px;
margin: 0;
line-height: 1.1;
text-transform: uppercase;
color: #000;
}
.text-spacing {
letter-spacing: 1px;
}
.text-2 p {
margin: 40px 0 30px 0;
text-transform: uppercase;
font-size: 19px;
font-weight: bold;
letter-spacing: 1px;
}
.text-3 {
font-size: 12px;
color: #A1A199;
}
.email-btn {
display: flex;
justify-content: space-between;
}
/* Full-width input fields */
input[type=text], input[type=email] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Set a style for button */
.button-form {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.button-form:hover {
opacity:1;
}
#ad-email {
height: 36px;
width: 65%;
padding: 0px 14px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 3px;
font-size: 12px;
color: #332c2c;
}
/*placeholder*/
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 10px;
color: #ababab;
}
::-moz-placeholder {
/* Firefox 19+ */
font-size: 10px;
color: #ababab;
}
:-ms-input-placeholder {
/* IE 10+ */
font-size: 10px;
color: #ababab;
}
:-moz-placeholder {
/* Firefox 18- */
font-size: 10px;
color: #ababab;
}
#send {
width: 29%;
height: 36px;
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight: bold;
font-size: 10px;
color: #000000;
cursor: pointer;
transition: all 0.3s;
}
#send:hover {
background-color: #332c2c;
color: #fff;
}
.accept {
position: relative;
margin: 14px 0 35px 0;
}
#check {
position: absolute;
top: 0;
left:0;
opacity: 0;
}
.accept label {
display: flex;
cursor: pointer;
font-size: 10px;
line-height: 12px;
}
.checkbox-box {
display: inline-block;
width: 12px;
height: 12px;
background-color: #fff;
border: 1px solid #332c2c;
}
#check:checked+label>.checkbox-box {
background-color: #332c2c;
}
.checkbox-label {
margin-left: 5px;
width: calc(100% - 18px);
line-height: 14px;
}
.checkbox-label a {
color: #000;
display: block;
}
.profit-1 {
font-size: 20px;
line-height: 25px;
}
ul.benefits {
column-count: 2;
margin-left: 15px;
padding: 0;
}
li {
width: 95%;
font-size: 10px;
line-height: 14px;
}
#media all and (max-width: 434px) {
.content {
width: 100%;
}
}
#media all and (max-width: 387px) {
.text-1 p, .text-2 p {
font-size: 20px;
}
}
#media all and (max-width: 379px) {
.content {
padding: 20px;
}
.text-2 p {
margin: 20px 0 30px 0;
}
#inputs {
position: relative;
padding-bottom: 15px;
}
#ad-email {
width: 100%;
}
#send {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
}
.checkbox-label a {
display: inline;
}
.profit {
margin-top: 20px;
}
ul.benefits {
column-count: 1;
}
li {
width: 100%;
}
}
#media all and (max-width: 324px) {
.profit-1 {
font-size: 16px;
line-height: 20px;
}
.text-1 p {
text-align: center;
}
.text-2 p {
margin: 15px 0 20px 0;
text-align: center;
}
#send {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<!-- width - 655 x height -450-->
<div id="wrapper">
<div id="mc_embed_signup">
<form action="https://ozg.us3.list-manage.com/subscribe/post?u=da98377a6d05e2f01558d3e04&id=67aaab10f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mask"></div>
<div class="content">
<div class="text-1">
<p>OZG - DER SPEZIALIST FÜR KOMPLETTAUSSTATTUNG IM<span class="close" onclick="zatvori()">X</span></p>
<p class="text-spacing"> GESUNDHEITSWESEN</p>
</div>
<div class="text-2">
<p>Haben Sie eine Anfrage oder möchten einen persönlichen Beratungstermin buchen?</p>
</div>
<!--
<div id="inputs">
<div class="email-btn">
<input type="email" name="#" placeholder="Adres e-mail" id="ad-email" required />
<input type="submit" name="#" id="send" value="ZAPISUJĘ    →">
</div>
</div>
-->
<!--New code-->
<div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span>zeigt erforderlich an</div>
<div class="mc-field-group email-btn text-3">
<input type="email" value="" name="EMAIL" placeholder="Email Address *" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="FNAME" placeholder="Name" class="" id="mce-FNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="LNAME" placeholder="Vorname" class="" id="mce-LNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="UNTERNEHME" placeholder="Unternehmen" class="" id="mce-UNTERNEHME">
</div>
<div class="mc-field-group">
<textarea rows="4" cols="50" name="NACHRICHT" class="text-3" form="usrform" id="mce-NACHRICHT" placeholder="Nachricht">Nachricht
</textarea>
</div>
<div class="accept">
<input type="checkbox" name="#" value="true" id="check" required>
<label for="check"><span class="checkbox-box"></span><span class="checkbox-label">Ja, ich möchte aktuelle News und Aktionen erhalten
</span></label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_da98377a6d05e2f01558d3e04_67aaab10f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button-form"></div>
</div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</body>
</html>
So the endpoint does not go to Mailchimp, instead goes to wp-admin/admin-ajax.php
Any help is much appreciated.

Javascript File works for one HTML file but not the other

I have a JS file linked to my index.HTML file that works fine but it will not work for other .HTML file. Why is this. They elements I needs Javascript to apply to are the same and only have added ID tags on some of them. As I understand it, that should cause no issues as they have the same class name.
below are the first and second HTML files along with the JS file.
What am I missing here? I thought you could link to the same JS file as long as the HTMLs are the same and have a script tag to link to the JS file. Please help.
Working HTML File:
<script src="js/scripts.js"></script>
<title>Test 1</title>
</head>
<body>
<!--Navbar-->
<form action="#" id="formData">
</form>
<nav class="navbar">
<div class="inner-width">
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-menu">
Home
About Us
Products
Services
Training & Support
Contact Us
Careers
<div class="dropdown">
Log-in
<div class="dropdown-content">
<h4>Account Number</h4>
<form action="#">
<input type="text" class="acctNum" placeholder="Account Number" />
<h4>Password</h4>
<input type="text" class="passWord" placeholder="Password" />
<input type="submit" value="Log in" class="login" />
<input type="submit" value="Create an Account" class="register" />
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Back to top-->
<button class="goTop fas fa-arrow-up"></button>
<script>
AOS.init();
</script>
</body>
Not working HTML File:
<script src="js/scripts.js"></script>
<title>test file 2</title>
</head>
<body>
<!--Navbar-->
<form action="#" id="formData">
</form>
<nav class="navbar">
<div class="inner-width">
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-menu" id="cNavbar-menu">
Home
<div class="dropdown">
Log-in
<div class="dropdown-content">
<h4>Account Name</h4>
<form action="#">
<input type="text" class="acctNum" placeholder="Account Number" />
<h4>Password</h4>
<input type="text" class="passWord" placeholder="Password" />
<input type="submit" value="Log in" class="login" />
<input type="submit" value="Create an Account" class="register" />
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Back to top-->
<button class="goTop fas fa-arrow-up"></button>
<script>
AOS.init();
</script>
</body>
JavaScript:
var form = document.getElementById('formData');
form.addEventListener("submit", handleSubmit)
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
$(".goTop").fadeIn();
} else {
$(".navbar").removeClass("sticky");
$(".goTop").fadeOut();
}
});
$(".goTop").click(function () {
scroll(0, 0);
});
$(".menu-toggle").click(function () {
$(this).toggleClass("active");
$(".navbar-menu").toggleClass("active");
});
This is the code i've moved to it's own file. the Html file and JS have been unchanged.
.navbar {
position: fixed;
background-color: transparent;
width: 100%;
padding: 30px 0;
top: 0;
z-index: 999;
transition: 0.3s linear;
}
.inner-width {
max-width: 1300px;
margin: auto;
padding: 0 20px;
}
.navbar .inner-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: 500px;
height: 44px;
background-image: url(../images/Full\ Logo\ white.png);
background-repeat: no-repeat;
background-size: contain;
z-index:9999;
}
.menu-toggle {
background: none;
width: 30px;
border: none;
cursor: pointer;
position: relative;
outline: none;
z-index: 999;
display: none;
}
.menu-toggle span {
display: block;
height: 3px;
background-color: #fff;
margin: 6px 0;
position: relative;
transition: 0.3s linear;
}
.navbar-menu a {
color:#f1f1f1;
font-size: 15px;
font-weight: 500;
margin-left: 20px;
transition: 0.2s linear;
}
.navbar-menu a:hover {
color: #d03228 !important;
}
.sticky {
background-color: #fff;
padding: 18px 0;
}
.sticky .logo {
background-image: url(../images/Full\ Logo\ black.png);
}
.sticky .navbar-menu a {
color: #111;
}
.sticky .menu-toggle span {
background-color: #111;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: white;
cursor: pointer;
font-size: 15px;
border: none;
top: 0;
}
.dropdown {
position: absolute;
display: inline-block;
width: 10%;
}
.dropdown-content {
margin-top: 10px;
margin-left: -100px;
padding: 10px;
display: none;
position: relative;
background-color: #353b48;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content h4 {
color: white;
padding: 5px 0 5px 0;
}
.dropdown-content .login {
margin-top: 15px;
background-color: transparent;
color: #f1f1f1;
font-size: 16px;
border: 2px solid #d03228;
border-radius: 10px;
padding: 5px;
margin-left: auto;
cursor: pointer;
transition: 0.3s linear;
}
.dropdown-content .login:hover {
background-color: #d03228;
color: #fff;
}
.dropdown-content .register {
margin-top: 10px;
background-color: transparent;
color: #f1f1f1;
font-size: 16px;
border: 2px solid #d03228;
border-radius: 10px;
padding: 5px;
margin-left: auto;
cursor: pointer;
transition: 0.3s linear;
}
.dropdown-content .register:hover {
background-color: #d03228;
color: #fff;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.goTop {
position: fixed;
z-index: 999;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
background-color: #d03228;
border: none;
border-radius: 6px;
cursor: pointer;
color: #fff;
outline: none;
display: none;
}
#media screen and (max-width: 980px) {
.menu-toggle {
display: block;
}
.navbar-menu {
position: fixed;
height: 100vh;
width: 100%;
background-color: #353b48;
top: 0;
right: -100%;
max-width: 400px;
padding: 80px 50px;
transition: 0.3s linear;
}
.navbar-menu a {
display: block;
font-size: 30px;
margin: 30px 0;
}
.sticky .navbar-menu {
background-color: #f1f1f1;
}
.navbar-menu.active {
right: 0;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(-45deg);
top: 4px;
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(45deg);
bottom: 14px;
}
.dropdown {
width: 70%;
}
.dropdown-content
{
margin: 10px;
}
}
#media screen and (max-width: 600px) {
.inner-width {
padding: 0 20px;
}
}
One major difference ive noticed since moving the navbar CSS is that the "Go to Top" Button now appears when you first load into a page rather than only appearing when scrolling down.
Adding Main CSS file below for more context.
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
::selection {
background-color: #d03228;
}
::-webkit-scrollbar {
width: 12px;
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #d03228;
}
/*home page*/
#home{
height: 100vh;
margin: 0;
}
#videoBG {
position:absolute;
z-index: 1;
margin: 0;
top:0;
left:0;
}
#media (min-aspect-ratio: 16/9) {
#videoBG {
width:100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
#videoBG {
width:auto;
height: 100%;
}
}
#media (max-width: 767px) {
#videoBG {
display: none;
}
#home {
background-image: url(../images/fuji.JPG);
background-size: cover;
}
}
Could someone explain why this is happening?

Please check this you have to write like this,
In the HTML file, you have to add one attribute id/class
<form action="#" id="formData">
</form>
In jquery/javascript "use anyone it's up to you"
//javascript
var form = document.getElementById('formData');
//jquery
var form = $("#formData");
/*add your script code like this*/
form.addEventListener("submit", handleSubmit)
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
$(".goTop").fadeIn();
} else {
$(".navbar").removeClass("sticky");
$(".goTop").fadeOut();
}
});

try deleted id="cNavbar-menu" in the unworked html

Contact form sending message to specified address

I was wondering how would I be able to send the message entered from the form box above, to a specific email address, while using the users entered email as the sending address? Is this possible to accomplish through html or would I have to use some sort of JavaScript to accomplish this? Anything helps and thanks in advance!
<script>
const inputs = document.querySelectorAll(".input");
function focusFunc() {
let parent = this.parentNode;
parent.classList.add("focus");
}
function blurFunc() {
let parent = this.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach((input) => {
input.addEventListener("focus", focusFunc);
input.addEventListener("blur", blurFunc);
});
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
#font-face { font-family: Raleway; src: url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
input,
textarea {
font-family: Raleway;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
padding: 2rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.form {
width: 100%;
max-width: 820px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact-form {
background-color: #3A81B4;
position: relative;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #2d6a96);
position: absolute;
}
.circle.one {
width: 130px;
height: 130px;
top: 130px;
right: -40px;
}
.circle.two {
width: 80px;
height: 80px;
top: 10px;
right: 30px;
}
.contact-form:before {
content: "";
position: absolute;
width: 26px;
height: 26px;
background-color: #3A81B4;
transform: rotate(45deg);
top: 50px;
left: -13px;
}
form {
padding: 2.3rem 2.2rem;
z-index: 10;
overflow: hidden;
position: relative;
}
.title {
color: #fff;
font-weight: 500;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0.7rem;
}
.input-container {
position: relative;
margin: 1rem 0;
}
.input {
width: 100%;
outline: none;
border: 2px solid #fafafa;
background: none;
padding: 0.6rem 1.2rem;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-radius: 7px;
transition: 0.3s;
}
textarea.input {
padding: 0.8rem 1.2rem;
min-height: 150px;
border-radius: 7px;
resize: none;
overflow-y: auto;
}
.input-container label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
padding: 0 0.4rem;
color: #fafafa;
font-size: 0.9rem;
font-weight: 400;
pointer-events: none;
z-index: 1000;
transition: 0.5s;
}
.input-container.textarea label {
top: 1rem;
transform: translateY(0);
}
.btn {
padding: 0.6rem 1.3rem;
background-color: #fff;
border: 2px solid #fafafa;
font-size: 0.95rem;
color: #1880c9;
line-height: 1;
border-radius: 25px;
outline: none;
cursor: pointer;
transition: 0.3s;
margin: 0;
}
.btn:hover {
background-color: transparent;
color: #fff;
}
.input-container span {
position: absolute;
top: 0;
left: 25px;
transform: translateY(-50%);
font-size: 0.8rem;
padding: 0 0.4rem;
color: transparent;
pointer-events: none;
z-index: 500;
}
.input-container span:before,
.input-container span:after {
content: "";
position: absolute;
width: 10%;
opacity: 0;
transition: 0.3s;
height: 5px;
background-color: #3A81B4;
top: 50%;
transform: translateY(-50%);
}
.input-container span:before {
left: 50%;
}
.input-container span:after {
right: 50%;
}
.input-container.focus label {
top: 0;
transform: translateY(-50%);
left: 25px;
font-size: 0.8rem;
}
.input-container.focus span:before,
.input-container.focus span:after {
width: 50%;
opacity: 1;
}
.contact-info {
padding: 2.3rem 2.2rem;
position: relative;
}
.contact-info .title {
color: #1880c9;
}
.text {
color: #333;
margin: 1.5rem 0 2rem 0;
}
.information {
display: flex;
color: #555;
margin: 0.7rem 0;
align-items: center;
font-size: 0.95rem;
}
.icon {
width: 28px;
margin-right: 0.7rem;
}
.social-media {
padding: 2rem 0 0 0;
}
.social-media p {
color: #333;
}
.social-icons {
display: flex;
margin-top: 0.5rem;
}
.social-icons a {
width: 35px;
height: 35px;
border-radius: 5px;
background: linear-gradient(45deg, #3A81B4, #2d6a96);
color: #fff;
text-align: center;
line-height: 35px;
margin-right: 0.5rem;
transition: 0.3s;
}
.social-icons a:hover {
transform: scale(1.05);
}
.square {
position: absolute;
height: 400px;
top: 50%;
left: 50%;
transform: translate(181%, 11%);
opacity: 0.2;
}
#media (max-width: 850px) {
.form {
grid-template-columns: 1fr;
}
.contact-info:before {
bottom: initial;
top: -75px;
right: 65px;
transform: scale(0.95);
}
.contact-form:before {
top: -13px;
left: initial;
right: 70px;
}
.square {
transform: translate(140%, 43%);
height: 350px;
}
.big-circle {
bottom: 75%;
transform: scale(0.9) translate(-40%, 30%);
right: 50%;
}
.text {
margin: 1rem 0 1.5rem 0;
}
.social-media {
padding: 1.5rem 0 0 0;
}
}
#media (max-width: 480px) {
.container {
padding: 1.5rem;
}
.contact-info:before {
display: none;
}
.square,
.big-circle {
display: none;
}
form,
.contact-info {
padding: 1.7rem 1.6rem;
}
.text,
.information,
.social-media p {
font-size: 0.8rem;
}
.title {
font-size: 1.15rem;
}
.social-icons a {
width: 30px;
height: 30px;
line-height: 30px;
}
.icon {
width: 23px;
}
.input {
padding: 0.45rem 1.2rem;
}
.btn {
padding: 0.45rem 1.2rem;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>
</head>
<body>
<div class="container">
<span class="big-circle"></span>
<img class="square" alt="" />
<div class="form">
<div class="contact-info">
<h3 class="title">Let's get <b>in touch</b></h3>
<p class="text">
Feel free to send us an email with any inquiries; one of our receptionists will reach out to you as sson as possible.
</p>
<div class="info">
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/location.png " class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/email.png" class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/phone.png" class="icon" alt="" />
<p></p>
</div>
</div>
<div class="social-media">
<p>Connect with us :</p>
<div class="social-icons">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="contact-form">
<span class="circle one"></span>
<span class="circle two"></span>
<form action="index.html" autocomplete="off">
<h3 class="title">Contact us</h3>
<div class="input-container">
<input type="text" name="name" class="input" />
<label for="">Username</label>
<span>Username</span>
</div>
<div class="input-container">
<input type="email" name="email" class="input" />
<label for="">Email</label>
<span>Email</span>
</div>
<div class="input-container">
<input type="tel" name="phone" class="input" />
<label for="">Phone</label>
<span>Phone</span>
</div>
<div class="input-container textarea">
<textarea name="message" class="input"></textarea>
<label for="">Message</label>
<span>Message</span>
</div>
<input type="submit" value="Send" class="btn" />
</form>
</div>
</div>
</div>
</body>
</html>

yes just use some link like this for in html to send an email:
<a id="email-link" href="mailto:email#example.com?cc=secondemail#example.com, anotheremail#example.com, &bcc=lastemail#example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>
and you can make it change when user change the box message:
function changeLinkHref(){
let message_content = document.getElementById("message-text-area").value;
let name = document.getElementById("name-input").value;
document.getElementById("email-link").href = "mailto:yourmail#yourdomain.zone?&subject=subject&body=" + name + "%0A" + message_content ;
}
and call the function when text-area and text input get changed.
in a tag href attribute body section you can append your email text with htmlEncodedNewLine (%0A)

Hide title when input is expanded, show title when input is minimized

I have a sample code that is displaying a search query with css animation.
I would like to know, how can I hide the 'title' class when the search query is expanded, and show it again when the search query is minimized?
Here is a sample image of the two states (as you can see 'title' is viewable behind the search text, which I dont want):
I know that within the jquery I can hide it like so (showing it again I don't know how the logic would go):
$("p").hide();
but how can I do it with just CSS?
The snippet is working, but its not displaying correctly, though I dont know why.
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
});
.row {
border: 1px solid red;
}
.title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="title">Title</div>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>

You can use siblings to select the div.title.
Add another class for with display:none property and toggle that class
$("p").hide();
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
$(this).parent('.search').siblings('div.title').toggleClass('hideTitle')
});
.row {
border: 1px solid red;
}
.title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
.hideTitle{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="title titleDiv">Title</div>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>

Wrap label and input in one div with position relative and used siblings jquery to hide the title
$('.opener').click(function() {
$(this).parent('.search').toggleClass('inactive').find('input').focus();
$(this).parent('.search').siblings('label').toggleClass('hide');
});
.row {
border: 1px solid red;
}
.search-form {
position:relative;
}
.search-form .title {
font-size: 16px;
font-weight: bold;
position: absolute;
margin: 6px 0;
}
.input-group {
display: flex;
height: 36px;
width: 100%;
overflow: hidden;
padding: 0;
/*background-color: rgba(100, 100, 100, .1);*/
cursor: pointer;
/*border-radius: 2px;*/
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
.input-group:active,
.input-group:hover {
/*background-color: rgba(100, 100, 100, .1);*/
}
.input-group.centered {
margin: 0 auto;
}
.input-group .input-group-addon {
justify-content: center;
width: 36px;
background: transparent;
border: none;
display: flex;
text-align: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.input-group .input-group-addon i {
height: 24px;
width: 24px;
align-self: center;
color: #777;
}
.input-group input {
font-family: "Roboto", sans-serif;
background: transparent;
border: none;
box-shadow: none !important;
font-size: 16px;
padding: 0;
}
.inactive {
width: 36px;
border-radius: 18px;
background: transparent;
box-shadow: none;
}
.inactive .input-group-addon:not(:first-child) {
opacity: 0;
}
.row {
margin-top: 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300|Material+Icons' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<h1>Search Inputs</h1>
</div>
<div class="row">
<div class="search-form">
<label class="title">Title</label>
<div class="input-group search inactive pull-right">
<span class="input-group-addon opener">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon opener">
<i class="material-icons">clear</i>
</span>
</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Django button submit not work after using javascript code - javascript

Related

fixed grid navbar and sidebar

Mailchimp unstyled form does not submit on the webpage

Javascript File works for one HTML file but not the other

Contact form sending message to specified address

Hide title when input is expanded, show title when input is minimized

Categories

Resources