I'm trying to change the values of some input fields only once upon page being loaded. For example submit_date_year should be current year, so 2017 right now.
My HTML
<template name="trip_html">
<table class="table table-striped table-condensed table-hover rsk-tbl vScrollTHead">
<tr>
<td><input class="form-control input-lg" name="submit_date_day" type="text" placeholder="Day"/> </td>
<td><input class="form-control input-lg" name="submit_date_month" type="text" placeholder="Month"/> </td>
<td><input class="form-control input-lg" name="submit_date_year" type="text" placeholder="Year"/> </td>
</tr>
</table>
</template>
My JS
On page load function
Template.trip_html.rendered = function(event, template) {
event.target.submit_date_year.value = 'test'; // DOES NOT WORK
console.log('Template onLoad');
};
However, I cannot use event.target.submit_date_year in that on load function, for some reason...
But it works in events, once I click 'submit' button
Template.trip_html.events({
"submit .add-trip": function(event){
event.preventDefault();
var day = event.target.submit_date_day.value;
var month = event.target.submit_date_month.value;
var year = event.target.submit_date_year.value;
var car = event.target.submit_car.value;
var b = event.target.submit_b.value;
var a = event.target.submit_a.value;
var dist = event.target.submit_dist.value;
if(empty(day) || empty(month) || empty(year) || empty(car) || empty(b) || empty(a) || empty(dist)){
return false;
}
if(!isNumeric(day) || !isNumeric(month) || !isNumeric(year) || !isNumeric(dist)){
return false;
}
if(day.startsWith("0"))
day = day.replace("0", "");
if(month.startsWith("0"))
month = month.replace("0", "");
if(year.startsWith("0"))
year = year.replace("0", "");
console.log(day, month, year, car, a, b, dist);
Meteor.call('addTrip', day, month, year, car, a, b, dist);
event.target.submit_a.value = event.target.submit_b.value;
event.target.submit_b.value = '';
event.target.submit_dist.value = '';
},
Help please!
It does not work because you are passing an event parameter in the onRendered Callback. Therefore, you can't select the DOM element via event.target.
try to give the element a certain class in the markup and replace the line event.target.submit_date_year.value = 'test'; // DOES NOT WORK
with something like:
$('.year-input').val() = 'test';
The html line:
<td><input class="form-control input-lg year-input" name="submit_date_year" type="text" placeholder="Year"/></td>
You can delete the 'event' parameter from the rendered callback now.
Hope, I could help.
The reason it isn't working is because you aren't using the onRendered function properly. You are also trying to access the input using an event object which doesn't exist because there is no event.
Try:
Template.trip_html.onRendered(function () {
$('input[name="submit_date_year"]').val('2017');
});
EDIT
You can just use HTML to achieve this too if you don't need the data to be dynamic.
<input class="form-control input-lg" name="submit_date_year" type="text" placeholder="Year" value="2017"/>
Related
In a view, I have a date that the user must enter.
What I want is that the other dates are automatically filled in with +2 years for one and +5 years for another.
Thank you for your help.
html
<input type="date" th:field="*{date_fabrication}" class="form-control
col-xs-3 col" id="fabId"
th:onblur="majdates()"
th:errorclass="invalid"
th:placeholder="#{fabricationEquipment}"
style="width: 200px;font-size:12px;"
required>
function
<script>
function majdates() {
var recupDate = document.getElementById("fabId").value;
var plusTwoYears = recupDate.setFullYear(date.getFullYear() + 2);
document.getElementById("commissioningId").value = plusTwoYears;
}
</script>
edit : the target date :
<input type="date" th:field="*{date_mise_en_service}" class="form-control col"
id="commissioningId"
th:errorclass="invalid"
th:placeholder="#{commissioningEquipment}"
style="width: 200px;font-size:12px;">
thanks to Rory, the solution below
<script>
document.querySelector('#fabId').addEventListener('blur', e => {
var recupDate = new Date(e.target.value);
var plusTwoYears = new
Date(recupDate.setFullYear(recupDate.getFullYear() + 2));
var formatedPlusTowYears =plusTwoYears.toISOString().slice(0,10);
document.querySelector("#commissioningId").value = formatedPlusTowYears;
document.querySelector("#volumeId").value = formatedPlusTowYears;
});
</script>
Your code is almost there. The main issue is that recupDate will be a string. You need to parse it to a Date object in order to call setFullYear on it.
Also note that the result of setFullYear() will be an epoch timestamp, not a date, so you'll again need to parse the response of that to a Date object - and possibly format it manually depending on the output required.
document.querySelector('#fabId').addEventListener('blur', e => {
var recupDate = new Date(e.target.value);
var plusTwoYears = new Date(recupDate.setFullYear(recupDate.getFullYear() + 2));
document.querySelector("#commissioningId").value = plusTwoYears;
});
input {
width: 200px;
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" class="form-control col-xs-3 col" id="fabId" required />
<input type="text" readonly id="commissioningId" />
Finally, I also changed the logic to use an unobtrusive event handler instead of the onblur attribute, as the latter are no longer good practice.
I have a form row with 26 inputs on it, some text some select boxes. I have a button that clones the top row, adds an increment to the row number. However i'm struggling to work out how to increment the name and ID of the cloned field elements.
Form:
<tr id="CmasterRow" class="DB1_ROW">
<td><span id="cnumber"> <input type="text" size="2" readonly class="form-control" id="DB1[0][A]" name="DB1[0][A]" data-circuitNumber="0" data-EN="0" value="0"></span></td>
<td>
<div class="input-group">
<input type="text" class="form-control" id="DB1[0][B]" name="DB1[0][B]" data-EN="1">
</div>
</td>
<td>
<div class="input-group">
<input type="text" class="form-control" id="DB1[0][C]" size="2" name="DB1[0][C]" data-EN="2">
</div>
</td>
<td>
<input type="text" class="form-control" id="DB1[0][D]" size="4" name="DB1[0][D]" data-EN="3">
</td>
<td>
<div class="input-group">
<input type="text" class="form-control" id="DB1[0][E]" size="3" name="DB1[0][E]" data-EN="4">
</div>
</td>
<!-- ... etc ... etc ... -->
</tr>
Here's the javascript I have at the moment (the working on that clones the row)
var template = $('#CmasterRow'),
$("#addrow").click(function () {
var row = template.clone();
var n = $("[data-circuitNumber]").length;
row.find('input').val('');
row.find('[data-circuitNumber]').val(n);
row.find('input').attr('name').replace(/\[([0-9]+)\]/g,"[" + n + "]");
row.find('input').attr('id').replace(/\[([0-9]+)\]/g,"[" + n + "]");
row.insertBefore($('#disBoard tbody>tr:last').eq(-1));
// saveData(); - own function not needed for this issue.
return false;
/* Version 1 simple row clone
var row = $('#disBoard tbody>tr:first').clone(true);
var n = $("[data-circuitNumber]").length;
row.find('input').val('');
row.find('[data-circuitNumber]').val(n);
row.insertBefore($('#disBoard tbody>tr:last').eq(-1));
saveData();
return false;
*/
});
I 'think' I'm on the right lines with using the .find and the .replace and the regex. I am just a little stuck of getting it to work. I did get it working (of sorts) with a single form element however that java script has been chopped and changed with the above or i would have included that workings in this post.
Thanks for any help :)
To update an attribute for a node use:
var newValue = 'whatever'
row.find('selector').attr('your attribute', newValue);
Your code takes a value of an attribute, applies regex and then does nothing.
Javascript .replace does not replace anything in the original string and returns a new string with replaced values.
row.find('input').attr('name').replace(/\[([0-9]+)\]/g,"[" + n + "]");
row.find('input').attr('id').replace(/\[([0-9]+)\]/g,"[" + n + "]");
So the above lines basically return new values for id and name. you need to take those values and apply them as suggested by Eriks.
var newId=row.find('input').attr('name').replace(/\[([0-9]+)\]/g,"[" + n + "]");
var newName=row.find('input').attr('id').replace(/\[([0-9]+)\]/g,"[" + n + "]");
row.find('input').attr('id',newId);
row.find('input').attr('name',newName);
row.find('input').attr('id', function (i, val) {
val = val.replace(/\[([0-9]+)\]/g, "[" + n + "]");
return val
});
row.find('input').attr('name', function (i, val) {
val = val.replace(/\[([0-9]+)\]/g, "[" + n + "]");
return val
});
Thanks both for your help, I understand now where i was going wrong. I have completed the task by taking your input and developing the above code
I am copying the value of an input of type datetime-local (date_start) to another once the user writes in the first one (date_end). However I would like to be able to add 20 minutes more to the result in the second input (date_end) How could I do it?The format is example 10/20/2017 15:00
$("#date_start").keyup(function(){
var value = $(this).val();
$("#date_end").val(value);
});
The normal JQuery selector does not seem to work with this element, so I have used document.querySelector() instead of $(), So please find below my solution, this implements the stepUp() method of the DatetimeLocal object which will increment the value by minutes. Also please note I am adding the click event also in addition to keyup, since it seems necessary for this input element.
var start=document.querySelector('input[type="datetime-local"]#date_start'), end = document.querySelector('input[type="datetime-local"]#date_end')
start.value = start.value;
end.stepUp(20);
$("#date_start").on("click keyup", function(){
end.value = start.value;
end.stepUp(20);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="datetime-local" class="form-control" id="date_start" name="date_start" value="2017-06-01T08:30">
<input type="datetime-local" class="form-control" id="date_end" name="date_end" >
The Javascript equivalent for this will be.
var end = document.querySelector('input[type="datetime-local"]#date_end'), start = document.querySelector('input[type="datetime-local"]#date_start');
end.value = start.value;
end.stepUp(20);
start.addEventListener("click", addMinutes);
start.addEventListener("keyup", addMinutes);
var addMinutes = function(){
end.value = start.value;
end.stepUp(20);
};
<input type="datetime-local" class="form-control" id="date_start" name="date_start" value="2017-06-01T08:30">
<input type="datetime-local" class="form-control" id="date_end" name="date_end" >
try this
$( document ).ready(function() {
DateObj = Date.parse("10/20/2017 16:00");
// vale you get $("#date_end").val(value);
var date = new Date(DateObj+1200000);
console.log(date.toLocaleString('en-US',{ hour12: false }));
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
I am trying to pass the date values that I get back from the datepicker plugin but the values are not showing up in the console.log() which means that they are not being sent. I am thinking that my problem is at
var $fel = $el.parent('tr:second').find('.datepicker');
var datepicker = $fel.text();
which gives me this error:
Uncaught Error: Syntax error, unrecognized expression: unsupported
pseudo: second
my first <tr> tag has:
<tr class="main">
<td class="main_tr" data-id1="<?php $row["id"];?>" data-parentId="main"><?php $row["id"];?></td>
<input type="hidden" name="name" id="name" class="name" value="<?php $row["name"];?>">
<td><button id="find" data-id2="<?php $row["id"];?>">find</button></td>
</tr>
second <tr> tag
<tr>
<td>Date Begin: <input type="text" class="datepicker" data-parentId="main" id="datepicker" name="datepicker">
Date End: <input type="text" class="datepicker2" data-parentId="main" id="datepicker2" name="datepicker2"></td>
</tr>
this is my javascript:
$(document).on('click', '#find', function(){
//var id = $(this).data("id2");
var $el = $(this);
var id = $el.data("id2");
var $fel = $el.parent('tr:second').find('.datepicker');
var datepicker = $fel.text();
var $fel2 = $el.parent('tr:second').find('.datepicker2');
var datepicker2 = $fel2.text();
$.ajax({
url:"select_.php",
method:"POST",
data:{
id:id,
datepicker:datepicker,
datepicker2:datepicker2
},
dataType:"text",
success:function(data){
$('#live_view1').html(data);
$('#live_view2').html(data);
console.log(id);
console.log(datepicker);
console.log(datepicker2);
}
})
});
You can do it with :eq(i) pseudo, here you have to pass index started from ZERO.
var $fel = $el.parent().parent().('tr:eq(1) .datepicker');
var datepicker = $fel.text();
for more detail check here
You have mutliple possitibilites:
CSS: First you can find all children witth the type of tr and there you can select the second on:
$('#parent_element_id').find('tr:nth-child(2)');
JQuery: Or you just grab all children as list, do not matter what type they are, and then just select the second one (counting from 0):
$('#parent_element_id').children().eq(1);
I want to filter a list of elements by regex (user will type a regex in the input search field) using AngularJS filter.
I wrote everything that seemed to be necessary for me, but I can't manage to make the regex work correctly.
Here is what I've done so far:
View.html
<div ng-controller="listCtrl">
<input type="text" placeholder="search by any" ng-model="search.$">
<input type="text" placeholder="search by fist name" ng-model="search.fname">
<input type="text" placeholder="search by last name" ng-model="search.lname" >
<input type="text" placeholder="search by tel" ng-model="search.tel" >
<input type="text" placeholder="search by date" ng-model="search.date">
<table>
<tr ng-repeat="user in users|regex : search as res">
<td>{{user.fname}}</td>
<td>{{user.lname.toUpperCase()}}</td>
<td>{{user.tel}}</td>
<td>{{user.date | date: 'EEE'}}</td>
</tr>
<tr ng-if="res.length < 1">
<td>No elements found...</td>
</t>
</table>
</div>
app.js
...
app.filter('regex', function() {
return function(input, property) {
var patt;
var field;
var out = [];
if(input === undefined || property === undefined) {
return out;
}
angular.forEach(property, function(key, value) {
patt = new RegExp(key);
field = value;
});
for (var i = 0; i < input.length; i++){
if(patt.test(input[i][eval(field)]))
out.push(input[i]);
}
return out;
};
});
...
The listCtrl will just add some elements to $scope.
What is wrong here?
You should just be able to call a function as part of your ng-repeat filter expression, ie.
then in your controller you'd have something like:
function textRegEx(row) {
var regex = new RegExp("row");
return regex.test(row)
}
This is for the entire row. You'd have to adapt it to work on just one of the fields. I posted a codepen earlier today here: http://codepen.io/anon/pen/yOjdJV?editors=1010 with a dropdown for selecting the field you could adapt. Obviously if you're enabling searching on multiple fields you could concatenate the calls to regex.test into a single line.