I'm a beginner and I'm struggling with a javascript document.
I want to toggle from 'hidden' to 'visible' a block that thanks after submiting a form. But the thing is that my 'thanks block' only appear for a second then disappear.
I've tried it by changing the 'submit' evenement by 'click' and it's working but then the form is not validate. I don't know if know what I mean. Thanks a lot
Here is my JS code:
let merci = document.getElementById('merci');
let button = document.getElementById('frmContact');
button.addEventListener('submit', submit, false);
function submit(){
merci.classList.toggle('visible');
}
merci.addEventListener('click', closeMerci, false);
function closeMerci(){
merci.classList.toggle('visible');
};
Here is the css
#merci{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.9);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
visibility: hidden;
opacity: 0;
}
#merci #cadreMerci{
background-color: white;
padding: 50px;
margin: 20px 50px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
}
#merci.visible{
opacity: 1;
visibility: visible;
}
and here is the HTML document :
<form id="frmContact">
<div>
<div>
<label for="fName">Prénom</label>
<input name="fName" id="fName" required autofocus />
</div>
<div>
<label for="lName">Nom</label>
<input type="text" name="lName" id="lName" required />
</div>
<div>
<label for="email">Votre e-mail</label>
<input type="email" name="email" id="email" required />
</div>
</div>
<div>
<div>
<label for="message">Votre message</label>
<textarea name="message" id="message" required></textarea>
</div>
</div>
<button id="buttonSubmit" type="submit">Envoyer</button>
</form>
Related
I have the below form in react.
I need to reduce the space between the list-icon and the label. I am using the below CSS for the same.
.form__container {
display: flex;
flex-wrap: wrap;
}
.form__container input {
color: rgb(115, 0, 255);
size: 100%;
position: relative;
flex-wrap: wrap;
width: 300px;
}
.form__container li ul {
flex-wrap: nowrap;
width: 100px;
}
Below is my react component.
return (
<div>
<FormValidator emitter={this.emitter} />
<div >
<form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method}
className='form__container'>
{ this.props.authenticity_token &&
<div style={formTokenStyle}>
<input name='utf8' type='hidden' value='✓' />
<input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
<input name='task_id' type='hidden' value={this.props.task_id} />
</div>
}
{items}
</form>
<div>
{validationList}
</div>
</div>
</div>
)
Can anyone please help me with this?
To fix this issue, you just need to use input[type=text]
See my demo below:
input[type=text] {
width: 300px;
}
<form>
<div>
<label for="fname">Name</label>
<input type="text" id="fname" name="fname">
</div>
<div><input type="checkbox" /> Check me!</div>
</form>
As the screen below, I have a Read component + a Edit component.
But they don't exactly match, the Edit still takes more spacing.
My goal is to make them match, in order to later make an Edit Inline.
I've already tried with a few "td" and "tr" tags, but the issue was the same.
I need same spacing between my "p" tags, for all lines. Right now some lines dosnt have the same spacing.
ReadOnlyRow.js
import React from 'react';
const ReadOnlyRow = ({getData}) => {
return (
<>
<p> Email : { getData.data?.attributes?.email }</p>
<p> Username : </p>
<p> Timezone :</p>
</>
);
};
export default ReadOnlyRow;
EditableRow.js
import React from 'react';
const EditableRow = ({getData}) => {
return (
<>
<p>
<label for="email"> Email : </label>
<input type="email" placeholder={getData.data?.attributes?.email} name="email"></input>
</p>
<p>
<label for="email"> Username : </label>
<input type="text" placeholder="Enter your username .." name="username"></input>
</p>
<p>
<label for="email"> Timezone : </label>
<input type="text" placeholder="Enter your timezone .." name="timezone"></input>
</p>
</>
);
};
export default EditableRow;
ParentFile.js
return (
<ProfileStyled>
<h1> Profile </h1>
<div className="profile-infos">
<div className='row'>
<div className='column'>
<div className="user-infos">
<form>
<ReadOnlyRow getData={getData} />
</form>
<EditableRow getData={getData} />
</div>
</div>
</div>
<div className='row'>
<div className='column'>
<hr className="hr"/>
</div>
</div>
<div className='row'>
<div className='column'>
<div className="user-history">
<p> History :</p>
</div>
</div>
</div>
</div>
</ProfileStyled>
);
CSS
const ProfileStyled = styled.div`
min-height: 100vh;
padding: 6rem 0;
background-color: ${(props) => props.theme.colors.greenLight};
.hr {
transform:rotate(90deg);
width: 200px;
margin-top: 100px;
}
.profile-infos {
max-width: ${(props) => props.theme.spacings.maxWidth};
margin-top: 3rem;
margin-left: auto;
margin-right: auto;
padding: 0 ${(props) => props.theme.paddings.NavLaptop};
display: flex;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
width: 100%;
}
.user-infos {
display:flex;
flex-direction: column;
align-items: start;
}
.user-history {
display:flex;
flex-direction: column;
align-items: start;
}
`;
From what I understand, you needed a better way to space your p elements inside EditableRow.js and ReadOnlyRow.js.
I made this implementation with display grid, you can use this implementation if you don't have any problem with the supported browsers, you can check that here.
You need to add the css on the parent container, and then you can change ReadOnlyRow.js, so the user information is inside a span and then you have a similar structure on both components.
.container {
width: 300px;
display: inline-block;
}
.container p {
display: grid;
grid-template-columns: 100px 200px;
background: pink;
align-items: center;
min-height: 21px;
}
<div class="container">
<p> Email : <span>fake#email.com</span></p>
<p> Username : </p>
<p> Timezone :</p>
</div>
<div class="container">
<p>
<label for="email"> Email : </label>
<input type="email" placeholder="fake#email.com" name="email" />
</p>
<p>
<label for="email"> Username : </label>
<input type="text" placeholder="Enter your username .." name="username" />
</p>
<p>
<label for="email"> Timezone : </label>
<input type="text" placeholder="Enter your timezone .." name="timezone" />
</p>
</div>
I want, That user click on input type="checkbox", "textarea" is displayed.
then when user click on anywhere except same "textarea", same "textarea" is hidden.
please help me that do this work.
If you have a suggestion for solving this problem, thank you for letting me know.
Thank you in advance for your cooperation.
var requiredDescription = document.querySelectorAll(".required-description");
requiredDescription.forEach(item => {
item.addEventListener('click', function(){
item.classList.toggle('active');
});
});
window.addEventListener("click", function(event){
var desText = document.querySelector('input.active');
if (event.target !== desText) {
description.classList.remove('show');
}
});
.items{
border: 1px solid var(--txt);
padding: .5rem;
border-radius: 10px;
}
p > span.label{
width: 30%;
display: block;
}
p > span.label-items{
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
}
p > span.label-items > lable.label-item{
display: flex;
align-items: center;
width: 100%;
}
.description{
border: 2px solid var(--c2);
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 20%;
top: 10%;
width: 50%;
z-index: 1;
padding: 1rem;
display: none;
}
p > span.label-items > label.label-item > input.active ~ .description{
display: block;
}
<p class="items">
<span class="label">example1</span>
<span class="label-items">
<label class="label-item" for="Others">
<input type="checkbox" name="Others" id="Others" class="required-description">
Others
<textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example2</span>
<span class="label-items">
<label class="label-item" for="Yes">
<input type="checkbox" name="Yes" id="Yes" class="required-description">
Yes
<textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example3</span>
<span class="label-items">
<label class="label-item" for="ok">
<input type="checkbox" name="ok" id="ok" class="required-description">
Yes
<textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
</label>
</span>
</p>
You can add click event to body element and check the element which is clicked to remove the class.
You can try the following way:
var requiredDescription = document.querySelectorAll(".required-description");
requiredDescription.forEach(item => {
item.addEventListener('click', function(){
item.classList.toggle('active');
});
});
document.querySelector('body').addEventListener('click', function(e){
if(!(e.target.nodeName == 'SPAN' || e.target.nodeName == 'INPUT' || e.target.nodeName == 'TEXTAREA')){
requiredDescription.forEach(item => {
item.classList.remove('active');
document.querySelectorAll(":checked").forEach(function(chk){
chk.checked = false;
});
});
}
});
.items{
border: 1px solid var(--txt);
padding: .5rem;
border-radius: 10px;
}
p > span.label{
width: 30%;
display: block;
}
p > span.label-items{
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
}
p > span.label-items > lable.label-item{
display: flex;
align-items: center;
width: 100%;
}
.description{
border: 2px solid var(--c2);
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 20%;
top: 10%;
width: 50%;
z-index: 1;
padding: 1rem;
display: none;
}
p > span.label-items > label.label-item > input.active ~ .description{
display: block;
}
I want, That user click on input type="checkbox", "textarea" is displayed. then when user click on anywhere except same "textarea", same "textarea" is hidden. please help me that do this work. If you have a suggestion for solving this problem, thank you for letting me know. Thank you in advance for your cooperation.
<p class="items">
<span class="label">example1</span>
<span class="label-items">
<label class="label-item" for="Others">
<input type="checkbox" name="Others" id="Others" class="required-description">
Others
<textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example2</span>
<span class="label-items">
<label class="label-item" for="Yes">
<input type="checkbox" name="Yes" id="Yes" class="required-description">
Yes
<textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example3</span>
<span class="label-items">
<label class="label-item" for="ok">
<input type="checkbox" name="ok" id="ok" class="required-description">
Yes
<textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
</label>
</span>
</p>
In the HTML shown below, I want to have the following appearance of the tags
label1: input1
label2: input2
label3: input3
but what I am getting is something like this:
label1:
input1
Please let me know how to modify the HTML to achieve the desired results.
HTML:
<div class="modal-body">
<form #form="ngForm" class="clr-form clr-form-horizontal" autocomplete="off">
<div>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}</label>
<input
required
maxlength="25"
clrInput
[(ngModel)]="selectedSite.name"
type="text"
name="name"
/>
</clr-input-container>
</div>
<div>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}</label>
<input
required
maxlength="25"
clrInput
[(ngModel)]="selectedSite.name"
type="text"
name="name"
/>
</clr-input-container>
</div>
</form>
</div>
Please have a look at the following jsFiddle and see if that helps you find a solution
https://jsfiddle.net/n5m43h8b/3/
All I added was some simple css:
clr-input-container {
position: relative;
display: block;
}
Just add display: block; to your style/css
clr-input-container {
display: block;
}
Use the following:
clr-input-container {
display: block
}
clr-input-container > label,
clr-input-container > input {
display: inline-block;
}
If this doesn't work. Remove any prior css or add !important with inline-block.
Add it to your global styles.css, if you are adding it in component css then add encapsulation: ViewEncapsulation.None in your #component declarator as shown in the following image.
Check this out,
HTML
<div class="flex-container">
<div class="row">
<div class="flex-item">
<div>
<label>{{ "D.START_LONG" | translate }}</label> <input
required
maxlength="25"
clrInput
[(ngModel)]="s.name"
type="text"
name="name"
/>
</div>
</div>
<div class="flex-item">
<div>
<label>{{ "DT.START_LAT" | translate }}</label><input
required
maxlength="25"
clrInput
[(ngModel)]="s.name"
type="text"
name="name"
/>
</div>
</div>
</div>
and CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
padding: 5px;
margin: 10px;
line-height: 20px;
color: Red;
font-weight: bold;
font-size: 2em;
text-align: center;
}
I added the jQuery validate plugin to validate a contact form I have, but I am running into an issue. I am trying to get my error class to show up inline of the input field in which the error is. However, it is only displaying in block. I know this is because I have display: block !important; for my input class, but if I take that away, it moves my blocks inline whenever there is an error.
Does anyone know how I can resolve this?
Please look in the comments to see a jsfiddle. I was unable to figure out how to insert an external source in the snippet.
<form id="contactform" method="post" action="" novalidate>
<input class="contact_input" type="text" name="name" placeholder="Name">
<input class="contact_input" type="email" name="email" placeholder="Email">
<textarea class="contact_input" name="message" placeholder="Message"></textarea>
<input type="submit" name="submitform" value="Send">
</form>
CSS
.contact_input {
display: block !important;
margin-bottom: 15px;
width: 300px;
}
.error {
color: red;
display: inline;
padding-left: 20px;
}
I think the following CSS works:
.contact_input {
display: block !important;
margin-bottom: 15px;
width: 300px;
}
.error {
color: red;
float: left;
margin-left: 10px;
}
.clear {
clear: both;
padding: 10px;
display: block;
}
Please let me know if it works for you too.
EDIT:
Please let me know if this works: https://jsfiddle.net/wgtLnxfw/6/
It has changes to mark up and css.
You can use the markup and css as below.
Check demo: Fiddle
<form id="contactform" method="post" action="" novalidate>
<div>
<input type="text" name="name" placeholder="Name">
</div>
<div>
<input type="email" name="email" placeholder="Email">
</div>
<div>
<textarea name="message" placeholder="Message"></textarea>
</div>
<div>
<input type="submit" name="submitform" value="Send">
</div>
</form>
#contactform input[type="text"], input[type="email"], textarea {
margin-bottom: 15px;
width: 300px;
float: left;
}
#contactform div {
overflow: auto
}
.error {
color: red;
display: block;
}