Develop Reference

Submit button to trigger thank you page

My actual test website
1.) Click on the hero head image on the top
2.) The dark gray box of the form slides in
3.) Do not fill in the form
4.) Click once on the submit button
5.) Then click on the hero head again
6.) The blue box of the Thank you page slides in
This shouldnt happen this way.
Before adding the PHP functionality of the form, I want to test the onClick submit button (not the hero head) to slide in the blue box Thank you page when form is filled in.
jQuery - I set two classes one for the hero head to slide in the form and one for the Thank you page.
JSFIDDLE does not actually show the blue box instead it goes to 404 error page
<script>
$(".openNav").click(function() {
$('.box').show();
$('.box').toggleClass("slideUp");
});
$(".openNav2").click(function() {
$('.box2').show();
$('.box2').toggleClass("slideUp");
});
</script>
HTML -
<div class="box2 slideUp" style="display: none;">
<div class="info">
<div class="frm-details">
<div class="frm-name">THANK YOU!</div>
<div class="frm-header">I will get back to you ASAP!</div>
</div>
</div>
</div>
**<!-- DARK GRAY BOX SLIDES IN -->**
<div class="box slideUp" style="display: none;">
<div class="info">
<div class="frm-details">
<div class="frm-name">FILL OUT THE FORM</div>
<div class="form-box">
<form>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Full Name</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Email</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Text Number</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Company Name</label>
</div>
<div class="frm-group">
<textarea type="text" rows="6" required></textarea>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Message</label>
</div>
<div class="" id=""><button class="btn-submit" class="openNav2">SEND</button> **<-- CLICK TO SLIDE THE THANK YOU BLUE BOX**
</div>
</form>
</div>
</div>
</div>
</div>
**<!-- HERO HEAD TO CLICK -->**
<div class="img-circle"><img src="imgs/img-christian.png"></div>
CSS -
/* GRAY FORM BOX */
.box {
position: fixed;
width: 288px;
height: 100vh;
background-color: #0b151b;
z-index: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
top: 170px;
text-align: center;
margin: 0 auto;
right: 0;
left: 0;
box-sizing: border-box;
}
.box.slideUp {
height: 0;
}
/* BLUE THANK YOU BOX */
.box2 {
position: fixed;
width: 288px;
height: 100vh;
background-color: #0084ff;
z-index: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
top: 170px;
text-align: center;
margin: 0 auto;
right: 0;
left: 0;
box-sizing: border-box;
}
.box2.slideUp {
height: 0;
}

Placing password visibility icon inside password field

I have this following code.
<div class="login-password">
<label for="password" class="form-label"
>Enter your password</label
>
<input
id="loginPassword"
type="password"
class="form-control"
placeholder="Enter your password"
/>
<i
class="bi bi-eye-slash"
id="togglePassword"
style="margin-left: -30px; cursor: pointer"
></i>
</div>
When I do this the password visibility icon is placed as in the image given below.
How do I place the visibility icon within password field.

Using marketwatch.com's login as an example, you would have to make the css property 'position' to "absolute" for the <i> tag. This will allow you to place it inside the input box. Perhaps something like this:
.bi-eye-slash {
width: 25px;
height: 25px;
position: absolute;
z-index: 200;
top: 28px;
right: 10px;
cursor: pointer;
}

I found the answer to my own question. Well, we have to group the input and the icon is the way to do it, and below is the code.
.input-group-addon i {
margin-left: -30px;
cursor: pointer;
z-index: 200;
position: absolute;
font-size: large;
color: #6c757d;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css"
/>
<div class="login-password">
<label for="password" class="form-label"
>Enter your password</label
>
<div class="input-group">
<input
id="loginPassword"
type="password"
class="form-control"
placeholder="Enter your password"
/>
<div class="input-group-addon">
<i class="bi bi-eye-slash" id="togglePassword"></i>
</div>
</div>
</div>

Why don't the textfields and buttons in my div react to clicks?

For school homework, I'm creating a single page with another student. Our teacher gave us an HTML-File to clone some of the components for our own project, so that we don't have to write it from scratch. We want to create our own .js file with some listeners for the components we take from her file.
The below code produces a label called "keywords" with a question mark icon to its right and a text field further right. A click on the question mark icon opens a popup window with some options and the text field allows comma-separated strings as "keywords". Our problem is that on our HTML-Page, all these elements show up with no problem, but the popup window won't show up when we click on the question mark icon and the text field is also not activated when we click on it.
We looked at our teacher's HTML file and played on it a bit. We found out, that when we remove her js file as a script the same thing happens on her HTML file too. So we looked into her js file and checked the 55.000 lines long js file for some reference to these elements and found nothing. So we don't know, why ours doesn't work. The console shows no errors in the output when we open our HTML file. How can we make these elements respond to clicks? where should we look for errors, mistakes?
<div class="form-group">
<label class="control-label col-md-4 col-lg-3" for="offer_tag_list">
<div class="inline-help form-label" data-help="<b>You would like to use keywords:</b> In that case use one or more words for each keyword and use a comma to seperate.
br>
<b>You want to remove a keyword?</b> Then click on the <i class="fa fa-remove"></i> symbol at the end of that keyword.
<div class="panel panel-default" id="feedback-form">
<div class="panel-heading">
<h4 class="panel-title">
<i class="fa fa-question-circle"></i> Was that information useful? </h4>
</div>
<div class="panel-body">
<form class="feedback" role="form" id="new_feedback" action="/feedbacks" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" />
<div class="form-group"><textarea placeholder="You can write comments here." class="form-control" name="feedback[comment]" id="feedback_comment">
</textarea></div>
<input type="hidden" value="/offers/new" name="feedback[context]" id="feedback_context" />
<input type="hidden" value="offers.tag_list" name="feedback[help_key]" id="feedback_help_key" />
<div class="actions"> <input type="submit" name="feedback[helpful]" value="Ja" class="btn btn-default" data-disable-with="Ja" /> <input type="submit" name="feedback[helpful]" value="Nein" class="btn btn-default" data-disable-with="Nein" /></div></form> <div class="hidden response">
Thank you for your Feedback!
</div>
</div>
</div>
" data-heading="How to use keywords?" data-help-key="offers.tag_list">
<i class="fa fa-question-circle-o"></i>
</div>Keywords
</label>
<div class="col-md-8 col-lg-9">
<div class="bootstrap-tagsinput">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="tt-hint" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
<input type="text" placeholder="" class="tt-input" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="undefined_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="">
<span role="status" aria-live="polite" style="position: absolute; padding: 0px; border: 0px; height: 1px; width: 1px; margin-bottom: -1px; margin-right: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;"></span>
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
<div role="listbox" class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div role="presentation" class="tt-dataset tt-dataset-tags"></div>
</div>
</span>
</div>
<input value="" data-use-tagsinput="true" class="form-control" type="text" name="offer[tag_list]" id="offer_tag_list" style="display: none;">
</div>
</div>

how can i change slider and form height according to screen size

i want to show a form on a slider on medium and a large size screen it's working fine but on a small screen and extra small i am posting a screen shot
i want this
on extra-small screen my what to do go automatically downward as form height increase
but in this case they are overlapping
this is a small screen
this is extra small screen
#slider{
width:auto;
padding:0px;
}
#form {
width: 920px;
height:100%;
}
.panel{
background: rgba(255, 255, 255, 0.6);
box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;
}
<div id="slider" >
<div id="jssor_1"style="height:100%;width:100px;position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; ">
<!-- Loading Screen -->
<div class="">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00" style="display: none;">
<img data-u="image" src="images/madina.png" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="images/jeddah.png" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="images/accra.png" />
</div>
<a data-u="any" href="http://www.jssor.com" style="display:none">Full Width Slider</a>
</div>
</div>
<div id="form" class="container">
<div class="row" style="margin-top:5px;">
<div class=" col-lg-6 col-md-8 col-sm-10 col-xs-12">
<div class="panel panel-default" style="border-color:green" >
<div class="panel-heading" style="background-color:white" >
<h2 class="panel-title" style="color:forestgreen" >Search & Book <span class="glyphicon"><i class="glyphicon glyphicon-plane"></i></span></h2>
</div>
<div class="panel-body">
<form role="form" runat="server" class="">
<div class="row" style="margin-bottom:0px">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px;">
<div class="form-group">
<label style="font-size:13px;margin-left:5px">Name</label>
<input id="n" name="n" type="text" class="form-control input-sm" placeholder="Name" required="required" value="" runat="server"/>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px">
<div class="form-group">
<label style="font-size:13px;margin-left:5px">Email</label>
<input id="em" type="text" name="email" class="form-control input-sm" placeholder="email" value="" runat="server"/>
</div>
</div>
</div>
<div class="row" style="margin-top:0px">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-10" style="margin-left:20px;">
<div class="form-group">
<label style="font-size:13px;margin-left:5px">Phone Number</label>
<input type="text" name="password" id="tel" class="form-control input-sm" placeholder="Phone Number" runat="server" />
</div>
</div>......

I think you want height: 100vh. Vh is relative to 1% of the height of the viewport, so it will fill the entire screen.
For more information about CSS units, you can go to w3schools.
https://www.w3schools.com/cssref/css_units.asp

Bootstrap Form Not Working

I'm not sure where I went wrong but my bootstrap form won't work as is because I can't type anything into the form boxes. If I move the form boxes above the third div from the top the email box works and if I move them above the second div from the top both boxes work. Can anyone explain what's going on and how to fix this?
<div class ="container" style= "height:150px;">
<div id="Logo" class="col-xs-12 col-md-11">
<img id="CashPass" src="assets/images/CashPassLogo (2).png"/>
</div>
</div>
<div class="container" style= "height:500px;" id="intro">
<div id="HomeTopContainer" class="col-xs-12 col-md-8">
<h3>
Something <i>Something</i>
</h3>
<img id="Something" src="https://abc123.jpg"/>
</div>
<div id="signup"> <!--style="height:500px; padding-right: 10%;"-->
<div class="col-xs-6 col-md-4">
<h1 class="hit">
Something
</h1>
<form class="form" name="form" ng-submit="signUp()" novalidate>
<div class="form-group"
ng-class="{ 'has-success': form.email.$valid && submitted, 'has-error': form.email.$invalid && submitted }">
<!--<label>Email</label>-->
<input type="email" name="email" class="form-control" placeholder = "Email" ng-model="user.email" required/>
</div>
<div class="form-group"
ng-class="{ 'has-success': form.password.$valid && submitted, 'has-error': form.password.$invalid && submitted }">
<!--<label>Password</label>-->
<input type="password" name="password" class="form-control" placeholder = "Password" ng-model="user.password"
ng-minlength="3"
required/>
<p class="help-block"
ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
Password must be at least 3 characters.
</p>
</div>
</form>
</div>
</div>
<div class= "hit">
<button class="btn btn-inverse btn-lg btn-login" id = "Join" type="submit">
Join
</button>
<a class="btn btn-default btn-lg btn-register" id = "login" href="/stuff">
Login
</a>
</div>
The SCSS is as follows:
.hit {
position: relative;
padding: 30px 15px;
/*color: #F5F5F5;*/
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
/*background: #4393B9;*/
.center-block{};
}
.center-block {
font-size: 5em;
width: 150px;
height: 150px;
text-align: center;
};
/*id*/
#intro {
background-color: #add8e6;
}
#glyphicon{
text-align: right;
font-size: 5em;
}
#HomeTopContainer {
text-align: center;
}
#signup{
margin-left: auto;
margin-right: auto;
}
#bottomborder{
height: 75px;
background-color: #19469D;
margin-top: -7px;
text-align: center;
font-size: 20px;
}

You basically have elements overlapping each other. Your class .hit is stacked on top of your other containers (you can see it if you allow that aqua background color to show) To get around this add this CSS:
#signup {
position: relative;
z-index: 10;
}

crazymatt, thanks again for your response, though it wasn't right it got me on the right track. I actually added the following code to fix it:
.form-group{
position: relative;
z-index: 10;
}