Copy the date text to textfield using javascript - javascript

I want to copy the date text to textfield. when i click the button to copy, the result in textfield is undefined. Can someone help me about this problem?
function ShowHideDiv() {
var date1 = document.getElementById("datetime");
var text1 = document.getElementById("textfield1");
text1.value = date1.value;
}
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toISOString().substr(0, 10);
<p name="datetime" id="datetime" style="position:absolute;margin-top:80px;font-weight:bold"><span id="datetime" name="datetime" id="date_now"></span></p>
<input type="text" id="textfield1" name="textfield1">
<input type="submit" onclick="ShowHideDiv()" value="copy">

You are setting the date as innerHTML of the paragraph tag. So, instead of date1.value use date1.innerHTML. Check the working snippet:
function ShowHideDiv() {
var date1 = document.getElementById("datetime");
var text1 = document.getElementById("textfield1");
text1.value = date1.innerHTML;
}
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toISOString().substr(0, 10);
<p name="datetime" id="datetime" style="position:absolute;margin-top:80px;font-weight:bold"><span id="datetime" name="datetime" id="date_now"></span></p>
<input type="text" id="textfield1" name="textfield1">
<input type="submit" onclick="ShowHideDiv()" value="copy">

You need to use innerHTML which will provide the inner content of selected element by id.
function ShowHideDiv() {
var date1 = document.getElementById("datetime");
var text1 = document.getElementById("textfield1");
text1.value = date1.innerHTML;
}
var dt = new Date();document.getElementById("datetime").innerHTML = dt.toISOString().substr(0, 10);
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
Also you need to use button instead of using input with type submit, since you are not submitting the data. This approach will be more fast and better.
<button type="button" onclick="ShowHideDiv()" >Copy</button>

Related

JavaScript How to let user type variable in text box solve equation?

I am creating a simple equation solver that involves division. I have two text boxes, One for "Mass" and one for "Element". I want to create a variable "H" and set it equal to 1, that way when the user types in "2" in the mass box and "H" in the element box, the output will say "1".
Here is my HTML
<div id="GramsToMolesContainer"><div id="GramMolesText">
<font size=3>Grams To Moles</font></div>
<form>
Grams : <input type="text" id="GramsChoice" /><br>
Element : <input type="text" id="ElementChoice" /><br>
<input type="button" onClick="GramstoMoles()" Value="Convert" />
</form>
<p>Molar Mass : <br>
<span id = "resultMolarMass"></span>
</p>
</div>
Here is my Javascript:
function GramstoMoles()
{
var H = 1;
GramsState = document.getElementById("GramsChoice").value;
ElementState =
document.getElementById("ElementChoice").value;
document.getElementById("resultMolarMass").innerHTML
= GramsState / ElementState;
}
you will need to create a dictionary.
this is how your function should look. every time that you want to add an element - create a new key-value pair.
function GramstoMoles()
{
var elements = {h:1, he:2};
GramsState = document.getElementById("GramsChoice").value;
ElementState =
document.getElementById("ElementChoice").value;
document.getElementById("resultMolarMass").innerHTML
= parseInt(GramsState) / elements[ElementState];
}
Check this working snippet of your code!
If you wan to set H as an inital value of some box, do
var ElementState = document.getElementById("ElementChoice").value = H; before you call the function.
function GramstoMoles (){
var H = 1;
var GramsState = document.getElementById("GramsChoice").value;
var ElementState = document.getElementById("ElementChoice").value;
document.getElementById("resultMolarMass").innerHTML = GramsState / ElementState;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="GramsToMolesContainer"><div id="GramMolesText">
<font size=3>Grams To Moles</font></div>
<form>
Grams : <input type="text" id="GramsChoice" /><br>
Element : <input type="text" id="ElementChoice" /><br>
<input type="button" onClick="GramstoMoles()" Value="Convert" />
</form>
<p>Molar Mass : <br>
<span id = "resultMolarMass"></span>
</p>
</div>
When you get the var element and var grams ,
var elements = ['H','He','Li','Be',...];
var atomicmasses = [1,4,6,9,.....];
var molarmass = molarmasses[elements.indexOf(element)];
var mole = grams/molarmass;

How convert input type="date" in a timestamp?

I need to convert an <input type="date"> value in a timestamp. This is my HTML code:
<input type="date" name="date_end" id="date_end">
This field has a value that I have put like 25/10/2017
My jQuery code is:
var dataEnd = $('[name="date_end"]').val();
if (!dataEnd) {
return false;
} else {
var timestamp_end=$('[name="date_start"]').val().getTime();
console.log("TIMESTAMP END "+timestamp_end);
.....
}
But this is not working... why not?
make a new Date() passing the value of your input as parameter, then call getTime(). here an example:
$('[name="date_end"]').on('change',function() {
var dataEnd = $(this).val();
console.log((new Date(dataEnd)).getTime());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" name="date_end" id="date_end">
do this
var dateEnd = $('#date_end').val()
var var timestamp_end = Date.parse(date_end)
or
in a single line
var timestamp_end = Date.parse($('#date_end').val())
it works and it's clean
Here is a Solution ( Using pure js ) , I used the unary plus operator operator after converting the value into javascript date object.
function checkDateValue(){
var dateConvertedToTimestamp = (+new Date(document.getElementById('date_value').value));
document.getElementById('date_value_timestamp').innerHTML = dateConvertedToTimestamp ;
}
<input type='date' id='date_value'>
<button onClick='checkDateValue()'> Submit </button>
<div>Timestamp:- <span id='date_value_timestamp'></span></div>
I needed an UNIX timestamp and updated Partha Roy's anwser for my needs.
Javascript :
document.getElementById('dateInput').addEventListener('change', function (){
let inputDate = document.getElementById('dateInput').value ;
let dateConvertedToTimestamp = new Date(inputDate).getTime() ;
console.log(dateConvertedToTimestamp) ;
document.getElementById('resultTime').value = dateConvertedToTimestamp / 1000 ;
}) ;
The /1000 division convert to UNIX timestamp + I track all input change and not only when the form is submited.
HTML :
<input type='date' id='dateInput'>
<input type='hidden' id='resultTime' name='dateTimestamp'>
Don't forget date input are still not well supported, so we can easily adapt this code with classic numbers input.
You can use following code
<script type="text/javascript">
var d = new Date(parseInt($('[name="date_start"]').val()));
var n = d.getTime();
console.log(n);
</script>

Jquery: How to show date with textbox value?

I am newbie in jquery and i wrote below code
<h1>Type your comment below </h1>
<h2>TextBox value : <label id="msg"></label>-<label id="date"></label></h2>
<div style="padding:16px;">
TextBox : <input type="text" value="" placeholder="Type Your Comment"></input>
</div>
<button id="Get">Get TextBox Value</button>
var fullDate = new Date();
$("button").click(function(){
$('#msg').html($('input:text').val());
});
How to display the Date when submit button press for the label have id="date"?
When user press submit button i want to display
"User entered Textbox Value - Date with time"
Just use proper css selectors to add the messages and date. Refer code below :
$("button").click(function() {
var msg = $('input:text').val();
var fullDate = new Date();
$('#msg').html(msg);
$('#date').html(toLocal(fullDate));
});
function toJSONLocal (date) {
var local = new Date(date);
local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
return local.toJSON().slice(0, 10);
}
function toLocal (date) {
var local = new Date(date);
local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
return local.toJSON().replace('T', ' ').slice(0, 19);
}
Note: toJSONLocal, toLocal is used to format date.
jsfiddle : https://jsfiddle.net/nikdtu/q8zmLebz/
Just use this :
var fullDate = new Date();
$('#date').text(fullDate);
$(function() {
$("#Get").click(function() {
var fullDate = new Date();
$('#date').text(fullDate);
$('#msg').text($('#comment').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Type your comment below </h1>
<h2>TextBox value : <label id="msg"></label>-<label id="date"></label></h2>
<div style="padding:16px;">
TextBox :
<input type="text" value="" placeholder="Type Your Comment" id="comment" />
</div>
<button id="Get">Get TextBox Value</button>

Calculate number based on user input

I'm currently using the following solution to generate a number based on user input into two form fields http://jsfiddle.net/A3qat/5/
$("#download, #contention").keyup( function(){
var n1 = $("#download").val();
var n2 = $("#contention").val();
var result = n1/n2;
$("#label").text(result);
});
So, n1/n2 = n3
How can I modify this to show the output (n3) in a separate input form field underneath rather than plain text
Fiddle: http://jsfiddle.net/A3qat/49/
You should use .val()
$("#field1, #field2").keyup( function(){
var n1 = $("#field1").val();
var n2 = $("#field2").val();
var result = n2/n1;
$("#label").val(result);
});
Replace your label with input and replace $("#label").text(result); with $("#label").val(result);
<input type="number" id="field1">
<input type="number" id="field2">
<input id="result"></input>
<script>
$("#download, #contention").keyup( function(){
var n1 = $("#download").val();
var n2 = $("#contention").val();
var result = n1/n2;
$("#result").val(result);
});
</script>
DEMO:
http://jsfiddle.net/A3qat/51/
If you textbox, then you can get the value of the textbox or you can set the value of the textbox using .val()
On your
HTML
<input type="number" id="field1">
<input type="number" id="field2">
<span><input type="text" id="label" ></span>
JS
$("#field1, #field2").keyup( function(){
var n1 = $("#field1").val();
var n2 = $("#field2").val();
var result = n2/n1;
$("#label").val(result);
});

trouble with a currency converter in javascript

Im having trouble with this javascript. here is a n example
window.onload = initPage;
var euro;
var convert;
function initPage()
{
document.getElementById("convertButton").onclick = calcAnswer();
document.getElementById("conversionType").onchange = calcAnswer();
}
function calcAnswer()
{
//alert(document.getElementById("conversionType").value);
var value1 = document.getElementById("amount").value;
var conversionType = document.getElementById("conversionType").value;
//alert(conversionType);
if(var value = document.getElementById("conversionType").value=="polish");
document.getElementById("answer").value=(value1-32)/9*5;
else
document.getElementById("answer").value=value1*9/5+32;
}
here is the html
<h1>Currency Converter</h1>
<form name="convert">
Choose which currency you would like to convert to the Euro:
<select id="conversionType">
<option value="polish">Polish Zloty</option>
<option value="ukraine">Ukraine Hryvnia</option>
</select>
</br>
</br>
<hr>
Amount:<input id="amount" type="text" />
<input id="convertButton" type="button" value="Convert->"/>
To:
<input id="answer" type="text" name="answer" readonly="readonly"/>
</form>
im using an old temperature converter and havent changed that part part but even that part is not working.
For starters, these two lines are wrong:
document.getElementById("convertButton").onclick = calcAnswer();
document.getElementById("conversionType").onchange = calcAnswer();
Change them to:
document.getElementById("convertButton").onclick = calcAnswer;
document.getElementById("conversionType").onchange = calcAnswer;
You want to assign a function reference to onclick and onchange, not actually call the function and assign the return value.
Then, fix the if statement in calcAnswer like this:
function calcAnswer()
{
var amount = document.getElementById("amount").value;
var conversionType = document.getElementById("conversionType").value;
var answerElement = document.getElementById("answer");
//alert(conversionType);
if(conversionType == "polish") {
answerElement.value = (amount-32)/9*5;
} else {
answerElement.value = amount*9/5+32;
}
}
Should be
document.getElementById("convertButton").onclick = calcAnswer;
document.getElementById("conversionType").onchange = calcAnswer;
(without the parens)
You just need to reference the function, not execute it.

Categories