Search jQuery

jQuery Forum

get a value(text) from a span element to a input element ?

in Getting Started • 4 years ago

how to get an span element text to a input element and then grab the input element value and display it as a list below? From the code below, when I click the btnGET I would like to put the 8:00 pm into the <input id="txtTime" type="time" /> and then again get the new value of txtTime and display it as a list below when btnSET is clicked ..I am doing this to check how the type time will change the type of user input...Same is the case with EMAIL span as well.. Thank you in advance..

Ex:

<div>

<span>

</div>

<div>

<div><span>Email: </span><span>abc@gmail.com</span></div>

<span>

</div>

<div>

<span>

</span>

<span>

</div>

Replies(6)

watusiware

Re: get a value(text) from a span element to a input element ?

4 years ago

First, I suggest you add IDs to your <span>s to make them easier to find. Otherwise, you have to depend on HTML structure for selection, and it will be fragile if you change anything on the page.

I don't know what you mean by "display in a list below". A single value does not make a list. Do you want to append to a list each time you push the button? You have no list below. So, for the second button I sent it to console.log(). This probably suits your purpose of experimenting better, anyway. Look at the console output in your desktop browser's inspection and debug tools.

$(function() {

$('#btnGET').click(function() {

$('#txtTime').val($('#spanTime').text());

});

$('#btnSet').click(function() {

console.log($('#txtTime').val());

});

If you learn to use the inspection and debug features present in every desktop browser, you can easily explore by typing into the console, rather than writing code in a page for experiments.

You should visit the jQuery Learning Center to learn about selection and node manipulation:

https://learn.jquery.com/using-jquery-core/selecting-elements/

https://learn.jquery.com/using-jquery-core/working-with-selections/

https://learn.jquery.com/using-jquery-core/manipulating-elements/

raviojo

Re: get a value(text) from a span element to a input element ?

4 years ago

Thank you watusiware..but the code is not working in Firefox.

watusiware

Re: get a value(text) from a span element to a input element ?

4 years ago

We can't guess what "not working" means!

raviojo

Re: get a value(text) from a span element to a input element ?

4 years ago

I am sorry. this happens only in firefox and chrome.

$('#btnGET').click(function() {

$('#txtTime').val($('#spanTime').text());

});

This does not set the value to the input : <input id="txtTime" type="time" />

Thank You

watusiware

Re: get a value(text) from a span element to a input element ?

4 years ago

There was an error in my code. I left out a quotation mark. I corrected it above.

I made a jsFiddle for you. In the future, you should make your own jsFiddle. It will make it easier for us to help you.

https://jsfiddle.net/3afx7hmr/2/

I had to change the value in your span. Time inputs store values in a uniform fashion. If you use code to set the value, you have to conform to the uniform formatting. The DISPLAYED and ACCEPTED (from user input) values will differ. (And will differ depending on locale. (Most of the rest of the world think we are daft about AM/PM!)

Look at the error message in the console when you press the GET button. Chrome told me (with your original span content):

The specified value "8:00 pm" does not conform to the required format. The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.

Chrome has better debugging tools. But it "works" in Firefox as well. Firefox isn't as helpful with error messages on the console. Firefox doesn't give a helpful message in the console when the format is not correct.

Always look at the Javascript console output! It would have told you that there was a syntax error in my suggested code. And use Chrome for debugging. It has the best debugging.

watusiware

Re: get a value(text) from a span element to a input element ?

4 years ago

I am sorry. this happens only in firefox and chrome.

You didn't say which browsers it DOES work in.

If it "works" (with the original, incorrectly-formatted time value in the span) it is likely because you used an older browser that does not support HTML5 input types, time, email, etc.

Top Reply

Response title

Attachments

jQuery Forum

get a value(text) from a span element to a input element ?

Replies(6)

Re: get a value(text) from a span element to a input element ?

Re: get a value(text) from a span element to a input element ?

Re: get a value(text) from a span element to a input element ?

Re: get a value(text) from a span element to a input element ?

Re: get a value(text) from a span element to a input element ?

Re: get a value(text) from a span element to a input element ?

Statistics

Tags

Actions