How set the value of an input element?

Question

This script counts the days between two dates and shows the result on a span element:

<span id="result"></span>

But instead I want to show the result as value of an input element:

<input name="name" type="text" id="name" value="i want count days here " />

How can I do this?

This is the complete code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Datepicker - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            .ui-datepicker {font-size:11px;}
        </style>
        <script>
            $(function() {
                $( "#from" ).datepicker({
                    onSelect: calculate
                });
            });
            $(function() {
                $( "#to" ).datepicker({
                    onSelect: calculate
                });
            });
        </script>
    </head>
    <body>
        <form class="formwhite">
            <table>
                <tr><td>From:</td><td><input type="text" id="from" onKeyUp="calculate();" />&nbsp;</td></tr>
                <tr><td>To:</td><td><input type="text" id="to" onKeyUp="calculate();" /></td></tr>
            </table>
        </form>
        <span id="result"></span>
        <script>
            var calculate = function() {
                var from = document.getElementById("from").value;
                var fromdate = from.slice(3, 5);
                fromdate = parseInt(fromdate);
                var frommonth = from.slice(0, 2); 
                frommonth = parseInt(frommonth);
                var fromyear = from.slice(6, 10); 
                fromyear = parseInt(fromyear);
                var to = document.getElementById("to").value;
                var todate = to.slice(3, 5); 
                todate = parseInt(todate);
                var tomonth = to.slice(0, 2); 
                tomonth = parseInt(tomonth);
                var toyear = to.slice(6, 10); 
                toyear = parseInt(toyear);
                var oneDay = 24*60*60*1000;
                var firstDate = new Date(fromyear,frommonth,fromdate);
                var secondDate = new Date(toyear,tomonth,todate);

                var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
                if (diffDays)
                    document.getElementById("result").innerHTML=diffDays;
            }
        </script>
    </body>
</html>

@msalman if it isn't then it could be closed on the grounds of being too specific, the point is, the answer is out there if you bothered to look for it. — sg3s, Nov 11 '13 at 15:15
Incidentally, you don't seem to use jquery or jquery-ui in any of this, so I'm going to remove those tags. — Scott Mermelstein, Nov 11 '13 at 15:23
@Scott: `$(function() { $( "#from" ).datepicker({ ...` looks like jQuery. — Felix Kling, Nov 11 '13 at 15:31
I don't want to be *that* guy, but googling for [`jquery set input value`](https://www.google.com/#q=jquery+set+input+value) brings up the jQuery documentation as first hit: http://api.jquery.com/val/. I mean really, this is the *least* effort you can put into solving the problem yourself. Once you know that, adjusting the code is trivial, because you just have to change the part where you set the content of the `span`. You know where that is because you wrote the yourself, right? — Felix Kling, Nov 11 '13 at 15:33
@FelixKling Agreed and thanks. I was so focused on the script in the body that I missed that. — Scott Mermelstein, Nov 11 '13 at 15:33

score 1 · Accepted Answer · edited Nov 11 '13 at 15:41

1

So you're asking the question: "How do I get a value from one field and set it in another?" You want http://api.jquery.com/val/ :

$("#name").val($("#result").val());

$("#result").val() gets whatever value the element with id result has.

$("#name").val(value) sets the value of the element with id name

Or, simply add (or replace) the line

document.getElementById("name").value = diffDays;

in the same if block as where you have

document.getElementById("result").innerHTML = diffDays;

Here's your entire <script> block, with my one line added:

    <script>
        var calculate = function() {
            var from = document.getElementById("from").value;
            var fromdate = from.slice(3, 5);
            fromdate = parseInt(fromdate);
            var frommonth = from.slice(0, 2); 
            frommonth = parseInt(frommonth);
            var fromyear = from.slice(6, 10); 
            fromyear = parseInt(fromyear);
            var to = document.getElementById("to").value;
            var todate = to.slice(3, 5); 
            todate = parseInt(todate);
            var tomonth = to.slice(0, 2); 
            tomonth = parseInt(tomonth);
            var toyear = to.slice(6, 10); 
            toyear = parseInt(toyear);
            var oneDay = 24*60*60*1000;
            var firstDate = new Date(fromyear,frommonth,fromdate);
            var secondDate = new Date(toyear,tomonth,todate);

            var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
            if (diffDays) /* THE NEW STUFF IS RIGHT HERE*/ {
                document.getElementById("result").innerHTML=diffDays;
                document.getElementById("name").value=diffDays;
            } // THE NEW STUFF ENDS HERE
        }
    </script>

edited Nov 11 '13 at 15:41

Felix Kling

795,719
175
1,089
1,143

answered Nov 11 '13 at 15:14

Scott Mermelstein

15,174
4
48
76

where can i put this code in to my code? – msalman Nov 11 '13 at 15:15
@msalman You set the result 5 lines from the bottom. You can also set the name there (or if you don't want the answer in `result`, replace `result` with `name`. Just make sure to add `{` `}` around that `if` block. – Scott Mermelstein Nov 11 '13 at 15:17
can u edit in to my code please – msalman Nov 11 '13 at 15:17
@msalman I copied all of your ` – Scott Mermelstein Nov 11 '13 at 15:21
ok i replace your code in to my code and after that what i put in – msalman Nov 11 '13 at 15:24
@msalman Try it and find out. :-) As soon as you execute your code, it should replace "i want count days here" with the count of days. – Scott Mermelstein Nov 11 '13 at 15:25
i paste ur code in my page and change this but it is not working – msalman Nov 11 '13 at 15:25
@msalman Make a fiddle at jsfiddle.net and edit your question with the new information. – Scott Mermelstein Nov 11 '13 at 15:26
1

You cannot set the value of an input element with `innerHTML`. It should be `document.getElementById("name").value = diffDays;`. I assume that's a copy&paste error ;) – Felix Kling Nov 11 '13 at 15:34
http://jsfiddle.net/kuZx7/1/ see the link dear its not working – msalman Nov 11 '13 at 15:35
1

@FelixKling Wow, I messed up both on my question edit and my answer. Thank you for catching both. – Scott Mermelstein Nov 11 '13 at 15:36
thanks felix kling now its working fine – msalman Nov 11 '13 at 15:39
@FelixKling If you want to write up an answer, I'll be happy to delete mine. I was lazy and sloppy. – Scott Mermelstein Nov 11 '13 at 15:39
thanks you all Scott Mermelstein and felixking – msalman Nov 11 '13 at 15:39
no problem @ScottMermelstein both are help full to me – msalman Nov 11 '13 at 15:41
Na, it's fine. Just did some minor fixes ;) Happy coding! – Felix Kling Nov 11 '13 at 15:42
@FelixKling Well, you don't need the points - but I'd rather earn mine properly. So I made it a community wiki. I'd still rather not have the reputation it already got me. You can copy-paste the answer verbatim, and I'd remove mine. – Scott Mermelstein Nov 11 '13 at 15:43
Oh come on. Everyone makes mistakes. Answers can be edited for a reason. You still earned the points because you took the time to answer and helped the OP. Don't worry :) – Felix Kling Nov 11 '13 at 15:46
I'll be quiet, then, and thanks. – Scott Mermelstein Nov 11 '13 at 15:46

How set the value of an input element?

1 Answers1