Why is display:flex on #skipperForm producing weird result of all elements on same line?
Curiously, if we change to display:block we get a much better result. But why is flex not working?
body{
max-width:800px;
margin:0 auto;
}
#links a{
text-decoration:none;
}
#links ul{
list-style-type:none;
margin:0 15px;
padding:0;
}
#links li{
display:inline;
}
#skipperForm{
display:flex;
justify-content:center;
margin-top:20px;
}
.radio, .dt, .bc, .label{
width:20vw;
margin:0;
max-width:200px;
}
.label{
display:inline-flex;
justify-content:center;
font-size:20px;
}
.break{
flex-basis:100%;
height:0;
}
#text{
width:60%;
}
.row{
margin-bottom:25px;
}
<form id='skipperForm'>
<label class='label' for='res'>Reservation</label>
<label class='label' for='sail'>Sail</label>
<label class='label' for='xcl'>Cancel</label>
<div class='break'></div>
<input id='res' type='radio' class='radio row' name='sailType' value='RES'>
<input id='sail' type='radio' class='radio row' name='sailType' value='SAIL'>
<input id='xcl' type='radio' class='radio row' name='sailType' value='XCL'>
<div class='break'></div>
<label class='label' for='date'>Date</label>
<label class='label' for='start'>Start Time</label>
<label class='label' for='end'>End Time</label>
<div class='break'></div>
<input id='date' type='text' class='dt row' name='date'>
<input id='start' type='text' class='dt row' name='start'>
<input id='end' type='text' class='dt row' name='end'>
<div class='break'></div>
<label class='label' for='boat'>Boat</label>
<label class='label' for='spots'>Crew Spots</label>
<label class='label' for='customCrew'>Custom Crew</label>
<div class='break'></div>
<input id='boat' type='text' class='bc row' name='boat'>
<input id='spots' type='text' class='bc row' name='spots'>
<input id='customCrew' type='text' class='bc row' name='customCrew'>
<div class='break'></div>
<textarea id='text' class='row' placeholder='message crew'></textarea>
<div class='break'></div>
<input type='submit' class='row' name='submit' value='update'>
</form>
If you want them to be displayed in row without over cross page width you can add only one line of code to your skipperForm div like this: flex-wrap:wrap;
body{
max-width:800px;
margin:0 auto;
}
#links a{
text-decoration:none;
}
#links ul{
list-style-type:none;
margin:0 15px;
padding:0;
}
#links li{
display:inline;
}
#skipperForm{
display:flex;
flex-wrap:wrap;
justify-content:center;
margin-top:20px;
}
.radio, .dt, .bc, .label{
width:20vw;
margin:0;
max-width:200px;
}
.label{
display:inline-flex;
justify-content:center;
font-size:20px;
}
.break{
flex-basis:100%;
height:0;
}
#text{
width:60%;
}
.row{
margin-bottom:25px;
}
<form id='skipperForm'>
<label class='label' for='res'>Reservation</label>
<label class='label' for='sail'>Sail</label>
<label class='label' for='xcl'>Cancel</label>
<div class='break'></div>
<input id='res' type='radio' class='radio row' name='sailType' value='RES'>
<input id='sail' type='radio' class='radio row' name='sailType' value='SAIL'>
<input id='xcl' type='radio' class='radio row' name='sailType' value='XCL'>
<div class='break'></div>
<label class='label' for='date'>Date</label>
<label class='label' for='start'>Start Time</label>
<label class='label' for='end'>End Time</label>
<div class='break'></div>
<input id='date' type='text' class='dt row' name='date'>
<input id='start' type='text' class='dt row' name='start'>
<input id='end' type='text' class='dt row' name='end'>
<div class='break'></div>
<label class='label' for='boat'>Boat</label>
<label class='label' for='spots'>Crew Spots</label>
<label class='label' for='customCrew'>Custom Crew</label>
<div class='break'></div>
<input id='boat' type='text' class='bc row' name='boat'>
<input id='spots' type='text' class='bc row' name='spots'>
<input id='customCrew' type='text' class='bc row' name='customCrew'>
<div class='break'></div>
<textarea id='text' class='row' placeholder='message crew'></textarea>
<div class='break'></div>
<input type='submit' class='row' name='submit' value='update'>
</form>
display: flex; puts all elements on the same row by default. If you one them stacked on top you need also set flex-direction:column;
Related
Im having an issue with Netlify forms. I have created a multistep form with HTML and Javascript to show and hide the separate sections in the form. All the steps are in separate <div>'s and are all inside the <form>
The issue that I'm having is that in the Netlify UI where you can see the form data, all fields are showing up, but on the email notification only half the fields are being emailed.
<form
action="/"
class="form-page p-lg-5"
name="HelloVet Form"
method="POST"
data-netlify="true"
>
<input type="hidden" name="HelloVet Form" value="HelloVet Form" />
<!-- Pet 1 information form -->
<div class="p-2 p-md-5 step step1 active">
<h2 class="border-bottom">Client Information</h2>
<div class="row pt-2">
<div class="col">
<label for="FirstName" class="form-label">Name:</label>
<input
name="FirstName"
type="text"
class="form-control"
id="FirstName"
placeholder="Jane Doe"
name="FirstName"
/>
<label for="emailAddress" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="emailAddress"
placeholder="name#example.com"
name="email"
/>
<label for="street-address" class="form-label">Street:</label>
<input
type="text"
class="form-control"
id="street-address"
placeholder="123 Main Street"
name="street-address"
/>
<label for="state" class="form-label">State:</label>
<input
type="text"
class="form-control"
id="state"
placeholder="State"
name="state"
/>
</div>
<div class="col">
<label for="petReferredBy">Referred by:</label>
<select
class="form-select"
id="petReferredBy"
name="petReferredBy"
required
>
<option selected>Select One</option>
<option value="facebook">Facebook</option>
<option value="google">Google</option>
<option value="nextdoor">NextDoor</option>
<option value="internet">Internet Search</option>
<option value="instagram">Instagram</option>
<option value="grommer">Mobile Groomer</option>
<option value="instagram">Previous Client</option>
<option value="friend">Referred by Friend</option>
<option value="vet">Vet Hospital</option>
<option value="yelp">Yelp</option>
</select>
<label for="phoneNumber" class="form-label">Phone</label>
<input
type="tel"
class="form-control"
id="phoneNumber"
placeholder="(555) 555-1234"
name="phoneNumber"
/>
<label for="city" class="form-label">City:</label>
<input
type="text"
class="form-control"
id="city"
placeholder="City"
name="city"
/>
<label for="zip" class="form-label">Zip:</label>
<input
type="text"
class="form-control"
id="zip"
placeholder="Zip"
name="zip"
/>
</div>
</div>
<!-- Pet 1 information form -->
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName">Pets Name:</label>
<input
type="text"
class="form-control"
id="petName"
placeholder="Pets Name"
name="petName"
/>
</div>
<div class="col">
<label for="breed">Breed:</label>
<input
type="text"
class="form-control"
id="breed"
placeholder="Breed"
name="breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species">Species:</label>
<select class="form-select" id="species" name="species">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender">Gender:</label>
<select class="form-select" id="gender" name="gender">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay">Neutered/Spayed:</label>
<select class="form-select" id="spay" name="spay">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight"
name="weight"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age"
name="age"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday"
name="birthday"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet"
name="pastVet"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords">Can we request records?:</label>
<select class="form-select" id="medRecords" name="medRecords">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile"
id="formFile"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason"
name="reason"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly"
id="isFriendly"
value="Checked"
/>
<label class="form-check-label" for="isFriendly">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite"
id="willBite"
value="Checked"
/>
<label class="form-check-label" for="willBite">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide"
id="willHide"
value="Checked"
/>
<label class="form-check-label" for="willHide">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle"
id="needsMuzzle"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive"
id="aggressive"
value="Checked"
/>
<label class="form-check-label" for="aggressive">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation"
id="sedation"
value="Checked"
/>
<label class="form-check-label" for="sedation">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands"
id="extraHands"
value="Checked"
/>
<label class="form-check-label" for="extraHands">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto"
name="petPhoto"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share"
name="share"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-add-pet">Add Pet</p>
</div>
</div>
<!-- Pet 2 information form -->
<div class="p-2 p-md-5 step step2">
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName2">Pets Name:</label>
<input
name="petName2"
type="text"
class="form-control"
id="petName2"
placeholder="Pets Name"
/>
</div>
<div class="col">
<label for="breed2">Breed:</label>
<input
name="breed2"
type="text"
class="form-control"
id="breed2"
placeholder="Breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species2">Species:</label>
<select class="form-select" name="species2" id="species2">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender2">Gender:</label>
<select class="form-select" name="gender2" id="gender2">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay2">Neutered/Spayed:</label>
<select class="form-select" name="spay2" id="spay2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight2" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight2"
name="weight2"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age2" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age2"
name="age2"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday2" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday2"
name="birthday2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet2">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet2"
name="pastVet2"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords2">Can we request records?:</label>
<select class="form-select" id="medRecords2" name="medRecords2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile2" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile2"
id="formFile2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason2">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason2"
name="reason2"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly2"
id="isFriendly2"
value="Checked"
/>
<label class="form-check-label" for="isFriendly2">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite2"
id="willBite2"
value="Checked"
/>
<label class="form-check-label" for="willBite2">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide2"
id="willHide2"
value="Checked"
/>
<label class="form-check-label" for="willHide2">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle2"
id="needsMuzzle2"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle2">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive2"
id="aggressive2"
value="Checked"
/>
<label class="form-check-label" for="aggressive2">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation2"
id="sedation2"
value="Checked"
/>
<label class="form-check-label" for="sedation2">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands2"
id="extraHands2"
value="Checked"
/>
<label class="form-check-label" for="extraHands2">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto2" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto2"
name="petPhoto2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share2">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share2"
name="share2"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-prev-pet">Previous Pet</p>
<p class="btn btn-primary full-width btn-add-pet">Next Pet</p>
</div>
</div>
<!-- Pet 3 information form -->
<!-- Pet 4 information form -->
<!-- submit button -->
<div class="row p-md-5">
<div class="col">
<div class="row p-3">
<button
type="submit"
class="btn btn-primary full-width"
id="btn-submit"
>
Submit
</button>
</div>
</div>
</div>
</form>
const steps = Array.from(document.querySelectorAll('form .step'))
const addPetBtn = document.querySelectorAll('form .btn-add-pet')
const prevPetBtn = document.querySelectorAll('form .btn-prev-pet')
const form = document.getElementsByClassName('form-page ')
addPetBtn.forEach((button) => {
button.addEventListener('click', (e) => {
changeStep('next')
scrollTo(0, 0)
})
})
prevPetBtn.forEach((button) => {
button.addEventListener('click', () => {
changeStep('prev')
scrollTo(0, 0)
})
})
function changeStep(btn) {
let index = 0
const active = document.querySelector('form .step.active')
index = steps.indexOf(active)
steps[index].classList.remove('active')
if (btn === 'next') {
index++
} else if (btn == 'prev') {
index--
}
steps[index].classList.add('active')
scrollTo(0, 0)
}
<form action="/users/student/update" method="POST">
<div class="personal">
<h3 style="padding: 0 22px;">PERSONAL DETAILS</h3>
<hr style="width: 25%; margin-left: 0; border: 1px solid black;">
<label for="name" class="d">Name :</label>
<input id="name" type="text" value= profileInformation.Name name="Name">
<hr>
<label for="email" class="e">Email :</label>
<input id="email" type="email" value="profileInformation.email" name="email">
<hr>
</div>
<hr style="border: 2px solid black;">
<input class="btn" type="submit" value="Submit">
</form>
In this code, profileInformation is a data object, and name and email are variables in it. I want to use them as default values. Right now, it is being printed as ProfileInformation.name and not the value. Please help.
You cannot do that in HTML. You need javascript for that.
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("name").value = profileInformation.name;
document.getElementById("email").value = profileInformation.email;
});
const profileInformation = {
name: "some name",
email: "test#gmail.com"
};
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("name").value = profileInformation.name;
document.getElementById("email").value = profileInformation.email;
});
<form action="/users/student/update" method="POST">
<div class="personal">
<h3 style="padding: 0 22px;">PERSONAL DETAILS</h3>
<hr style="width: 25%; margin-left: 0; border: 1px solid black;">
<label for="name" class="d">Name :</label>
<input id="name" type="text" name="Name">
<hr>
<label for="email" class="e">Email :</label>
<input id="email" type="email" name="email">
<hr>
</div>
<hr style="border: 2px solid black;">
<input class="btn" type="submit" value="Submit">
</form>
I have the following form:
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.form_wrapper {
background:#fff;
box-sizing:border-box;
padding:15px;
margin:auto 0;
position:relative;
z-index:1;
-webkit-box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
-moz-box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
box-shadow:0 23px 4px -21px rgba(0, 0, 0, 0.9);
}
.form_container {
padding:5px;
border:1px dashed #ccc;
}
.form_wrapper h2 {
font-size:1.5em;
line-height:1.5em;
margin:0;
}
.form_wrapper .title_container {
text-align:center;
margin:-15px -15px 15px;
padding:15px 0;
border-bottom:1px dashed #ccc;
}
.form_wrapper h3 {
font-size:1.1em;
font-weight:normal;
line-height:1.5em;
margin:0;
}
.form_wrapper .row {
margin:10px -15px;
margin-top: 2%;
}
.form_wrapper .row > div {
padding:0 15px;
box-sizing:border-box;
}
.form_wrapper .col_half {
width:50%;
float:left;
}
.form_wrapper .col_half1 {
width:33%;
float:left;
}
.form_wrapper .col_half2 {
width:70%;
float:left;
}
.form_wrapper .col_half9 {
width:30%;
float:left;
}
.form_wrapper .col_half3 {
width:25%;
float:left;
}
.form_wrapper .col_half10 {
width:22%;
float:left;
}
.form_wrapper .col_half6 {
width:16.5%;
float:left;
}
.form_wrapper .col_half8 {
width:17.5%;
float:left;
}
.form_wrapper .col_half7 {
width:15%;
float:left;
}
.form_wrapper .col_half4 {
width:40%;
float:left;
}
.form_wrapper .col_half5 {
width:100%;
float:left;
}
.form_wrapper .col_half11 {
width:42%;
float:left;
}
.form_wrapper label {
display:block;
margin:0 0 5px;
}
.form_wrapper .input_field, .form_wrapper .textarea_field {
position:relative;
}
.form_wrapper .input_field > span, .form_wrapper .textarea_field > span {
position:absolute;
left:0;
top:0;
color:#333;
height:100%;
border-right:1px solid #ccc;
text-align:center;
width:30px;
}
.form_wrapper .textarea_field > span {
border-bottom:1px solid #ccc;
max-height:35px;
}
.form_wrapper .input_field > span > i, .form_wrapper .textarea_field > span > i {
padding-top:12px;
}
.form_wrapper input[type="text"], .form_wrapper input[type="email"], .form_wrapper input[type="tel"], textarea {
width:100%;
padding:10px 10px 10px 35px;
border:1px solid #ccc;
box-sizing:border-box;
outline:none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
.form_wrapper input[type="text"]:focus, .form_wrapper input[type="email"]:focus, .form_wrapper input[type="tel"]:focus, textarea:focus {
-webkit-box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
-moz-box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
box-shadow:0 0 2px 1px rgba(255, 169, 0, 0.5);
border:1px solid #f5ba1a;
}
.credit{
position:relative;
z-index:1;
text-align:center;
padding:15px;
color:#f5ba1a;
}
.credit a{
color:#daa106;
}
#media (max-width: 600px) {
.form_wrapper .col_half {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
#media (max-width: 600px) {
.form_wrapper .col_half1 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
#media (max-width: 600px) {
.form_wrapper .col_half2 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
#media (max-width: 600px) {
.form_wrapper .col_half3 {
width:100%;
float:none;
}
.form_wrapper label {
margin:10px 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO UTENTE</h4>
</div>
<div class="form_wrapper">
<div class="form_container">
<form class="insert_form7">
<div class="row clearfix">
<div class="col_half3">
<label>Código Utente</label>
<div class="input-group-prepend"><span class="input-group-text"> <i class="fa fa-id-card-o" aria-hidden="true"></i></span>
<input type="text" id="codigoinf1" name="codigoinf" value="'.$row["CodigoUtente"].'" class="form-control" readonly="true">
</div>
</div>
<div class="col_half">
<label>Nome Utente</label>
<div class="input-group-prepend"><span class="input-group-text"><i aria-hidden="true" class="fa fa-child"></i></span>
<input type="text" name="nome" value="'.$row["nome"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Valência</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-university" aria-hidden="true"></i></span>
<input type="text" name="Destino" value="'.$row["Destino"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidade" value="'.$row["Nacionalidade"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidade" value="'.$row["Naturalidade"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distrito" value="'.$row["Distrito"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelho" value="'.$row["Concelho"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesia" value="'.$row["Freguesia"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Morada" value="'.$row["Morada"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostal" value="'.$row["CodPostal"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half">
<label>Encarregado de Educação</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user-o" aria-hidden="true"></i></span>
<input type="text" name="representante" value="'.$row["representante"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half7">
<label>Parentesco</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-anchor" aria-hidden="true"></i></span>
<input type="text" name="Parentesco" value="'.$row["Discricao"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefone" value="'.$row["telefone"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO DA MÃE</h4>
</div>
<div class="row clearfix">
<div class="col_half">
<label>Nome da Mãe</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-female" aria-hidden="true"></i></span>
<input type="text" name="nomemae" value="'.$row["nomemae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="datamae" value="'.$row["datamae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Sexo</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-venus-mars" aria-hidden="true"></i></span>
<input type="text" name="Sexomae" value="'.$row["Sexomae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Estado Civil</label>
<div class="input-group-prepend"><span class="input-group-text"><i aria-hidden="true" class="far fa-rings-wedding"></i></span>
<input type="text" name="civilmae" value="'.$row["civilmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidademae" value="'.$row["Nacionalidademae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidademae" value="'.$row["Naturalidademae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distritomae" value="'.$row["Distritomae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelhomae" value="'.$row["Concelhomae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesiamae" value="'.$row["Freguesiamae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Moradamae" value="'.$row["Moradamae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostalmae" value="'.$row["CodPostalmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefonemae" value="'.$row["telefonemae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Habilitações</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<input type="text" name="Habilitacoesmae" value="'.$row["Habilitacoesmae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Profissão</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-building" aria-hidden="true"></i></span>
<input type="text" name="Profissaomae" value="'.$row["Profissaomae"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Email</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="Email" name="Emailmae" value="'.$row["Emailmae"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="modal-header">
<h4 class="modal-title">IDENTIFICAÇÃO DO PAI</h4>
</div>
<div class="row clearfix">
<div class="col_half">
<label>Nome do Pai</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-male" aria-hidden="true"></i></span>
<input type="text" name="nomepai" value="'.$row["nomepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Data Nascimento</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-birthday-cake" aria-hidden="true"></i></span>
<input type="text" name="datapai" value="'.$row["datapai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Sexo</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-venus-mars" aria-hidden="true"></i></span>
<input type="text" name="Sexopai" value="'.$row["Sexopai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Estado Civil</label>
<div class="input_field"> <span><i aria-hidden="true" class="far fa-rings-wedding"></i></span>
<input type="text" name="civilpai" value="'.$row["civilpai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Nacionalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-globe" aria-hidden="true"></i></i></span>
<input type="text" name="Nacionalidadepai" value="'.$row["Nacionalidadepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Naturalidade</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Naturalidadepai" value="'.$row["Naturalidadepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half3">
<label>Distrito</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Distritopai" value="'.$row["Distritopai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half3">
<label>Concelho</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Concelhopai" value="'.$row["Concelhopai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half1">
<label>Freguesia</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" name="Freguesiapai" value="'.$row["Freguesiapai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half11">
<label>Morada</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-location-arrow" aria-hidden="true"></i></span>
<input type="text" name="Moradapai" value="'.$row["Moradapai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half6">
<label>Código Postal</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-code" aria-hidden="true"></i></span>
<input type="text" name="CodPostalpai" value="'.$row["CodPostalpai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half8">
<label>Contato</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-mobile" aria-hidden="true"></i></span>
<input type="text" name="telefonepai" value="'.$row["telefonepai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Habilitações</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<input type="text" name="Habilitacoespai" value="'.$row["Habilitacoespai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Profissão</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-building" aria-hidden="true"></i></span>
<input type="text" name="Profissaopai" value="'.$row["Profissaopai"].'" class="form-control" readonly="true"/>
</div>
</div>
<div class="col_half10">
<label>Email</label>
<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input type="Email" name="Emailpai" value="'.$row["Emailpai"].'" class="form-control" readonly="true"/>
</div>
</div>
</div>
</form>
</div>
</div>
I intend to email this form with the existing data to the updating user in need. Therefore, the form must be sent in an editable form.
I am in doubt as to how best to do this.
I can export to a doc (word) file and send the doc file by email.
But what I wanted was to send the form exactly as it is and the user to make changes if necessary, is that possible?
The site is not exposed to the outside, it is localhost
I'm pretty new to Angular and have been tasked to complete a "Contact Us" form to allow customers to send emails through the web form.
The HTML:
<div class="content-section">
<div class="container">
<div class="row">
<div class="">
<h2 class="intro-title">Contact Us</h2>
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<div class="col-lg-6 spacer">
<div class="fadeIn-1">
<p>
<strong>Contact us</strong>
<br />
111.222.3333
<br />
information#mysite.com
</p>
</div>
<br />
<div class="fadeIn-2">
<p>
<strong>Office 1</strong>
<br />
Our street address
<br />
City, state, zip
</p>
</div>
<br />
<div class="fadeIn-3">
<p>
<strong>Office 2</strong>
<br />
street address
<br />
City, state, zip
</p>
</div>
</div>
<fieldset>
<!-- Form Name -->
<legend>Send us a message</legend>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">First Name</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-1">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">E-Mail</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-2">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<!--<label class="col-md-4 control-label">Phone #</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-3">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(801)222-3333" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Subject</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<!--<label class="col-md-4 control-label">Message</label>-->
<div class="col-md-6 inputGroupContainer">
<div class="input-group animated-delay-5">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea rows="9" class="form-control" name="comment" placeholder="Message">
</textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Send
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
This is this the component:
import { Component } from '#angular/core';
import { trigger, state, style, transition, animate } from '#angular/animations';
import { slideInOutAnimation, fadeInAnimation } from '../_animations/index';
#Component({
selector: 'contact-page',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css'],
animations: [slideInOutAnimation, fadeInAnimation, trigger('slideInOut', [
state('in', style({
transform: 'translate3d(0, 0, 0)'
})),
state('out', style({
transform: 'translate3d(100%, 0, 0)'
})),
transition('in => out', animate('400ms ease-in-out')),
transition('out => in', animate('400ms ease-in-out'))
]),
],
host: {
'(window:scroll)': 'updateHeader($event)',
'[#slideInOutAnimation]': '',
'[#fadeInAnimation]': ''
}
})
export class ContactComponent {
title = 'app';
isScrolled = false;
currPos: Number = 0;
startPos: Number = 0;
changePos: Number = 0;
menuState = 'out';
constructor() { }
updateHeader(evt) {
this.currPos = (window.pageYOffset || evt.target.scrollTop) - (evt.target.clientTop || 0);
if (this.currPos >= this.changePos) {
this.isScrolled = true;
} else {
this.isScrolled = false;
}
}
}
I've looked at options such as "nodemailer" and I just can't seem to figure out how it all works.
I need the email to be sent to our email address when a customer clicks the submit button. Any suggestions?
Also, I'm not really sure what else is needed to get help, so if you need anything else, I am happy to post it up.
In my express app I have a separate file for middlewares. I used express.static to make the resources available to the app. Code from middlewares.js...
app.use(express.static('public'));
app.use(express.static('node_modules/vue/dist'));
app.use(express.static('node_modules/bootstrap/dist/css'));
app.use(express.static('node_modules/bootstrap/dist/js'));
app.use(express.static('node_modules/multiple.js'));
app.use(express.static('node_modules/chart.js/dist'));
It works fine for all the routes. However, when I try to define a parameterized route, and render a template this way, it fails to load up the resources. Express fails to find CSS/JS/Image files from those statics. What am I missing here? Here is my code for the route..
app.get('/invoices/:id', app.authenticated, (req, res) => {
Invoices.find({_id: req.params.id}, (err, invoice) => {
if (err) {
res.json({error: err});
}
res.render('invoicesCreate');
});
});
Updated: The View file
{{#section 'classes'}}has-navigation page-dashboard{{/section}}
{{#section 'body-classes'}}-fluid{{/section}}
<div class="row" id="invoicer">
<div class="col-xs-12 col-md-6">
Fill your details and get live preview in the right side
<form class="" action="/invoices" method="post" enctype="multipart/form-data">
<div class="">
<div class="invoiceform-logo-container">
<input type="file" name="profilelogo" id="fileinput" accept="image/*" v-on:change="updateImage()">
<img v-bind:src="logo" alt="" />
</div>
<div class="invoiceform-number"></div>
<div class="invoiceform-currency"></div>
</div>
<div class="divider"></div>
<div class="">
Your Name / Company Name
<textarea name="company_name" rows="8" cols="40" v-model="from"></textarea>
Client Name / Company Name
<textarea name="client_name" rows="8" cols="40" v-model="to"></textarea>
\{{date_title}}
<input type="date" name="start_date" v-model="date">
\{{due_date_title}}
<input type="date" name="end_date" v-model="due_date" v-bind:min="date">
\{{balance_title}} \{{balance}}
<div class="input-group">
<span class="input-group-addon">$</span>
<input name="end_date" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="invoiceform-itemlist" v-on:focusout="checkToRemove()">
<div class="">
\{{item_header}}
\{{quantity_header}}
\{{unit_cost_header}}
\{{amount_header}}
</div>
<div class="" v-for="item in items">
<input type="text" name="items[1][item_name]" v-model="item.head">
<input type="number" name="items[1][item_quantity]" v-model="item.quantity" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_rate]" v-model="item.rate" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_amount]" v-model="item.amount">
</div>
<button type="button" name="button">Add Item</button>
</div>
<div class="divider"></div>
<div class="">
\{{subtotal_title}} \{{subtotal}}
\{{tax_title}}
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" v-model="tax">
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> %
</span>
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> F
</span>
</div>
<div id="discount" v-if="fields.discount">
Discount <input type="number" name="" v-model="discounts">
</div>
<div id="shipping" v-if="fields.shipping">
Shipping <input type="number" name="shipping" v-model="shipping">
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="discount" v-model="fields.discount"> \{{discounts_title}}
</label>
<label class="btn btn-primary">
<input type="checkbox" name="shipping" v-model="fields.shipping"> \{{shipping_title}}
</label>
</div>
</div>
<div class="divider"></div>
<div class="">
Total <input type="number" name="name" v-model="total" min="0">
\{{amount_paid_title}} <input type="number" name="total" v-model="amount_paid" min="0" v-bind:max="total">
</div>
<div class="divider"></div>
<div class="">
\{{notes_title}}
<input type="text" name="name" v-model="notes">
\{{payment_terms_title}}
<input type="text" name="name" v-model="terms">
<button type="submit" name="button">Save Now</button>
<button type="button" name="button">Download PDF</button>
</div>
</form>
</div>
<div class="col-xs-12 col-md-6 hidden-sm-down"></div>
</div>
{{#section 'script'}}
window.invoice = {{{json defaultInvoice}}}
console.log({{{json defaultInvoice}}})
{{/section}}