Adding a Label to an HTML Form

Asked

Viewed 44 times

-2

Hello, I was in need of a help to add a label in a "mini" HTML form. I need a label, like : First Name and put next to this form here, on the same line, and when you click the button show selected fire a alert with the value of the field First Name, Country and State. The form is here :


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var citiesByState = {
Australia: ["Sidney","Camberra"],
Canada: ["Toronto","Montreal"],
USA: ["Chicago","Miami"]
}
function makeSubmenu(value) {
if(value.length==0) document.getElementById("citySelect").innerHTML = "<option></option>";
else {
var citiesOptions = "";
for(cityId in citiesByState[value]) {
citiesOptions+="<option>"+citiesByState[value][cityId]+"</option>";
}
document.getElementById("citySelect").innerHTML = citiesOptions;
}
}
function displaySelected() { var country = document.getElementById("countrySelect").value;
var city = document.getElementById("citySelect").value;
alert(country+"\n"+city);
}
function resetSelection() {
document.getElementById("countrySelect").selectedIndex = 0;
document.getElementById("citySelect").selectedIndex = 0;
}
</script>
</head>
<body onload="resetSelection()">
<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
<option value="" disabled selected>Choose State</option>
<option>Australia</option>
<option>Canada</option>
<option>USA</option>
</select>
<select id="citySelect" size="1" >
<option value="" disabled selected>Choose City</option>
<option></option>
</select>
<button onclick="displaySelected()">show selected</button>
</body>
</html>

Thanks in advance

javascript html

  • Thanks Leo, Big Brother

1 answer

0

First put a field in HTML, example

<input type="text" id="firstName" placeholder="First Name">

In the function displaySelected() recover the entered value

var firstName=document.getElementById("firstName").value;

If nothing is typed you can set a default value

if (firstName==""){
    firstName = "Nameless";
}

Still in the function displaySelected() change how to display Alert, if State is not selected the alert will remember to do this

if (country){
   alert(firstName+ "\n"+country+"\n"+city);
}else{
   alert("Choose State");
}

To function resetSelection() also had very obvious changes

Modified

document.getElementById("citySelect").innerHTML = '<option value="" disabled selected>Choose City</option>';

Included

document.getElementById("firstName").value="";

In the HTML added button to trigger the function resetSelection()

var citiesByState = {
Australia: ["Sidney","Camberra"],
Canada: ["Toronto","Montreal"],
USA: ["Chicago","Miami"]
}
function makeSubmenu(value) {
if(value.length==0) document.getElementById("citySelect").innerHTML = "<option></option>";
else {
var citiesOptions = "";
for(cityId in citiesByState[value]) {
citiesOptions+="<option>"+citiesByState[value][cityId]+"</option>";
}
document.getElementById("citySelect").innerHTML = citiesOptions;
}
}
function displaySelected() { 
var firstName=document.getElementById("firstName").value;
if (firstName==""){
firstName = "Nameless";
}
var country = document.getElementById("countrySelect").value;
var city = document.getElementById("citySelect").value;
if (country){
alert(firstName+ "\n"+country+"\n"+city);
}else{
alert("Choose State");
}
}
function resetSelection() {
document.getElementById("countrySelect").selectedIndex = 0;
document.getElementById("citySelect").innerHTML = '<option value="" disabled selected>Choose City</option>';
document.getElementById("firstName").value="";
}
<body onload="resetSelection()">
<input type="text" id="firstName" placeholder="First Name">
<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
<option value="" disabled selected>Choose State</option>
<option>Australia</option>
<option>Canada</option>
<option>USA</option>
</select>
<select id="citySelect" size="1" >
<option value="" disabled selected>Choose City</option>
<option></option>
</select>
<button onclick="displaySelected()">show selected</button>
<button onclick="resetSelection()">Reset selected</button>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.