I want to get the Hour and minute value from below control by using there label
also I want to set the value to that control.
Using jQuery and javascript.
<td class="ms-dttimeinput" nowrap="nowrap">
<label for="ctl00_m_g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce_ff211_ctl00_ctl00_DateTimeField_DateTimeFieldDateHours" style="display:none">NEndTime Hours</label>
<select name="ctl00$m$g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce$ff211$ctl00$ctl00$DateTimeField$DateTimeFieldDateHours" id="ctl00_m_g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce_ff211_ctl00_ctl00_DateTimeField_DateTimeFieldDateHours">
<option selected="selected" value="00:">00:</option>
<option value="01:">01:</option>
<option value="21:">21:</option>
<option value="22:">22:</option>
<option value="23:">23:</option>
</select>
<label for="ctl00_m_g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce_ff211_ctl00_ctl00_DateTimeField_DateTimeFieldDateMinutes" style="display:none">NEndTime Minutes</label>
<select name="ctl00$m$g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce$ff211$ctl00$ctl00$DateTimeField$DateTimeFieldDateMinutes" id="ctl00_m_g_460bfeda_4d7a_4f5e_9587_9e0cd11d65ce_ff211_ctl00_ctl00_DateTimeField_DateTimeFieldDateMinutes">
<option selected="selected" value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select></td>
Get the value for hr and min using the text in the label tags
var hr,min;
$(".ms-dttimeinput label").each(function() {
var lbl = $(this);
if(lbl.text() == "NEndTime Hours")
hr = lbl.next("select").val();
if(lbl.text() == "NEndTime Minutes")
min = lbl.next("select").val();
});
Set the value for hr and min using the text in the label tags
var hr = "01";
var min = "o5";
$(".ms-dttimeinput label").each(function() {
var lbl = $(this);
if(lbl.text() == "NEndTime Hours")
lbl.next("select").val(hr);
if(lbl.text() == "NEndTime Minutes")
lbl.next("select").val(min);
});
If there is only one widget on the page the more practical approach would be using the class name selector "ms-dttimeinput" with the descendent tag selector " select" and the nth child class ":nth-child()".
var hr = $(".ms-dttimeinput select:nth-child(1)").val();
var min = $(".ms-dttimeinput select:nth-child(2)").val();
$(".ms-dttimeinput select:nth-child(1)").val(hr);
$(".ms-dttimeinput select:nth-child(2)").val(min);
Related
I'm setting up a new form on my site, and I'm using some code I found here (Vehicle drop down selector). However, I'm using this code within a form, and once the form is submitted, the values for make/model aren't changed to their respective names, instead showing their form values. Being a complete JS noob, how would I go about changing the values submitted from values to make/model names?
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
$model.html($options.filter('[value="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
var $model = $('#model'),
$year = $('#year'),
$yearOptions = $year.find('option');
$model.on('change', function() {
$year.html($yearOptions.filter('[value="' + this.value + '"]'));
$year.trigger('change');
}).trigger('change');
var $year = $('#year'),
$identifier = $('#identifier'),
$identifierOptions = $identifier.find('option');
$year.on('change', function() {
var filteredIdetifiers = $identifierOptions.filter('[value="' + this.value + '"]');
debugger
if (!($("#make").val() == 3 && $("#model option:selected").text() == 'Falcon')) {
filteredIdetifiers = filteredIdetifiers.filter(function(i, e) {
return e.value !== '3'
});
}
$identifier.html(filteredIdetifiers);
$identifier.trigger('change');
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Vehicle Brand Selector List -->
<select name="make" id="make">
<option value="0">Make</option>
<option value="1">BMW</option>
<option value="2">Daewoo</option>
<option value="3">Ford</option>
<option value="4">Holden</option>
<option value="5">Honda</option>
<option value="6">Hyundai</option>
<option value="7">Isuzu</option>
<option value="8">Kia</option>
<option value="9">Lexus</option>
<option value="10">Mazda</option>
<option value="11">Mitsubishi</option>
<option value="12">Nissan</option>
<option value="13">Peugeot</option>
<option value="14">Subaru</option>
<option value="15">Suzuki</option>
<option value="16">Toyota</option>
<option value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="1">318i</option>
<option class="lanos" value="2">Lanos</option>
<option class="courier" value="3">Courier</option>
<option class="falcon" value="3">Falcon</option>
<option class="festiva" value="3">Festiva</option>
<option class="fiesta" value="3">Fiesta</option>
<option class="focus" value="3">Focus</option>
<option class="laser" value="3">Laser</option>
<option class="ranger" value="3">Ranger</option>
<option class="territory" value="3">Territory</option>
<option class="astra" value="4">Astra</option>
<option class="barina" value="4">Barina</option>
<option class="captiva" value="4">Captiva</option>
<option class="colorado" value="4">Colorado</option>
<option class="commodore" value="4">Commodore</option>
<option class="cruze" value="4">Cruze</option>
<option class="rodeo" value="4">Rodeo</option>
<option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
<option value="0">Year</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
<option value="1">2003</option>
<option value="1">2004</option>
<option value="1">2005</option>
<option value="2">1997</option>
<option value="2">1998</option>
<option value="2">1999</option>
<option value="2">2000</option>
<option value="2">2001</option>
<option value="2">2002</option>
<option value="2">2003</option>
<option value="3">1991-1999</option>
<option value="4">1997-2007</option>
<option value="5">1997-2007</option>
<option value="3">2002</option>
<option value="3">2003</option>
<option value="3">2004</option>
<option value="3">2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
</select>
<!-- Vehicle Identity List -->
<select name="identifier" id="identifier">
<option value="0">Type</option>
<option class="E46" value="1">E46</option>
<option class="1997-2003" value="2">N/A</option>
<option class="1997-2007" value="4">N/A</option>
<option class="1997-2007" value="5">N/A</option>
<option class="5041618" value="3">BA</option>
<option class="1997-2005" value="3">AU</option>
<option class="1997-2005" value="3">AU2</option>
<option class="1997-2005" value="4">N/A</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
</select>
In every <option> tag there is an attribute called value. This value attribute is what is returned at as the value of the dropdown when that option is selected. Seems like in the code you found they are all simply set to numbers. You can set them to be whatever you want though:
<option value="Ford">Ford</option>
<option class="focus" value="Focus">Focus</option>
FIXING DYNAMIC OPTIONS
I see that modifying the values directly affect how the dynamic options are displayed. For example the value attribute of the car model dropdown is used to filter the car make dropdown by only displaying options with the same value. Instead of using the model dropdown's value attributes to compare with make, we can add a new data- attribute called data-make and filter the model dropdown based on that instead. This allows you to freely modify the value attribute in model. The example code below shows this. You would need to modify your JS so model affects year, and year affects identifier in the same way.
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
// We now filter model using the data-make attribute, not value
$model.html($options.filter('[data-make="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
$('#carForm').submit(function(e) {
e.preventDefault();
let formData = $(this).serializeArray();
let data = {};
for (let i = 0; i < formData.length; i++) {
data[formData[i].name] = formData[i].value;
}
alert('Make: ' + data.make + '\nModel: ' + data.model);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="carForm">
<select name="make" id="make">
<option value="0">Make</option>
<option value="BMW">BMW</option> <!-- These values are now make names -->
<option value="Daewoo">Daewoo</option>
<option value="Ford">Ford</option>
</select>
<!-- Vehicle Model List -->
<!-- Notice the new "data-make" attributes for each -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="318i" data-make="BMW">318i</option>
<option class="lanos" value="Lanos" data-make="Daewoo">Lanos</option>
<option class="courier" value="Courier" data-make="Ford">Courier</option>
<option class="falcon" value="Falcon" data-make="Ford">Falcon</option>
<option class="festiva" value="Festiva" data-make="Ford">Festiva</option>
<option class="fiesta" value="Fiesta" data-make="Ford">Fiesta</option>
<option class="focus" value="Focus" data-make="Ford">Focus</option>
</select>
<button type="submit">Submit</button>
</form>
You can get the selected option text like this.
$('#form').submit(function(e) {
e.preventDefault();
var make = $make.find(':selected').text();
}
But it would be good practice to set the value you expect to return as the option value and use a data attribute or class to handle the filtering logic.
This question already has answers here:
How to get all selected values of a multiple select box?
(28 answers)
Closed 5 years ago.
I'm still a beginner hence this is difficult, but how do I display the options I selected into an alert box. So it would be "You selected (value), (value), (value)".
This is my select list
<form id='form1'>
<select id="options" multiple >
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option>
<option value="classics">Classics</option>
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option>
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option>
<option value="travel">Travel</option>
</select>
</form>
Should I add a button. But what I'm struggling with is the javascript.
The easiest way to access selected elements of a select tag is with the "selectedOptions" property.
I would do it this way:
var form = document.getElementById('form1');
form.addEventListener('submit', function () {
var select = form.querySelector('#options'),
options = select.selectedOptions,
values = [];
for (var i = options.length - 1; i >= 0; i--) {
values.push(options[i].value);
}
alert('You selected: ' + values.join(', '));
}, false);
Try something like this:
function selectedValues()
{
var x=document.getElementById("options");
var selectedValues= '';
for (var i = 0; i < x.options.length; i++) {
if(x.options[i].selected ==true){
selectedValues += x.options[i].value + ", ";
}
}
alert("You selected: "+ selectedValues.slice(0, -2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='form1'>
<select id="options" multiple onchange="selectedValues()">
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option>
<option value="classics">Classics</option>
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option>
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option>
<option value="travel">Travel</option>
</select>
</form>
I'm doing 'Calendar Event' app. After choosing the day of the week, times and short description I can click on 'Add Event' button and add a row to table (not visible), but I don't know, how to add a cell to it.
I was trying to add cell, by grabbing '.event' class var eventContent = document.querySelectorAll('.event'); , and use appendChild() method,
for(var j = 0; j < eventContent.length; j +=1){
eventContent[j].appendChild(tdElement1);
eventContent[j].appendChild(tdElement2);
}
but the cells are not inserting as should be, after changing the day of the week.
There is the HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daily Programmer Challenge #0004 | Events Calendar</title>
<link rel="stylesheet" href="css/0004_eventsCalendar.css">
</head>
<body>
<div id="container">
<div class="toolbarMenu">
<div class="toolLeft">
<div class="leftButtons">
<button type="button"><span><</span></button>
<button type="button"><span>></span></button>
</div>
<button type="button">today</button>
</div>
<div class="toolCenter">
<h2>Test</h2>
</div>
</div>
<hr>
<div id="content">
<div id="leftSide">
<table>
<tbody>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Monday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Tuesday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Wednesday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Thursday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Friday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Saturday</span><span class="dayDate"></span></td>
</tr>
<tr class="eventHead">
<td class="dayHead" colspan="2"><span class="day">Sunday</span><span class="dayDate"></span></td>
</tr>
<!--
<tr class="event">
<td class="time"></td>
<td class="desc"></td>
</tr>
-->
</tbody>
</table>
<p><i><strong>Note:</strong> After adding event into table, you can EDIT it!</i></p>
</div>
<div id="rigthSide">
<h3>Calendar panel</h3>
<form id="calendarCMS" name = "calendarCMS" action="#">
<fieldset>
<select name="dayOfWeek" id="dayOfWeek">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
<div id="fromToTime">
<span>from:</span>
<select name="fromTime" id="fromTime">
<option value="07.00am">07:00am</option>
<option value="07.15am">07:15am</option>
<option value="07.30am">07:30am</option>
<option value="07.45am">07:45am</option>
<option value="08.00am">08:00am</option>
<option value="08.15am">08:15am</option>
<option value="08.30am">08:30am</option>
<option value="08.45am">08:45am</option>
<option value="09.00am">09:00am</option>
<option value="09.15am">09:15am</option>
<option value="09.30am">09:30am</option>
<option value="09.45am">09:45am</option>
<option value="10.00am">10:00am</option>
<option value="10.15am">10:15am</option>
<option value="10.30am">10:30am</option>
<option value="10.45am">10:45am</option>
<option value="11.00am">11:00am</option>
<option value="11.15am">11:15am</option>
<option value="11.30am">11:30am</option>
<option value="11.45am">11:45am</option>
<option value="12.00am">12:00am</option>
<option value="12.15am">12:15am</option>
<option value="12.30am">12:30am</option>
<option value="12.45am">12:45am</option>
<option value="13.00pm">13:00pm</option>
<option value="13.15pm">13:15pm</option>
<option value="13.30pm">13:30pm</option>
<option value="13.45pm">13:45pm</option>
<option value="14.00pm">14:00pm</option>
<option value="14.15pm">14:15pm</option>
<option value="14.30pm">14:30pm</option>
<option value="14.45pm">14:45pm</option>
<option value="15.00pm">15:00pm</option>
<option value="15.15pm">15:15pm</option>
<option value="15.30pm">15:30pm</option>
<option value="15.45pm">15:45pm</option>
<option value="16.00pm">16:00pm</option>
<option value="16.15pm">16:15pm</option>
<option value="16.30pm">16:30pm</option>
<option value="16.45pm">16:45pm</option>
<option value="17.00pm">17:00pm</option>
<option value="17.15pm">17:15pm</option>
<option value="17.30pm">17:30pm</option>
<option value="17.45pm">17:45pm</option>
<option value="18.00pm">18:00pm</option>
<option value="18.15pm">18:15pm</option>
<option value="18.30pm">18:30pm</option>
<option value="18.45pm">18:45pm</option>
<option value="19.00pm">19:00pm</option>
<option value="19.15pm">19:15pm</option>
<option value="19.30pm">19:30pm</option>
<option value="19.45pm">19:45pm</option>
<option value="20.00pm">20:00pm</option>
<option value="20.15pm">20:15pm</option>
<option value="20.30pm">20:30pm</option>
<option value="20.45pm">20:45pm</option>
<option value="21.00pm">21:00pm</option>
<option value="21.15pm">21:15pm</option>
<option value="21.30pm">21:30pm</option>
<option value="21.45pm">21:45pm</option>
<option value="22.00pm">22:00pm</option>
<option value="22.15pm">22:15pm</option>
<option value="22.30pm">22:30pm</option>
<option value="22.45pm">22:45pm</option>
<option value="23.00pm">23:00pm</option>
<option value="23.15pm">23:15pm</option>
<option value="23.30pm">23:30pm</option>
<option value="23.45pm">23:45pm</option>
<option value="00.00am">00:00am</option>
<option value="00.15am">00:15am</option>
<option value="00.30am">00:30am</option>
<option value="00.45am">00:45am</option>
<option value="01.00am">01:00am</option>
<option value="01.15am">01:15am</option>
<option value="01.30am">01:30am</option>
<option value="01.45am">01:45am</option>
<option value="02.00am">02:00am</option>
<option value="02.15am">02:15am</option>
<option value="02.30am">02:30am</option>
<option value="02.45am">02:45am</option>
<option value="03.00am">03:00am</option>
<option value="03.15am">03:15am</option>
<option value="03.30am">03:30am</option>
<option value="03.45am">03:45am</option>
<option value="04.00am">04:00am</option>
<option value="04.15am">04:15am</option>
<option value="04.30am">04:30am</option>
<option value="04.45am">04:45am</option>
<option value="05.00am">05:00am</option>
<option value="05.15am">05:15am</option>
<option value="05.30am">05:30am</option>
<option value="05.45am">05:45am</option>
<option value="06.00am">06:00am</option>
<option value="06.15am">06:15am</option>
<option value="06.30am">06:30am</option>
<option value="06.45am">06:45am</option>
</select>
<span>to:</span>
<select name="toTime" id="toTime">
<option value="07.00am">07:00am</option>
<option value="07.15am">07:15am</option>
<option value="07.30am">07:30am</option>
<option value="07.45am">07:45am</option>
<option value="08.00am">08:00am</option>
<option value="08.15am">08:15am</option>
<option value="08.30am">08:30am</option>
<option value="08.45am">08:45am</option>
<option value="09.00am">09:00am</option>
<option value="09.15am">09:15am</option>
<option value="09.30am">09:30am</option>
<option value="09.45am">09:45am</option>
<option value="10.00am">10:00am</option>
<option value="10.15am">10:15am</option>
<option value="10.30am">10:30am</option>
<option value="10.45am">10:45am</option>
<option value="11.00am">11:00am</option>
<option value="11.15am">11:15am</option>
<option value="11.30am">11:30am</option>
<option value="11.45am">11:45am</option>
<option value="12.00am">12:00am</option>
<option value="12.15am">12:15am</option>
<option value="12.30am">12:30am</option>
<option value="12.45am">12:45am</option>
<option value="13.00pm">13:00pm</option>
<option value="13.15pm">13:15pm</option>
<option value="13.30pm">13:30pm</option>
<option value="13.45pm">13:45pm</option>
<option value="14.00pm">14:00pm</option>
<option value="14.15pm">14:15pm</option>
<option value="14.30pm">14:30pm</option>
<option value="14.45pm">14:45pm</option>
<option value="15.00pm">15:00pm</option>
<option value="15.15pm">15:15pm</option>
<option value="15.30pm">15:30pm</option>
<option value="15.45pm">15:45pm</option>
<option value="16.00pm">16:00pm</option>
<option value="16.15pm">16:15pm</option>
<option value="16.30pm">16:30pm</option>
<option value="16.45pm">16:45pm</option>
<option value="17.00pm">17:00pm</option>
<option value="17.15pm">17:15pm</option>
<option value="17.30pm">17:30pm</option>
<option value="17.45pm">17:45pm</option>
<option value="18.00pm">18:00pm</option>
<option value="18.15pm">18:15pm</option>
<option value="18.30pm">18:30pm</option>
<option value="18.45pm">18:45pm</option>
<option value="19.00pm">19:00pm</option>
<option value="19.15pm">19:15pm</option>
<option value="19.30pm">19:30pm</option>
<option value="19.45pm">19:45pm</option>
<option value="20.00pm">20:00pm</option>
<option value="20.15pm">20:15pm</option>
<option value="20.30pm">20:30pm</option>
<option value="20.45pm">20:45pm</option>
<option value="21.00pm">21:00pm</option>
<option value="21.15pm">21:15pm</option>
<option value="21.30pm">21:30pm</option>
<option value="21.45pm">21:45pm</option>
<option value="22.00pm">22:00pm</option>
<option value="22.15pm">22:15pm</option>
<option value="22.30pm">22:30pm</option>
<option value="22.45pm">22:45pm</option>
<option value="23.00pm">23:00pm</option>
<option value="23.15pm">23:15pm</option>
<option value="23.30pm">23:30pm</option>
<option value="23.45pm">23:45pm</option>
<option value="00.00am">00:00am</option>
<option value="00.15am">00:15am</option>
<option value="00.30am">00:30am</option>
<option value="00.45am">00:45am</option>
<option value="01.00am">01:00am</option>
<option value="01.15am">01:15am</option>
<option value="01.30am">01:30am</option>
<option value="01.45am">01:45am</option>
<option value="02.00am">02:00am</option>
<option value="02.15am">02:15am</option>
<option value="02.30am">02:30am</option>
<option value="02.45am">02:45am</option>
<option value="03.00am">03:00am</option>
<option value="03.15am">03:15am</option>
<option value="03.30am">03:30am</option>
<option value="03.45am">03:45am</option>
<option value="04.00am">04:00am</option>
<option value="04.15am">04:15am</option>
<option value="04.30am">04:30am</option>
<option value="04.45am">04:45am</option>
<option value="05.00am">05:00am</option>
<option value="05.15am">05:15am</option>
<option value="05.30am">05:30am</option>
<option value="05.45am">05:45am</option>
<option value="06.00am">06:00am</option>
<option value="06.15am">06:15am</option>
<option value="06.30am">06:30am</option>
<option value="06.45am">06:45am</option>
</select>
</div>
<textarea name="eventDesc" id="eventDesc" cols="45" rows="10" placeholder="Please write the description event details"></textarea>
<input type="submit" value="Add Event">
</fieldset>
<div id="error"></div>
</form>
</div>
</div>
</div>
<script src="js/0004_eventsCalendar.js"></script>
</body>
</html>
JavaScript code:
//self-executing function to protect our local variables
(function(){
// current date
var curentDate = new Date();
// set variable to first day of week (Monday)
var firstDay = (curentDate.getDate() - (curentDate.getDay()-1));
// array of months
var allMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
// loop through to get last day (Friday) of the curent week
for(var i = 0; i < 7; i +=1){
var lastDay = firstDay + i;
}
// add the date to DOM element (h2 tag)
document.querySelector('h2').innerHTML =
allMonths[curentDate.getMonth()] + ' ' + firstDay + ' - ' + lastDay + ', ' + curentDate.getFullYear();
// get all DOM nodes with the class name ('.dayDate')
var dayDate = document.querySelectorAll('.dayDate');
// loop through those nodes and add to DOM month, current date and year
for(var i = 0; i < dayDate.length; i+=1){
dayDate[i].innerHTML = allMonths[curentDate.getMonth()] + ' ' + (firstDay + i) + ', ' + curentDate.getFullYear();
}
// assign form HTML element of Calendar panel to variables. Where '.fromTime' and '.toTome' , are names of <select> tag
var fromTime = document.calendarCMS.fromTime;
var toTime = document.calendarCMS.toTime;
// function for manipulating times (from: and to:), in Calendar panel
function changeFromTime(e){
// triger when time in first pop-down menu '.fromTime' is higher than in second pop-down menu '.toTime'
// where selectedIndex is a number (position) of currently selected element in pop-down menu
if(fromTime.selectedIndex >= toTime.selectedIndex){
// loop throogh first pop-down menu 'fromTime', where fromTime.selectedIndex is index curently selected element
for(var i = 0; i <= fromTime.selectedIndex; i +=1){
// hide all times in second pop-down menu 'toTime' which are below times in '.fromTime' pop-down menu
toTime[i].style.display = 'none';
}
// change position '.toTime' pop-down menu index to be equal to first pop-down menu '.froTime'
return toTime.selectedIndex = i;
}
// triger when time in first pop-down menu '.fromTime' is lower than in second pop-down menu '.toTime'
if(fromTime.selectedIndex <= toTime.selectedIndex){
// reverse (remove) styling when user change to earlier time, where we removing styling only to elements which are
// below curently selected index (i = fromTime.selectedIndex) in '.fromTime' pop-down menu
for(var i = fromTime.selectedIndex; i < toTime.selectedIndex; i +=1){
toTime[i].removeAttribute('style');
}
// change position '.toTime' pop-down menu index to be equal to first pop-down menu '.froTime'
return toTime.selectedIndex = fromTime.selectedIndex;
}
}
// function use to add/remove calendar events
function addEvent(e){
//event will triger only when user press submit 'Add Event' button
if(e.target.type === 'submit'){
// prevent submit button from default behavior
e.preventDefault();
// assign a couple of variables
var textArea = document.querySelector('textarea');
var eventHead = document.querySelectorAll('.eventHead');
var trElement = document.createElement('tr');
trElement.className = 'event';
var eventDesc = document.querySelectorAll('.desc');
var eventTime = document.querySelectorAll('.time');
var errMsg = document.querySelector('#error');
errMsg.style.color = "red";
// loop through description field in HTML table
for(var i = 0; i < eventHead.length; i+=1){
// trigger when option in index in 'dayOfWeek' pop-down menu will match index of description field
if(document.calendarCMS.dayOfWeek.selectedIndex === i){
// if textarea in HTML will be empty, then the error msg will pop out, blocking user from adding event
if(textArea.value === ''){
// error msg show when user doesn't fill all necessary details
errMsg.innerHTML = 'Please fill all fields';
return;
} else{ // if all require filed will be filled
/*
// after description of event will be added to table, then will be editable
eventDesc[i].contentEditable = true;
// after times of event will be added to table, then will be editable
eventTime[i].contentEditable = true;
*/
eventHead[i].parentNode.insertBefore(trElement.cloneNode(true), eventHead[i].nextElementSibling);
var eventContent = document.querySelectorAll('.event');
var tdElement1 = document.createElement('td');
var tdElement2 = document.createElement('td');
tdElement1.className = 'time';
tdElement2.className = 'desc';
for(var j = 0; j < eventContent.length; j +=1){
eventContent[j].appendChild(tdElement1);
eventContent[j].appendChild(tdElement2);
}
// reset all field in Calendar panel
fromTime.selectedIndex = 0;
toTime.selectedIndex = 0;
textArea.value = '';
errMsg.innerHTML = '';
}
}
}
}
}
// function for higlight current day of the week
function todayDay(e){
// triger only when user click 'today' button
if(e.target.textContent === 'today'){
var focusEvent = document.querySelectorAll('.event');
// loop through to find the current day of the week and highliht it
for(var i = 0; i < focusEvent.length; i +=1){
if(curentDate.getDay() === i){
focusEvent[i-1].style.background = 'yellow';
}
}
}
}
// events listeners
document.querySelector('#calendarCMS').addEventListener('click', addEvent, false);
document.querySelector('#fromTime').addEventListener('change', changeFromTime, false);
document.querySelector('.toolLeft').addEventListener('click', todayDay, false);
})();
I do not exactly apprehend your attempt with the commented tr class "event". But what you want to achieve (at least inferring from the description) can be done by declaring addEvent as :
function addEvent(e){
//event will triger only when user press submit 'Add Event' button
if(e.target.type === 'submit'){
// prevent submit button from default behavior
e.preventDefault();
// assign a couple of variables
var textArea = document.querySelector('textarea');
var eventHead = document.querySelectorAll('.eventHead');
var trElement = document.createElement('tr');
trElement.className = 'event';
var eventDesc = document.querySelectorAll('.desc');
var eventTime = document.querySelectorAll('.time');
var errMsg = document.querySelector('#error');
errMsg.style.color = "red";
// loop through description field in HTML table
for(var i = 0; i < eventHead.length; i+=1){
// trigger when option in index in 'dayOfWeek' pop-down menu will match index of description field
if(document.calendarCMS.dayOfWeek.selectedIndex === i){
// if textarea in HTML will be empty, then the error msg will pop out, blocking user from adding event
if(textArea.value === ''){
// error msg show when user doesn't fill all necessary details
errMsg.innerHTML = 'Please fill all fields';
return;
} else{ // if all require filed will be filled
/*
// after description of event will be added to table, then will be editable
eventDesc[i].contentEditable = true;
// after times of event will be added to table, then will be editable
eventTime[i].contentEditable = true;
*/
var newTr = trElement.cloneNode(true);
eventHead[i].parentNode.insertBefore(newTr, eventHead[i].nextElementSibling);
var eventContent = document.querySelectorAll('.event');
var tdElement1 = document.createElement('td');
var tdElement2 = document.createElement('td');
tdElement1.innerText=fromTime.value + " - " + toTime.value;
tdElement2.innerText=textArea.value;
tdElement1.className = 'time';
tdElement2.className = 'desc';
for(var j = 0; j < eventContent.length; j +=1){
newTr.appendChild(tdElement1);
newTr.appendChild(tdElement2);
}
// reset all field in Calendar panel
fromTime.selectedIndex = 0;
toTime.selectedIndex = 0;
textArea.value = '';
errMsg.innerHTML = '';
}
}
}
}
}
You can try it here : https://jsfiddle.net/dn9v5qf9/
I am trying to make a simple "registry book" from a select HTML
The idea is 3 selecting options click confirm and based on the selected options make a price with a math formula or (don't know what is ) an array (in the sense of a table of like every var there) add a Hour:Minute from machine and place it in a paragraph.
It will work. (just learning HTML and CSS)
Math would be select2 * select3 with one exception in the case of [select2(option1 and option2) * select3 = samevalue)
With that aside can someone post a modular simplistic type of code that would Help.
For those who need to read some more:(copy&paste* - *Sorry for indentation)
document.getElementById("Confirm").onClick = function() {
var entry = ""
document.getElementById("Televizor").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Controllere").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Timp").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Table").innerHTML = "<br> " + entry + Date();
var entry = ""
}
<h2>TV-uri</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Date & Time.</button>
<p id="demo">Dunno</p>
<div class="container">
<select id="Televizoare">
<option value="0">Televizoare</option>
<option value="1">Tv 1</option>
<option value="2">Tv 2</option>
<option value="3">TV 3</option>
<option value="4">Tv 4</option>
<option value="5">TV 5</option>
<option value="6">Tv 6</option>
<option value="7">TV 7</option>
</select>
<select id="Controller">
<option value="0">Controllere</option>
<option value="1c">1 Controller</option>
<option value="2c">2 Controllere</option>
<option value="3c">3 Controllere</option>
<option value="4c">4 Controllere</option>
</select>
<select id="Timp">
<option value="0">Timp</option>
<option value="1h">1 ora</option>
<option value="1h2">1 ora 30 minute</option>
<option value="2h">2 ore</option>
<option value="2h2">2 ore 30 minute</option>
<option value="3h">3 ore</option>
</select>
<button id="Confirm" onclick="Confrim)">Confirm</button>
</div>
<p id="Table"></p>
Well, you could start off by making sure the spelling and capitalization of your IDs and function names match.
Also, you should create some form of a validation method to check if all the fields are valid before proceeding to the calculation method.
Not sure what you are multiplying, but if you can at least get the valuse from the form fields, that's half the battle.
You should also enclose all your fields within a form object so you can natively interact with the form in a traditional HTML fashion.
// Define the confirm clicke listener for the Confirm button.
function confirm() {
// Grab all the fields and apply them to a map.
var fields = {
'Televizoare' : document.getElementById('Televizoare'),
'Controllere' : document.getElementById('Controllere'),
'Timp' : document.getElementById('Timp')
};
// Determine if the user selected an option for all fields.
var isValid = doValidation(fields);
if (!isValid) {
document.getElementById("Table").innerHTML = 'Please provide all fields!';
return;
}
// Create listeners ???
fields["Televizoare"].onChange = function(e) { };
fields["Controllere"].onChange = function(e) { };
fields["Timp"].onChange = function(e) { };
// Set the value of the paragraph to the selected values.
document.getElementById("Table").innerHTML = Object.keys(fields)
.map(field => fields[field].value)
.join(' — ');
}
// Validation function to check if ALL fields have options selected other than 0.
function doValidation(fields) {
return [].every.call(Object.keys(fields), field => fields[field].selectedIndex !== 0);
}
<h2>TV-uri</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Date & Time.</button>
<p id="demo">Dunno</p>
<div class="container">
<select id="Televizoare">
<option value="0">Televizoare</option>
<option value="1">Tv 1</option>
<option value="2">Tv 2</option>
<option value="3">TV 3</option>
<option value="4">Tv 4</option>
<option value="5">TV 5</option>
<option value="6">Tv 6</option>
<option value="7">TV 7</option>
</select>
<select id="Controllere">
<option value="0">Controllere</option>
<option value="1c">1 Controllere</option>
<option value="2c">2 Controllere</option>
<option value="3c">3 Controllere</option>
<option value="4c">4 Controllere</option>
</select>
<select id="Timp">
<option value="0">Timp</option>
<option value="1h">1 ora</option>
<option value="1h2">1 ora 30 minute</option>
<option value="2h">2 ore</option>
<option value="2h2">2 ore 30 minute</option>
<option value="3h">3 ore</option>
</select>
<button id="Confirm" onclick="confirm()">Confirm</button>
</div>
<p id="Table"></p>
Once the user chooses which flavour they want, I want to be able to display a message on the webpage with the choices they have made from the drop-downs after the submit button is clicked. Here is what I have so far:
<select name="flavour1" required>
<option value="">Please select a Flavour!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<select name="flavour2" required>
<option value="">Please select a Flavour!</option>
<option value="noflavour">No More Flavours!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<input type="submit" value="Get your Flavour!!" onclick="getFlavour()">
JavaScript to attempt to display message into element with id: "postFlavour"
function getFlavour(){
var flavour1 = getElementById("flavour1").value;
var flavour2 = getElementById("flavour1").value;
document.getElementById("postFlavour").innerHTML = "Congratulations, here are your chosen flavours: "+flavour1+", "+flavour2;
}
function getFlavour(){
var sel1 = getElementById("flavour1");
var sel2 = getElementById("flavour2");
var flavour1 = sel1.options[sel1.selectedIndex];
var flavour2 = sel2.options[sel2.selectedIndex];
document.getElementById("postFlavour").innerHTML = "Congratulation, here are your chosen flavours: "+flavour1+", "+flavour2;
return false;
}