I currently have a dropdown field that onchange will input the value.
function CurrentStatusChanged() {
var currentS1 = document.getElementById("currentStatus1").value;
var currentS2 = document.getElementById("currentStatus2").value;
document.getElementById("currentStatusView1").innerHTML = "You selected: " + currentS1;
document.getElementById("currentStatusView2").innerHTML = "You selected: " + currentS2;
}
I have many fieldsets created and then correct fieldset needs to show dependent on the what selected in the dropdown box.
My question is:
What is the best approach? As I don't feel innerHTML then all of the code is good practise.
<fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
<div class="col-md-4">
<textarea class="form-control" id="partTime" name="partTime"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
<div class="col-md-4">
<input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
<div class="col-md-4">
<input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
I am trying to add a field set like the one above to a container, however i have at least 12 that change dependent on the drop-down. kindisch answer doesn't allow mt use the complete field set but is on the right track i believe.
Use templates for that. For example:
var storage = [],
select = document.getElementById("selection"),
container = document.getElementById("container");
select.addEventListener("change", function() {
var _id = select.value,
_tpl = document.getElementById(_id);
save();
container.innerHTML = _tpl.innerHTML;
update();
}, false);
// Save current state
function save() {
var _fields = container.getElementsByClassName("form-control");
for (var i = 0; i < _fields.length; i++) {
storage[_fields[i].name] = _fields[i].value;
}
}
// Fill input fields of element
function update() {
var _fields = container.getElementsByClassName("form-control");
for (var i = 0; i < _fields.length; i++) {
if (_fields[i].name in storage) {
_fields[i].value = storage[_fields[i].name];
}
}
}
<select id="selection">
<option value="status-one">One</option>
<option value="status-two">Two</option>
<option value="status-three">Three</option>
</select>
<div id="container"></div>
<script type="text/html" id="status-one">
<fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
<div class="col-md-4">
<textarea class="form-control" id="partTime" name="partTime"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
<div class="col-md-4">
<input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
<div class="col-md-4">
<input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
</script>
<script type="text/html" id="status-two">
<p>This is status two.</p>
</script>
<script type="text/html" id="status-three">
<p>This is status three.</p>
</script>
could you use html5 data attributes? https://jsfiddle.net/hj6bbgbd/
<select id="mySelect" onchange="myFunction()">
<option value="1" data-text = "text for choice one">One</option>
<option value="2" data-text = "text for choice two">Two</option>
<option value="3" data-text = "text for choice three">Three</option>
</select>
<fieldset>
<fieldset>
<legend>My Legend:</legend>
<p id="demo"> text for choice one </p>
</fieldset>
<script>
function myFunction() {
var sel = document.getElementById('mySelect');
var opt = sel.options[sel.selectedIndex];
document.getElementById("demo").innerHTML = opt.dataset.text;
}
</script>
Related
I am new to javascript, I want to get two fees in text boxes and show sum of those two fees in another text box (which is disabled, so can't edit it, just for showing purpose) below is my html form.. result should show when entering in fee1 or fee2 not in submit button. How to do it?
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id ="total_fee" name="total_fee" >
</div>
</div>
use input event on fee1 and fee2 and then sum their values and put as value of total_fee.
e.g.
const fee1 = document.getElementById("fee1");
const fee2 = document.getElementById("fee2");
const total_fee = document.getElementById("total_fee");
fee1.addEventListener("input", sum);
fee2.addEventListener("input", sum);
function sum() {
total_fee.value = Number(fee1.value)+Number(fee2.value);
}
see in action
https://jsbin.com/lizunojadi/edit?html,js,output
Basically you listen to input event on both of the controls, summing the values into the other input.
document.querySelectorAll("#fee1, #fee2").forEach(function(elem) {
elem.addEventListener("input", do_sum)
})
function do_sum() {
var total = 0
document.querySelectorAll("#fee1, #fee2").forEach(function(elem) {
total += +elem.value;
})
document.querySelector("#total_fee").value = total
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id="total_fee" name="total_fee">
</div>
</div>
</div>
</div>
Here is the simple solution for your code,
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0" value="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0" value="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id ="total_fee" name="total_fee" >
</div>
</div>
Here in the HTML code default value="0",
Now in Javascript,
const fee1 = document.getElementById('fee1');
const fee2 = document.getElementById('fee2');
const totalFee = document.getElementById('total_fee');
function doSum() {
const fee1Value = parseInt(fee1.value);
const fee2Value = parseInt(fee2.value);
const totalFeeValue = fee1Value + fee2Value;
totalFee.value = totalFeeValue;
}
fee1.addEventListener('input', doSum);
fee2.addEventListener('input', doSum);
doSum() function is executing oninput
The value of InterMap and interDetailMap are coming from the backend. I have tried many ways to get the selected option but my JQuery change event isn't working.
I think there might be some issue with the sequence of script tags or maybe jquery tags but I cannot understand what's going wrong.
What I want to implement is that when I select Broker then my intermediary name field values will come from the backend and when I select Outsource then my name dropdown should convert into text input field and all the other fields should convert into empty text fields.
$('#intermediary_type').on('change', function() {
var selectedType = $(this).children("option:selected").text();
//var selectedType = document.getElementById("intermediary_type");
console.log(selectedType);
//var interMap = ${interMap};
document.getElementById("intermediary_name").innerHTML = "";
//var nameList = interMap[selectedType.value];
//const select="--Select--";
if (selectedType == "Broker") {
var drop = "<select class='form-control' id='intermediary_name' name='intermediary_name'></select>"
$("#intermediary_name").replaceWith(drop);
$("#intermediary_name").append("<option value=''> --Select---- </option>");
for (var i = 0; i < nameList.length; i++) {
$("#intermediary_name").append("<option value='" + nameList[i] + "'>" + nameList[i] + "</option>");
}
document.getElementById("int_spoc_name").value = "";
document.getElementById("int_emailid").value = "";
document.getElementById("int_phonenumber").value = "";
document.getElementById("int_address").value = "";
$("#intermediary_name").trigger("change");
$('#intermediary_name').on('change', function() {
var y = document.getElementById("intermediary_name");
var interDetailMap = ${interDetailMap};
var interDetail = interDetailMap[y.value];
document.getElementById("int_spoc_name").value = interDetail["intSpocName"];
document.getElementById("int_emailid").value = interDetail["intermediaryMail"];
document.getElementById("int_phonenumber").value = interDetail["intermediaryMobile"];
document.getElementById("int_address").value = interDetail["intermediaryAddress"];
//$("#intermediary_name").append();
})
}
if (selectedType == "Outsource") {
var txt = "<input type='text' maxlength=50 class='form-control text-alphanumeric-field-alignment' id='intermediary_name' name='intermediary_name'>"
$("#intermediary_name").replaceWith(txt);
document.getElementById("intermediary_name").value = "";
document.getElementById("int_spoc_name").value = "";
document.getElementById("int_emailid").value = "";
document.getElementById("int_phonenumber").value = "";
document.getElementById("int_address").value = "";
}
});
<div class="container">
<div class="h2"> Intermediary Details</div>
<div class="row">
<div class="form-group col-md-3 mb-5 ">
<label class="field" for="sel1">Type <span
style="color: red; font-size: large;">*</span></label>
<select name="intermediary_type" class="form-control" id="intermediary_type" required>
<option selected disabled>Select</option>
<option value="">Broker</option>
<option value="">Field Functionary</option>
<option value="">Outsource</option>
</select>
</div>
<div class="form-group col-md-3 mb-5 ">
<label class="field" for="sel1">Name </label>
<select name="intermediary_name" class="form-control" id="intermediary_name" required>
<option selected disabled>Select</option>
</select>
</div>
<div class="col-md-3 mb-5">
<label for="" class="form-label field">Spoc Name</label>
<input type="text" name="spoc_name" class="form-control" placeholder="" id="int_spoc_name" aria-label="" value="">
</div>
<div class="col-md-3 mb-5">
<label for="" class="form-label field">Email ID</label>
<input type="text" name="int_emailid" class="form-control" placeholder="" id="int_emailid" aria-label="" value="">
</div>
<div class="col-md-3 mb-5">
<label for="inputBank_Branch_Address" class="form-label field">Phone Number</label>
<input type="text" name="int_phonenumber" class="form-control" placeholder="" id="int_phonenumber" aria-label="" value="">
</div>
<div class="col-md-3 mb-5">
<label for="inputBank_Branch_Address" class="form-label field">Address</label>
<input type="text" name="int_address" class="form-control" placeholder="" id="int_address" aria-label="" value="">
</div>
</div>
</div>
i have this code which changes the input type of my textfield between email and text.
<div id ="info_input" class="container">
<form class="col s12">
<div class="row">
<div style="padding-top: 15px;padding-left: 50px" class="col s6 l4">
<select class = "source">
<option value="" disabled>Choose your option</option>
<option value="select_id">ID</option>
<option value="select_email">EMAIL</option>
</select>
<label>INPUT SELECTION</label>
</div>
<div class="input-field col s6 l5">
<div id = "source_input_field_id_div">
<input id="source_input_field" type="text" class="validate" required>
<label for="source_input_field_id">ID</label>
</div>
<div id = "source_input_field_email_div">
<input id="source_input_field" type="email" class="validate" required>
<label for="source_input_field_email">Email</label>
</div>
</div>
<div style="padding-top: 15px">
<a onclick="getInfo()"; class="waves-effect waves-light btn">button</a>
</div>
</div>
</div>
then my type-change code
<script type="text/javascript">
$(document).ready(function(){
//hide email form
$("#source_input_field_email_div").hide();
$("select.source").change(function(){
var selectedSource = $(".source option:selected").val();
if(String(selectedSource) == 'select_id'){
$("#source_input_field_id_div").show();
$("#source_input_field_email_div").hide();
}
else{
$("#source_input_field_id_div").hide();
$("#source_input_field_email_div").show();
}
});
});
</script>
I have a button when clicked must log which field value must be logged
function getInfo(){
var input_value = document.getElementById('source_input_field').value;
console.log(input_value);
}
the only value the button gets is with the ID tag. any turn around for this?
EDIT:
change my get Info to get the right text. chamged the id of both textfield
if(String(selectedSource) == 'select_id'){
input_value = document.getElementById('source_input_field_id').value;
}
else{
input_value = document.getElementById('source_input_field_email').value;
}
console.log(input_value);
I have Form with several selects
Here is code
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Ф.И.О</label>
<input type="text" class="form-control" id="Name">
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Дата Рождения</label>
<input type="date" class="form-control" id="birthday">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Должность:</label>
<textarea class="form-control" id="position"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Телефон:</label>
<textarea class="form-control" id="telephonepeople"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">График работы:</label>
<select class="form-control" id="workTime">
<option>Дневная Смена</option>
<option>Ночная смена</option>
<option>Сутки</option>
<option>Дневная -Ночная смены</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Адрес проживания:</label>
<textarea class="form-control" id="adress"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Регион:</label>
#Html.DropDownList("Region", null, htmlAttributes: new { #class = "form-control", #id = "region" })
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Паспортные данные:</label>
<textarea class="form-control" id="passportData"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">ИНН:</label>
<textarea class="form-control" id="INN"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Медицинская книга:</label>
<select class="form-control" id="medicalCard">
<option>Имеется</option>
<option>Не Имеется</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Дата окончания мед книжки:</label>
<input type="date" class="form-control" id="bookending">
</div>
I need to get values from it and pass to back-end.
I have this javascript code (here is part, where I get values, because all other is working great)
function AddPeople() {
let proposalurl = '/peopleforworks/addpeople';
let Name = $('#Name').val();
let birthday = $('#birthday').val();
let telephone = $('#telephonepeople').val();
let workTime = $('#workTime').text();
let adress = $('#adress').val();
let passportData = $('#passportData').val();
let medicalCard = $('#medicalCard').val();
let INN = $('#INN').val();
let medicalbookdate = $('#bookending').val();
let position = $('#position').val();
let region = $('#region').text();
alert(workTime);
But alert shows me nothing. All other selects are working and values is getting from them.
Where can be my problem?
Thank's for help
You need to define a value for each of your select's <option>:
Replace this:
<select class="form-control" id="workTime">
<option>Дневная Смена</option>
<option>Ночная смена</option>
<option>Сутки</option>
<option>Дневная -Ночная смены</option>
</select>
By this:
<select class="form-control" id="workTime">
<option value="Дневная Смена">Дневная Смена</option>
<option value="Ночная смена">Ночная смена</option>
<option value="Сутки">Сутки</option>
<option value="Дневная -Ночная смены">Дневная -Ночная смены</option>
</select>
And also:
let workTime = $('#workTime').text();
By this:
let workTime = $('#workTime').val();
use .val()
let workTime = $('#workTime').val();
I am trying to have 3 boxes to use the javascript of google API to provide suggestion when filling addresses.But unfortunately it works for only 1 text box Base city.Other two dont respond to javascript
Javascript
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</script>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loc" name="City" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Location" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location" class="form-control" >
</div>
</div>
The problem is that you have three div's with the same id="loc"; however, the id should be unique. So when you run your code, once compiler sees the first id it uses it and it doesn't go further to search for the next one.
To fix that you need to give different id to each div, and create autocomplete variable for each div. You might as well create separate listeners, but I leave it up to you.
var autocomplete1 = new google.maps.places.Autocomplete($("#loc1")[0], {});
var autocomplete2 = new google.maps.places.Autocomplete($("#loc2")[0], {});
var autocomplete3 = new google.maps.places.Autocomplete($("#loc3")[0], {});
google.maps.event.addListener(autocomplete1, 'place_changed', function () {
var place = autocomplete1.getPlace();
console.log(place.address_components);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<body>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base City</label>
<div class="col-md-3">
<input type="text" id="loc1" name="City" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Base Location</label>
<div class="col-md-3">
<input type="text" id="loc2" name="Location" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Work Location</label>
<div class="col-md-3">
<input type="text" id="loc3" name="Work_Location" class="form-control">
</div>
</div>
</body>
function initialize() {
//debugger;
// Create the autocomplete object, restricting the search
// to geographical location types.
var clsname = document.getElementsByClassName('autocomplet');
for (var i = 0; i < clsname.length; i++) {
var id = clsname[i].id;
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(id)), {
types: ['geocode']
});
}
}