so I am creating an html where the user has to input data that is going to be stored and then auto pasted (autofill). So I am trying to store it (function at top) and it stores it (seen in the link of the live server) but it wont write it down for a check to see that it works but it don't.
And can you give me a tip how to paste it after ?
PS: Doing this in a popup that's why its so unordered.
And when I normaly open the html in live or as a extension the button appears, but when uploading this html it doesn't.
(ADD)= Searched for errors and saw one when pressing button, recorded it and took a screenshot +
Thank you in advance.
enter image description here
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dropdown.css">
</head>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
</head>
<head>
<script>
var
function save()
{
var first_name = document.getElementById("first name").value;
var last_name = document.getElementById("last name").value;
var email = document.getElementById("email").value;
var street_address = document.getElementById("street address").value;
var house_number = document.getElementById("house number").value;
var apartment = document.getElementById("apartment").value;
var postal_code = document.getElementById("postal code").value;
var city = document.getElementById("city").value;
document.write("Data: " + first_name + last_name + email + street_address + house_number +apartment +postal_code + city);
}
</script>
</head>
<form action="" method="GET">
<div>
<label for="first name" >First Name</label>
<input id="first name" type="first name" name='first name' placeholder="Enter your first name here" required>
</div>
<div>
<label for="last name">Last Name</label>
<input id="last name" type="last name" name='last name' placeholder="Enter your last name here" required>
</div>
E-Mail
<div>
<label for="email"></label>
<input id="email" type="email" name='email' placeholder="Enter your E-Mail here" required>
</div>
<div>
<label for="street address">Street Address</label>
<input id="street address" type="street address" name='street address' placeholder="Enter your address here" required>
</div>
<div>
<label for="house number">House Number</label>
<input id="house number" type="house number " name='house number' placeholder="Enter yout house number here" >
<div>
<div>
<label for="apartment">Apartment (optional)</label>
<input id="apartment" type="apartment" name='apartment' placeholder="Enter apartment (optional)">
</div>
<div>
<label for="postal code">Postal code</label>
<input type="postal code" name='postal code' placeholder="Enter your postal code here" required>
</div>
City
<div>
<label for="city"></label>
<input id="city" type="city" name='city' placeholder="Enter your city here" required>
</div>
<!---Dropdown Country-->
<body>
Country
<div>
<select name="" id="input" onchange="lel()" class="dropdown">
<option value="albania">Albania</option>
<option value="algeria">Algeria</option>
<option value="andorra">Andorra</option>
<option value="austria">Austria</option>
<option value="bahrain">Bahrain</option>
<option value="bangladesh">Bangladesh</option>
<option value="belarus">Belarus</option>
<option value="begium">Belgium</option>
<option value="bhutan">Bhutan</option>
<option value="bosnia">Bosnia & Heryegovina</option>
<option value="brunei">Brunei</option>
<option value="bulgaria">Bulgaria</option>
<option value="cambodia">Cambodia</option>
<option value="canada">Canada</option>
<option value="china">China</option>
<option value="croatia">Croatia</option>
<option value="cyperus">Cyperus</option>
<option value="czechia">Czechia</option>
<option value="denmark">Denmark</option>
<option value="egypt">Egypt</option>
<option value="estonia">Estonia</option>
<option value="faroe">Faroe Islands</option>
<option value="finland">Finland</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="gibraltar">Gibraltar</option>
<option value="greece">Greece</option>
<option value="greenland">Greenland</option>
<option value="hong kong sar china">Hong Kong SAR China</option>
<option value="hungary">Hungary</option>
<option value="iceland">Iceland</option>
<option value="india">India</option>
<option value="indonesia">Indonesia</option>
<option value="ireland">Ireland</option>
<option value="israel">Israel</option>
<option value="italy">Italy</option>
<option value="japan">Japan</option>
<option value="jordan">Jordan</option>
<option value="kuwait">Kuwait</option>
<option value="laos">Laos</option>
<option value="latvia">Latvia</option>
<option value="lebanon">Lebanon</option>
<option value="libya">Libya</option>
<option value="liechtenstein">Liechtenstein</option>
<option value="lithuania">Lithuania</option>
<option value="luxembourg">Luxembourg</option>
<option value="macao sar china">Macao SAR China</option>
<option value="malaysia">Malaysia</option>
<option value="malta">Malta</option>
<option value="mexico">Mexico</option>
<option value="moldova">Moldova</option>
<option value="monaco">Monaco</option>
<option value="montenegro">Montenegro</option>
<option value="morocco">Morocco</option>
<option value="myanmar (burma)">Myanmar (Burma(</option>
<option value="nepal">Nepal</option>
<option value="netherlands">Netherlands</option>
<option value="new zealand">New Zealand</option>
<option value="north macedonia">North Macedonia</option>
<option value="norway">Norway</option>
<option value="omanm">Oman</option>
<option value="parkistan">Parkistan</option>
<option value="palestinian territories">Palestinian Territories</option>
<option value="poland">Poland</option>
<option value="portugal">Portugal</option>
<option value="qatar">Qatar</option>
<option value="romania">Romania</option>
<option value="saudi arabia">Saudi Arabia</option>
<option value="singapore">Singapore</option>
<option value="slovakia">Slovakia</option>
<option value="slovenia">Slovenia</option>
<option value="south korea">South Korea</option>
<option value="spain">Spain</option>
<option value="sri lanka">Sri Lanka</option>
<option value="sweden">Sweden</option>
<option value="switzerland">Switzerland</option>
<option value="syria">Syria</option>
<option value="taiwan">Taiwan</option>
<option value="thailand">Thailand</option>
<option value="timor-leste">Timor-Leste</option>
<option value="tunisia">Tunisia</option>
<option value="turkey">Turkey</option>
<option value="ukraine">Ukraine</option>
<option value="united arab emirates">United Arab Emirates</option>
<option value="united kingdom">United Kingdom</option>
<option value="united states">United States</option>
<option value="vatican city">Vatican City</option>
<option value="vietnam">Vietnam</option>
<option value="yemen">Yemen</option>
</select>
</div>
<!---Dropdown Country-->
State/Province
<div>
<select name="" id="shis" class="dropdowntwo">
<option value="none" disabled selected value>None</option>
<optgroup value="united states states"label="--------------United States--------------">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="American Samoa">American Samoa</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="Arkansas">Arkansas</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">District of Columbia</option>
<option value="Federated States of Micronesia">Federated States of Micronesia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Guam">Guam</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Lowa">Lowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Luoisiana">Luoisiana</option>
<option value="Luoisiana">Luoisiana</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nepraska">Nepraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakato">North Dakato</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Palau">Palau</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Islands">Rhode Islands</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="Armed Forces Americas">Armed Forces Americas</option>
<option value="Armed Forces Europe">Armed Forces Europe</option>
<option value="Armed Forces Pacific">Armed Forces Pacific</option>
</optgroup>
<optgroup value="canada states"label="------------------Canada------------------">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</div>
<p><button class="button" onclick="save()">Save</button></p>
</body>
</form>
</html>
Related
If we have one dropdown and when we select any item, we need to fetch records having the dependid attribute till dependid is not equal to 0. Below is the code snippet.
<select class="form-control dropdownlist" id="Location">
<option value="67" dependid="17">Amsterdam</option>
<option value="1" dependid="0">APAC</option>
<option value="20" dependid="3">Argentina</option>
<option value="23" dependid="4">Arizona</option>
<option value="40" dependid="26">Atlanta</option>
<option value="47" dependid="31">Austin</option>
<option value="5" dependid="1">Australia</option>
<option value="12" dependid="2">Austria</option>
<option value="54" dependid="8">Bangalore</option>
<option value="61" dependid="74">Bangkok</option>
<option value="69" dependid="19">Brighton</option>
<option value="71" dependid="20">Buenos Aires</option>
<option value="24" dependid="4">California</option>
<option value="21" dependid="3">Canada</option>
<option value="25" dependid="4">Canada - Cloud5</option>
<option value="41" dependid="27">Chicago</option>
<option value="6" dependid="1">China</option>
<option value="48" dependid="31">Dallas</option>
<option value="2" dependid="0">EMEA</option>
<option value="75" dependid="4">Florida</option>
<option value="15" dependid="2">France</option>
<option value="63" dependid="13">Frankfurt</option>
<option value="26" dependid="4">Georgia</option>
<option value="13" dependid="2">Germany</option>
<option value="55" dependid="8">Gurgaon</option>
<option value="7" dependid="1">Hong Kong</option>
<option value="27" dependid="4">Illinois</option>
<option value="8" dependid="1">India</option>
<option value="16" dependid="2">Italy</option>
<option value="37" dependid="75">Jacksonville</option>
<option value="9" dependid="1">Japan</option>
<option value="3" dependid="0">LACC</option>
<option value="42" dependid="76">Las Vegas</option>
<option value="70" dependid="19">London</option>
<option value="35" dependid="24">Los Angeles</option>
<option value="64" dependid="14">Madrid</option>
<option value="22" dependid="3">Mexico</option>
<option value="73" dependid="22">Mexico City</option>
<option value="56" dependid="8">Mumbai</option>
<option value="46" dependid="30">Nashville</option>
<option value="17" dependid="2">Netherlands</option>
<option value="76" dependid="4">Nevada</option>
<option value="28" dependid="4">New York</option>
<option value="43" dependid="28">New York</option>
<option value="38" dependid="75">Orlando</option>
<option value="57" dependid="9">Osaka</option>
<option value="29" dependid="4">Pennsylvania</option>
<option value="44" dependid="29">Philadelphia</option>
<option value="34" dependid="23">Phoenix</option>
<option value="66" dependid="16">Rome</option>
<option value="65" dependid="15">Rueil Malmaison</option>
<option value="36" dependid="25">Saint John</option>
<option value="49" dependid="32">Salt Lake City</option>
<option value="50" dependid="33">Seattle</option>
<option value="52" dependid="6">Shanghai</option>
<option value="10" dependid="1">Singapore</option>
<option value="59" dependid="10">Singapore</option>
<option value="14" dependid="2">Spain </option>
<option value="68" dependid="18">Stockholm</option>
<option value="39" dependid="75">Sunrise</option>
<option value="18" dependid="2">Sweden/Finland</option>
<option value="51" dependid="5">Sydney</option>
<option value="53" dependid="7">Taikoo Shing</option>
<option value="60" dependid="11">Taipei</option>
<option value="11" dependid="1">Taiwan</option>
<option value="30" dependid="4">Tennessee</option>
<option value="31" dependid="4">Texas</option>
<option value="74" dependid="1">Thailand</option>
<option value="58" dependid="9">Tokyo</option>
<option value="72" dependid="21">Toronto</option>
<option value="19" dependid="2">United Kingdom</option>
<option value="4" dependid="0">US</option>
<option value="32" dependid="4">Utah</option>
<option value="62" dependid="12">Vienna</option>
<option value="33" dependid="4">Washington</option>
<option value="45" dependid="29">Wilkes-Barre</option>
</select>
jsfiddle Example
For example if I select item having value 1 (Item : APAC) associated countries will be
Australia, China, Hong Kong,India, Japan, Singapore, Taiwan, Thailand
Australia >> value 5 >> check associated items further >>
same for china, Hong Kong,India, Japan, Singapore, Taiwan, Thailand
Please help
You could use the attribute selector for this element[attribute="value"] and the value of the select element after it changed (this is here the changed select element):
document.querySelectorAll('option[dependid="' + this.value + '"]');
Then you just need to loop over the selected options and do what ever you want with them, for example output them in a list (before that reset the list with result_list.innerHTML = '';).
Working example:
const select_element = document.querySelector('#Location');
const result_list = document.querySelector('#result-list');
select_element.addEventListener('change', function() {
const dependent_options = document.querySelectorAll('option[dependid="' + this.value + '"]');
result_list.innerHTML = '';
for (i = 0; i < dependent_options.length; i++) {
let list_item = document.createElement('LI');
list_item.textContent = dependent_options[i].textContent;
result_list.appendChild(list_item);
}
});
<ul id="result-list"></ul>
<select class="form-control dropdownlist" id="Location">
<option value="67" dependid="17">Amsterdam</option>
<option value="1" dependid="0">APAC</option>
<option value="20" dependid="3">Argentina</option>
<option value="23" dependid="4">Arizona</option>
<option value="40" dependid="26">Atlanta</option>
<option value="47" dependid="31">Austin</option>
<option value="5" dependid="1">Australia</option>
<option value="12" dependid="2">Austria</option>
<option value="54" dependid="8">Bangalore</option>
<option value="61" dependid="74">Bangkok</option>
<option value="69" dependid="19">Brighton</option>
<option value="71" dependid="20">Buenos Aires</option>
<option value="24" dependid="4">California</option>
<option value="21" dependid="3">Canada</option>
<option value="25" dependid="4">Canada - Cloud5</option>
<option value="41" dependid="27">Chicago</option>
<option value="6" dependid="1">China</option>
<option value="48" dependid="31">Dallas</option>
<option value="2" dependid="0">EMEA</option>
<option value="75" dependid="4">Florida</option>
<option value="15" dependid="2">France</option>
<option value="63" dependid="13">Frankfurt</option>
<option value="26" dependid="4">Georgia</option>
<option value="13" dependid="2">Germany</option>
<option value="55" dependid="8">Gurgaon</option>
<option value="7" dependid="1">Hong Kong</option>
<option value="27" dependid="4">Illinois</option>
<option value="8" dependid="1">India</option>
<option value="16" dependid="2">Italy</option>
<option value="37" dependid="75">Jacksonville</option>
<option value="9" dependid="1">Japan</option>
<option value="3" dependid="0">LACC</option>
<option value="42" dependid="76">Las Vegas</option>
<option value="70" dependid="19">London</option>
<option value="35" dependid="24">Los Angeles</option>
<option value="64" dependid="14">Madrid</option>
<option value="22" dependid="3">Mexico</option>
<option value="73" dependid="22">Mexico City</option>
<option value="56" dependid="8">Mumbai</option>
<option value="46" dependid="30">Nashville</option>
<option value="17" dependid="2">Netherlands</option>
<option value="76" dependid="4">Nevada</option>
<option value="28" dependid="4">New York</option>
<option value="43" dependid="28">New York</option>
<option value="38" dependid="75">Orlando</option>
<option value="57" dependid="9">Osaka</option>
<option value="29" dependid="4">Pennsylvania</option>
<option value="44" dependid="29">Philadelphia</option>
<option value="34" dependid="23">Phoenix</option>
<option value="66" dependid="16">Rome</option>
<option value="65" dependid="15">Rueil Malmaison</option>
<option value="36" dependid="25">Saint John</option>
<option value="49" dependid="32">Salt Lake City</option>
<option value="50" dependid="33">Seattle</option>
<option value="52" dependid="6">Shanghai</option>
<option value="10" dependid="1">Singapore</option>
<option value="59" dependid="10">Singapore</option>
<option value="14" dependid="2">Spain </option>
<option value="68" dependid="18">Stockholm</option>
<option value="39" dependid="75">Sunrise</option>
<option value="18" dependid="2">Sweden/Finland</option>
<option value="51" dependid="5">Sydney</option>
<option value="53" dependid="7">Taikoo Shing</option>
<option value="60" dependid="11">Taipei</option>
<option value="11" dependid="1">Taiwan</option>
<option value="30" dependid="4">Tennessee</option>
<option value="31" dependid="4">Texas</option>
<option value="74" dependid="1">Thailand</option>
<option value="58" dependid="9">Tokyo</option>
<option value="72" dependid="21">Toronto</option>
<option value="19" dependid="2">United Kingdom</option>
<option value="4" dependid="0">US</option>
<option value="32" dependid="4">Utah</option>
<option value="62" dependid="12">Vienna</option>
<option value="33" dependid="4">Washington</option>
<option value="45" dependid="29">Wilkes-Barre</option>
</select>
Here you have a solution using jquery. You have to obtain the options which dependid equals to the category selected. Then you have to iterate over these items.
$("#Location").change(function () {
var category= $(this).val();
console.log(category);
console.log("Dependant items: ");
var items = $("option[dependid='" + category + "']");
$.each( items, function( key, value ) {
console.log($(value).text());
});
});
Working example:
$("#Location").change(function () {
var category= $(this).val();
console.log(category);
console.log("Dependant items: ");
var items = $("option[dependid='" + category + "']");
$.each( items, function( key, value ) {
console.log($(value).text());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="result-list"></ul>
<select class="form-control dropdownlist" id="Location">
<option value="67" dependid="17">Amsterdam</option>
<option value="1" dependid="0">APAC</option>
<option value="20" dependid="3">Argentina</option>
<option value="23" dependid="4">Arizona</option>
<option value="40" dependid="26">Atlanta</option>
<option value="47" dependid="31">Austin</option>
<option value="5" dependid="1">Australia</option>
<option value="12" dependid="2">Austria</option>
<option value="54" dependid="8">Bangalore</option>
<option value="61" dependid="74">Bangkok</option>
<option value="69" dependid="19">Brighton</option>
<option value="71" dependid="20">Buenos Aires</option>
<option value="24" dependid="4">California</option>
<option value="21" dependid="3">Canada</option>
<option value="25" dependid="4">Canada - Cloud5</option>
<option value="41" dependid="27">Chicago</option>
<option value="6" dependid="1">China</option>
<option value="48" dependid="31">Dallas</option>
<option value="2" dependid="0">EMEA</option>
<option value="75" dependid="4">Florida</option>
<option value="15" dependid="2">France</option>
<option value="63" dependid="13">Frankfurt</option>
<option value="26" dependid="4">Georgia</option>
<option value="13" dependid="2">Germany</option>
<option value="55" dependid="8">Gurgaon</option>
<option value="7" dependid="1">Hong Kong</option>
<option value="27" dependid="4">Illinois</option>
<option value="8" dependid="1">India</option>
<option value="16" dependid="2">Italy</option>
<option value="37" dependid="75">Jacksonville</option>
<option value="9" dependid="1">Japan</option>
<option value="3" dependid="0">LACC</option>
<option value="42" dependid="76">Las Vegas</option>
<option value="70" dependid="19">London</option>
<option value="35" dependid="24">Los Angeles</option>
<option value="64" dependid="14">Madrid</option>
<option value="22" dependid="3">Mexico</option>
<option value="73" dependid="22">Mexico City</option>
<option value="56" dependid="8">Mumbai</option>
<option value="46" dependid="30">Nashville</option>
<option value="17" dependid="2">Netherlands</option>
<option value="76" dependid="4">Nevada</option>
<option value="28" dependid="4">New York</option>
<option value="43" dependid="28">New York</option>
<option value="38" dependid="75">Orlando</option>
<option value="57" dependid="9">Osaka</option>
<option value="29" dependid="4">Pennsylvania</option>
<option value="44" dependid="29">Philadelphia</option>
<option value="34" dependid="23">Phoenix</option>
<option value="66" dependid="16">Rome</option>
<option value="65" dependid="15">Rueil Malmaison</option>
<option value="36" dependid="25">Saint John</option>
<option value="49" dependid="32">Salt Lake City</option>
<option value="50" dependid="33">Seattle</option>
<option value="52" dependid="6">Shanghai</option>
<option value="10" dependid="1">Singapore</option>
<option value="59" dependid="10">Singapore</option>
<option value="14" dependid="2">Spain </option>
<option value="68" dependid="18">Stockholm</option>
<option value="39" dependid="75">Sunrise</option>
<option value="18" dependid="2">Sweden/Finland</option>
<option value="51" dependid="5">Sydney</option>
<option value="53" dependid="7">Taikoo Shing</option>
<option value="60" dependid="11">Taipei</option>
<option value="11" dependid="1">Taiwan</option>
<option value="30" dependid="4">Tennessee</option>
<option value="31" dependid="4">Texas</option>
<option value="74" dependid="1">Thailand</option>
<option value="58" dependid="9">Tokyo</option>
<option value="72" dependid="21">Toronto</option>
<option value="19" dependid="2">United Kingdom</option>
<option value="4" dependid="0">US</option>
<option value="32" dependid="4">Utah</option>
<option value="62" dependid="12">Vienna</option>
<option value="33" dependid="4">Washington</option>
<option value="45" dependid="29">Wilkes-Barre</option>
</select>
$(document).on("change","#Location",function(){
var val = $(this).val();
var arrayWithDependId=[];
$("#Location").find("option").each(function(){
var dependId = $(this).attr("dependid");
if(dependId==val){
arrayWithDependId.push($(this).text());
}
});
console.log(arrayWithDependId);
});
Super noob question here. I'm wanting to know how I can stack two input fields and labels side by side. I've managed to get most of my document lined up and sized. I thought the solution would be to group both the inputs and labels I want side by side in a div, and add the code:
style="display: inline-block;
But that didn't work. Any tips?
<style>
body {
margin: 0;
padding: 0;
}
div {
display: inline;
grid-template-columns: max-content;
grid-gap: 5px;
}
fieldset {
border: 0px;
}
form {
background-color: #FDD2BF;
width: 600px;
}
h1 {
margin: 0;
}
input {
border-radius: 20px;
border: 0px;
text-align: center;
}
label {
display: block;
}
select {
border-radius: 20px;
border: 0px;
width: 48%;
}
</style>
<body>
<form action="" method="POST">
<h1>Customer Profile</h1>
<fieldset>
<legend>Customer Information</legend>
<div>
<label for="date">Date</label>
<input type="date" name="date" id="date">
</div>
<div>
<label for="companyname">Company Name</label>
<input type="text" name="companyname" id="companyname" size="80">
</div>
<div>
<div>
<label for="streetname">Address</label>
<input type="text" name="address" id="streetname" placeholder="Street Name" size="80">
<div>
<input type="text" name="address" id="streetcontinued" size="80">
</div>
</div>
<div style="display: inline-block;">
<input type="text" name="address" id="city" placeholder="City" size="40">
<input type="text" name="address" id="region" placeholder="Region" size="38">
</div>
<div style="display: inline-block;">
<input type="text" name="address" id="zipcode" placeholder="Postal/Zip" size="40">
<select id="country" name="country">
<option>Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, Democratic Republic of the Congo</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Cote D'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curacao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and Mcdonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="XK">Kosovo</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libyan Arab Jamahiriya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the Former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="AN">Netherlands Antilles</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Reunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthelemy</option>
<option value="SH">Saint Helena</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="CS">Serbia and Montenegro</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.s.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
<div>
<label for="companyphone">Phone</label>
<input type="tel" name="companyphone" id="companyphone" size="80">
</div>
</fieldset>
<fieldset>
<legend>Company Representative</legend>
<div>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="First Name">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Last Name">
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email">
<label for="jobtitle">Job Title</label>
<select name="jobtitle" id="jobtitle">
<option value="choose">Job Title</option>
<option value="Transportation Manager">Transportation Manager</option>
<option value="Driver">Driver</option>
<option value="Agent">Agent</option>
<option value="Owner">Owner</option>
</select>
</div>
<div>
<label for="contactphone">Phone</label>
<input type="contactphone" name="contactphone" id="contactphone" size="80">
</div>
</fieldset>
</form>
</body>
</html>
It is very simple check the code below
.flex {
display: flex;
}
label {
flex-shrink: 0; /* so the lengthy label will not get stacked */
}
input {
margin-left: 1rem;
}
<div class="flex">
<label for=""> Company </label>
<input type="text" />
</div>
<div class="flex">
<label for=""> Email </label>
<input type="email" />
</div>
Let me know if this what you wanted?? I just showed you how its done you can implement this in your entire code accordingly.
I created a simple profiles page that stores data into a JSON file in an Electron Angular project. However, I encounter an error when I click the save profile button.
(Using Angular 7)
Here is my profile.component.html file (Save Profile Button is at the very bottom of the code):
<html>
<head>
</head>
<div>
<form id="profile-editor">
<div class="profiles-header">
<!-- <i class="fas fa-user-plus"></i> -->
Profile Editor
<div class="profiles-control-buttons">
</div>
</div>
<div class="profile-editor-container">
<div class="profile-section" id="shipping-editor">
<h3>Shipping Information</h3>
<div class="profile-editor-input-container">
<div class="single-input-wrapper">
<input (input)="fname=$event.target.value" type="text" id="first-name-sh" name="first-name-sh" placeholder="First Name" />
</div>
<div class="single-input-wrapper">
<input (input)="lname=$event.target.value" type="text" id="last-name-sh" name="last-name-sh" placeholder="Last Name" /></div>
<div class="single-input-wrapper">
<input (input)="shipping1=$event.target.value" type="text" id="shipping-address-01" name="shipping-address-01" placeholder="Address" /></div>
<div class="single-input-wrapper">
<input (input)="shipping2=$event.target.value" type="text" id="shipping-address-02" name="shipping-address-02" placeholder="Apt./Suite" />
</div>
<div class="single-input-wrapper">
<input (input)="city=$event.target.value" type="text" id="city-sh" name="city-sh" placeholder="City" /></div>
<div class="single-input-wrapper">
<input (input)="zip=$event.target.value" type="text" id="zip-code-sh" name="zip-code-sh" placeholder="Zip Code" /></div>
<div class="single-input-wrapper">
<select (change)="country=$event.target.options[$event.target.options.selectedIndex].text" id="country-sh">
<option value="0" selected="" disabled="">Select Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">DRC</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="VA">Vatican</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">North Korea</option>
<option value="KR">South Korea</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select></div>
<div class="single-input-wrapper">
<select (change)="state=$event.target.options[$event.target.options.selectedIndex].text" id="state-sh">
<option value="0" selected="" disabled="">Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></div>
<div class="profile-section" id="payment-editor">
<h3>Payment Information</h3>
<div class="profile-editor-input-container">
<div class="single-input-wrapper">
<input (input)="cardholder=$event.target.value" type="text" name="card-name" placeholder="Name on Card"/></div>
<div class="single-input-wrapper">
<input (input)="cardnumber=$event.target.value" type="text" id="card-number" name="card-number" placeholder="Card Number"
(onkeypress)="formatCard()" (onkeyup)="formatCardNumber=$event.target.value;"/></div>
<div class="single-input-wrapper">
<input (input)="expiry=$event.target.value" type="text" id="card-expire" name="card-expire" placeholder="10 / 19"
onkeyup="formatCardExpire(event);" maxlength="5"/></div>
<div class="single-input-wrapper">
<input (input)="cvv=$event.target.value" type="text" id="card-code" name="card-code" placeholder="CVV" /></div>
<div class="main-newtask-checkbox-container two-col">
<!-- <div class="newtask-checkbox-container">
<input type="checkbox" id="limit-checkbox" name="limit-checkbox" />
<label for="limit-checkbox">One Checkout Per Site</label>
</div> -->
<!-- <div class="newtask-checkbox-container">
<input type="checkbox" id="cod-checkbox" name="cod-checkbox" />
<label for="cod-checkbox">Supreme JP (Cash On Delivery)</label>
</div> -->
</div>
</div>
</div>
<div class="profile-section" id="profile-info-editor">
<h3>Profile Information</h3>
<div class="profile-editor-input-container profile-basic">
<div class="single-input-wrapper">
<input (input)="profilename=$event.target.value" type="text" id="profile-title" name="profile-title" placeholder="Profile Title" /></div>
<div class="single-input-wrapper">
<input (input)="email=$event.target.value" type="email" id="profile-email" name="profile-email" placeholder="Order Email" /></div>
<div class="single-input-wrapper">
<input (input)="phonenumber=$event.target.value" type="text" mask='(000) 000-0000' id="phone-number" name="phone-number" placeholder="Phone Number"/></div>
<div class="single-input-wrapper"></div>
<div class="main-newtask-checkbox-container two-col">
<div class="newtask-checkbox-container">
<input type="checkbox" id="jig-phone-checkbox" name="jig-phone-checkbox" />
<label for="jig-phone-checkbox">Jig Phone Number</label>
</div>
<div class="newtask-checkbox-container">
<input type="checkbox" id="dot-trick-checkbox" name="dot-trick-checkbox" disabled />
<label for="dot-trick-checkbox">Dot Trick</label>
</div>
</div>
</div>
</div>
<div class="profile-section" id="action-buttons">
<div class="button-wrapper">
<button (click)="saveProfile()" id="save-profile" class="profiles-save-btn-color">Save
Profile</button>
<button id="clear-profile" type="button" type="reset" class="profiles-clear-btn-color"><i
class="fas fa-broom"></i>Clear
Fields</button>
<button id="random-profile" class="profiles-randomize-btn-color" type="button"><i
class="fas fa-dice"></i>Randomize
Values</button>
</div>
</div>
</div>
</form>
</div>
</html>
Here is my profile.component.ts file:
import { Component, OnInit } from '#angular/core';
import { ElectronService } from 'ngx-electron';
#Component({
selector: 'profiles',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
fname : string;
lname : string;
shipping1 : string;
shipping2 : string;
city : string;
zip : string;
country : string;
state : string;
cardholder : string;
cardnumber : string;
expiry : string;
cvv : string;
profilename : string;
email : string;
phonenumber : string;
formatCardNumber : string;
constructor(private _electronService: ElectronService) { }
ngOnInit() {
}
saveProfile(){
let profile = {
fname : this.fname,
lname : this.lname,
shipping1 : this.shipping1,
shipping2 : this.shipping2,
city : this.city,
zip : this.zip,
country : this.country,
state : this.state,
cardholder : this.cardholder,
cardnumber : this.cardnumber,
expiry : this.expiry,
cvv : this.cvv,
profilename : this.profilename,
email : this.email,
phonenumber : this.phonenumber
};
this._electronService.ipcRenderer.send('profileCreated', JSON.stringify(profile));
console.log('Success!')
}
}
After I click the save profiles button, in my dev tools, it shows that electron is sending a request to this non-existent path:
file:///Users/name/Bot/dist/sBot/profiles?first-name-sh=&last-name-sh=&shipping-address-01=&shipping-address-02=&city-sh=&zip-code-sh=&card-name=&card-number=&card-expire=&card-code=&profile-title=&profile-email=&phone-number=
Why is it redirecting me to that path and how should I address it?
you have to pass the click event to the click handler function
like
<button (click)="saveProfile($event)" id="save-profile" class="profiles-save-btn-color">Save
Profile</button>
and inside the script receive the event and prevent the default form submission using preventDefault()
saveProfile(ev){
ev.preventDefault();
let profile = {
fname : this.fname,
lname : this.lname,
shipping1 : this.shipping1,
shipping2 : this.shipping2,
city : this.city,
zip : this.zip,
country : this.country,
state : this.state,
cardholder : this.cardholder,
cardnumber : this.cardnumber,
expiry : this.expiry,
cvv : this.cvv,
profilename : this.profilename,
email : this.email,
phonenumber : this.phonenumber
};
this._electronService.ipcRenderer.send('profileCreated', JSON.stringify(profile));
console.log('Success!')
}
Im trying to figure out why my Drop Down menu is not working. It does appear but when i click on it, it doesn't drop down. Any help would be highly appreciated,
Thanks!
Im trying to figure out why my Drop Down menu is not working. It does appear but when i click on it, it doesn't drop down. Any help would be highly appreciated,
Thanks!
<div class="form-group row">
<label for="location" class="col-sm-3 control-label">Job Location</label>
<div class="col-sm-9">
<select id="location" name="job_location" multiple="" data-placeholder="Enter city and country or leave it blank" class="form-control form-control-chosen jform-chosen-validate" style="display: none;">
<option value="aichach">Aichach</option>
<option value="allende">Allende</option>
<option value="atlanta">Atlanta</option>
<option value="bangalore">bangalore</option>
<option value="berlin">Berlin</option>
<option value="bristol">bristol</option>
<option value="calgary">Calgary</option>
<option value="california">California</option>
<option value="campuchia">Campuchia</option>
<option value="carapicuiba-sao-paulo">Carapicuíba - São Paulo</option>
<option value="conakry">Conakry</option>
<option value="dallas">Dallas</option>
<option value="dubai">Dubai</option>
<option value="fortaleza">Fortaleza</option>
<option value="guinea">Guinea</option>
<option value="ha-noi">Ha Noi</option>
<option value="hamburg">Hamburg</option>
<option value="india">india</option>
<option value="istanbul">istanbul</option>
<option value="jacksonville">Jacksonville</option>
<option value="kathmandu">Kathmandu</option>
<option value="kk">kk</option>
<option value="latur">latur</option>
<option value="lll">lll</option>
<option value="london">London</option>
<option value="manila">Manila</option>
<option value="melbourne">Melbourne</option>
<option value="montreal">montreal</option>
<option value="new-york">New York</option>
<option value="newcastle">Newcastle</option>
<option value="nigeria">Nigeria</option>
<option value="noordwijk">Noordwijk</option>
<option value="philippines">Philippines</option>
<option value="san-gwann">San Gwann</option>
<option value="scotland">Scotland</option>
<option value="sydney">Sydney</option>
<option value="tourcoin">Tourcoin</option>
<option value="vienna-austria">Vienna, Austria</option>
<option value="wroclaw">Wrocław</option>
<option value="zxczxc">zxczxc</option>
<option value="zxczxvzxv">zxczxvzxv</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 795px;" title="" id="location_chosen"><ul class="chosen-choices"><li class="search-field">
<input type="text" value="Enter a city and country or leave it blank" class="default" autocomplete="off" style="width: 279px;"></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div></div>
</div>
</div>
removing the display:none
according to your code you are using bootstrap after removing it if it not working check the jquery and javascript links pattern
like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
you have style display:none on it change it to block
or you could opt for a (small bit of js) option and go for this
Here is a fiddle
var mytextbox = document.getElementById('country');
var mydropdown = document.getElementById('dropdown');
mydropdown.onchange = function(){
mytextbox.value= " ";
mytextbox.value = mytextbox.value + this.value;
}
textarea, select{display:block; vertical-align:top; height:27px;}
<select id="dropdown">
<option value="aichach">Aichach</option>
<option value="allende">Allende</option>
<option value="atlanta">Atlanta</option>
<option value="bangalore">bangalore</option>
<option value="berlin">Berlin</option>
<option value="bristol">bristol</option>
<option value="calgary">Calgary</option>
<option value="california">California</option>
<option value="campuchia">Campuchia</option>
<option value="carapicuiba-sao-paulo">Carapicuíba - São Paulo</option>
<option value="conakry">Conakry</option>
<option value="dallas">Dallas</option>
<option value="dubai">Dubai</option>
<option value="fortaleza">Fortaleza</option>
<option value="guinea">Guinea</option>
<option value="ha-noi">Ha Noi</option>
<option value="hamburg">Hamburg</option>
<option value="india">india</option>
<option value="istanbul">istanbul</option>
<option value="jacksonville">Jacksonville</option>
<option value="kathmandu">Kathmandu</option>
<option value="kk">kk</option>
<option value="latur">latur</option>
<option value="lll">lll</option>
<option value="london">London</option>
<option value="manila">Manila</option>
<option value="melbourne">Melbourne</option>
<option value="montreal">montreal</option>
<option value="new-york">New York</option>
<option value="newcastle">Newcastle</option>
<option value="nigeria">Nigeria</option>
<option value="noordwijk">Noordwijk</option>
<option value="philippines">Philippines</option>
<option value="san-gwann">San Gwann</option>
<option value="scotland">Scotland</option>
<option value="sydney">Sydney</option>
<option value="tourcoin">Tourcoin</option>
<option value="vienna-austria">Vienna, Austria</option>
<option value="wroclaw">Wrocław</option>
<option value="zxczxc">zxczxc</option>
<option value="zxczxvzxv">zxczxvzxv</option>
</select>
<textarea id="country"></textarea>
Ref
This is actually embarrassing, but I can't seem to tab to the select box and I've tried all I know to do.
<form action="trial.php" method="post">
<div class="formLeftCol">
First Name:<br/>
Last Name:<br/>
Address:<br/>
City:<br/>
Select State <br/>
Zip Code:<br/>
Phone:<br/><br/>
<p class="emailLabel">
Email:</p><br/>
</div>
<div class="formRightCol">
<input class="formInput" type="text" name="first" />
<input class="formInput" type="text" name="last" />
<input class="formInput" type="text" name="address" />
<input class="formInput" type="text" name="city" />
<select tabindex=1 class="formInput" name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<input class="formInput" type="text" name="zip" />
<input class="formInput" type="text" name="phone" />
<input class="formInputEmail" type="text" name="email" />
</div>
<input class="formButton" type="image" src="images/trial/submitbutton.png" alt="Submit button">
</form>
Either just remove the tabindex attribute from the select element (since other input elements doesn't have it), or set it on all other input elements as well, with the desired tabbing order as tabindex value.