javascript get datepicker start or end value of attribute - javascript

<div class="input-daterange input-group" id="datepicker'">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
I know the method goes something like this:
datestart = $("#datepicker").find("input").val();
However this returns 2 different value (Only showing the first one regardless what I do), how do I go about getting just the start or the end of the value?
I was trying something like this:
datestart = $("#datepicker2").find("input").attributes['name'=start].val();
Obviously that doesn't work... Can anyone shine some light on this issue?

You almost got it right:
datestart = $("#datepicker").find("input[name='start']").val();
dateend = $("#datepicker").find("input[name='end']").val();
or better yet:
datestart = $("#datepicker input[name='start']").val();

you can write the following to get the first value
$("input[name=start]").val();
to get the second value use
$("input[name=end]").val();

Related

javascript - show number in UI side without exponential

I have a data which returns 0.00000000090 from api but in UI side it looks like '9e-10'
I want to show data as 0.00000000090.
My input field is as follows:
<input type="number"
ng-model="model.data"
name="name"
id="id"
min="0"
max="10"
required>
I can do this with javascript like this:
let a = 0.00000000090
a.toFixed(11)
Output -> '0.00000000090'
but after toFixed it shows as 0 because value is string now and my input type must be number.
Can I solve this with html? or any suggestions other than toFixed()?
It seems to be working fine in my example. I've added a step to be 0.000something1 so you could also click the little arrow. Also made an attempt of keeping the display in the decimal format.
number = 0.00000000090
id.value = number.toFixed(11)
id.addEventListener('change', function(ev) {
this.value = (+this.value).toFixed(11)
})
<input type="number" style="width:200px" id="id" min="0" max="10" step="0.00000000001" required>

ES6 push and bind to an array

Please pardon my newbie verbiage here while I attempt to explain my problem (also I did search and came up with nothing, I'd also like to use ES6, not jQuery)
I'm trying to have a text input that when entered it's pushed into an empty array. When more input is entered in, I would like to have that bound to the array as well.
So I have it working, kinda. I can get one thing in the array but I can't seem to anything else to go in there. Here's what I have so far:
My html:
<input type="text" class="theplayer pre" name="Player" id="bind" placeholder="Enter Names" onclick='javascript: this.value = ""' />
My JS:
let namesOfPlayers = [];
const currentValue = document.getElementById("bind").value;
namesOfPlayers.push(currentValue);
//I don't know how to add in another text/value here
console.log('namesOfPlayers', namesOfPlayers);
I don't know if I'm supposed to be doing a for each here or if there's a way to bind another value into the array.
Thanks and much appreciated for letting me try to clumsily explain this.
You can include <input type="button"> element as sibling of <input type="text"> element. At click on <input type="button"> .push() .value of <input type="text"> to array
<input type="text"
class="theplayer pre"
name="Player"
id="bind"
placeholder="Enter Names" />
<input type="button" value="click" />
<script>
let namesOfPlayers = [];
let input = document.getElementById("bind");
let button = input.nextElementSibling;
button.addEventListener("click", function() {
namesOfPlayers.push(input.value);
console.log(namesOfPlayers);
});
</script>

Bootsrap-Datepicker not able to get date?

I'm using the following jQuery Datepicker and when I try to use JS to get the values I'm either getting "undefined" or "[object Object]".
I'm automatically setting a value to the datepicker and when viewing the page I can see a value.
Here is the code I have. I've tried it with the id being on the wrapping around the as well as the id on the actual but got the same results.
<div class="col-md-2 text-left">
<div class="input-group date">
<input id="startDatepicker" class="datepicker form-control" type="text" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
Here is the JavaScript I've tried base on the suggestions I've seen in my research.
var start = $('#startdate').datepicker("getDate");
//var start = $('#startdate').data('datepicker').date;
//var start = $('#startdate').val();
//var start = $('#startdate').data('datepicker').date;
alert(start);
I'ts probably because your input is empty.
check this out(JSFiddle) :
<input id="startDatepicker" class="datepicker form-control" type="text" value="05/09/2016" />
and
$('#startDatepicker').datepicker();
$('#getdate').on('click', function() {
var st = $('#startDatepicker').datepicker('getDate');
alert(st)
console.log(st);
});

Cannot read property 'toLowerCase' of undefined - jQuery

I've read the other examples where toLowerCase is undefined but I still don't understand. Can anyone explain why my function won't work?
var changeTitle = function() {
var loanTitle = $(this).val();
$(this).prev().text(loanTitle);
};
<h2>Loan One</h2>
<input type="text" onkeypress="changeTitle()" maxlength="25" />
In your function, the this object refers to the window and not the input field. Update your onkeypress code to the following:
<input type="text" name="loanName" onkeypress="changeTitle.call(this)" class="loanNameV1 qForms" maxlength="25" placeholder="Loan Name" />
I'm not sure what you really are trying to do, but I passed your input element as a parameter to the function you defined as this and I added the JQuery library to my snippet. It works with the exception that the last key stroked isn't displayed in the title. Maybe you can use this along with your toLowerCase feature and fix it up to your liking.
var changeTitle = function(obj) {
var loanTitle = $(obj).val();
$(obj).prev().text(loanTitle);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2 class="nameLoan1"> Loan One </h2>
<input type="text" onkeypress="changeTitle(this);" maxlength="25" placeholder="Loan Name" />

How do I use jQuery to change a field when another field value has changed

I searched and even with answers like JQuery: Change value when value of other input field is changed, I have been unable to figure this out.
I am trying to do some math based on HTML form input. When the user enters numbers in the first and second field, I want it to automatically calculate into the third field to show the total.
My form code is:
<div id="makingARecurringGift">
Enter Recurring Gift Amount: $<input type="number" min="0" name="recurringDonationValue" id="recurringDonationValue" size="15" value="0" /><br />
I would like to make this gift for <input type="number" min="0" max="60" name="numberOfMonths" id="numberOfMonths" size="15" value="0" /> months.<br />
Total Gift Amount of $<input type="number" min="0" value="0" name="totalRecurringDonationValue" />.
</div>
My javascript that I am trying to run is:
function replaceRecurringDonationValue() {
//make our variables so we don't forget
var perDonationValue = 0;
var numberOfMonths = 0;
var TotalRecurringDonationValue = 0;
//give them their correct values
perDonationValue = $("#recurringDonationValue").val();
numberOfMonths = $("#numberOfMonths").val();
//ensure that the maximum number of months is enforced.
if(numberOfMonths > 60) {
alert("Donations can last for a maximum of 60 months.");
$("#numberOfMonths").val(60);
}
TotalRecurringDonationValue = perDonationValue * numberOfMonths;
$("#TotalRecurringDonationValue").val(TotalRecurringDonationValue);
}
$("#recurringDonationValue").change(replaceRecurringDonationValue());
$("#numberOfMonths").change(replaceRecurringDonationValue());
If you would like to view the full main page source code:
http://pastebin.com/aLMqYuxc
and full javascript source is:
http://pastebin.com/FvviPHhj
Sorry if this is a dumb question, thank you all for your assistance. I'm still trying to figure this out.
try changing this:
$("#recurringDonationValue").change(replaceRecurringDonationValue());
to this:
$("#recurringDonationValue").change(function(){
replaceRecurringDonationValue();
});
and this:
$("#numberOfMonths").change(replaceRecurringDonationValue());
to this:
$("#numberOfMonths").change(function(){
replaceRecurringDonationValue()
});
Good shout by Anders,
Even better Combine the two selectors e.g.
$("#recurringDonationValue, #numberOfMonths").change(function(){
replaceRecurringDonationValue();
});
Less Code keep it DRY (Don't Repeat Yourself) :)
Three things...
Change this:
Total Gift Amount of $<input type="number" min="0" value="0" name="totalRecurringDonationValue" />.
To this:
Total Gift Amount of $<input type="number" min="0" value="0" id="totalRecurringDonationValue" />.
Change this:
$("#TotalRecurringDonationValue").val(TotalRecurringDonationValue);
To this:
$("#totalRecurringDonationValue").val(TotalRecurringDonationValue);
And lastly, change this:
$("#recurringDonationValue").change(replaceRecurringDonationValue());
$("#numberOfMonths").change(replaceRecurringDonationValue());
To this:
$("#recurringDonationValue,#numberOfMonths").change(replaceRecurringDonationValue);

Categories

Resources