Solved

Javascript: Update textfield with button

Posted on 2010-08-30
11
229 Views
Last Modified: 2012-10-11
Good morning.  Using PHP and Javascript I am looking to update two text fields with a single button click.

The text fields are a Start and End date
The button is hardcoded for YearToDate information.

Here is my PHP for the button
echo "<input type='button' onclick='selectytd()' value='Select YTD' />";

Here is my Javascript for the function:
function selectytd()
{
var xmlHttp = ajax();
      
      xmlHttp.onreadystatechange=function()
    {
            if(xmlHttp.readyState==4)
            {
                  document.getElementById("graph").innerHTML = xmlHttp.responseText;
            }
    };
      xmlHttp.open("GET","graphcomp.php?&start=01/01/2010&end=&"+currentdatejf(),true);
      document.getElementById("graph").innerHTML = "Loading...";
      xmlHttp.send(null);      

}

function currentdatejf()
{
      var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
return month + "/" + day + "/" + year;

}

Could anyone assist with this?

0
Comment
Question by:nm67304
  • 6
  • 5
11 Comments
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 33557930
I could not get what you mean but in this function you can change the values

function selectytd() {
  document.getElementById("txt1").value="Hain";
  document.getElementById("txt2").value="Kurt";
...
0
 
LVL 52

Assisted Solution

by:Huseyin KAHRAMAN
Huseyin KAHRAMAN earned 500 total points
ID: 33557961
I think you want this
<input type='button' onclick='selectytd()' value='Select YTD' />

<script>
function selectytd() {
  var xmlHttp = ajax();
  xmlHttp.onreadystatechange=function() {
    if(xmlHttp.readyState==4) {
      document.getElementById("graph").innerHTML = xmlHttp.responseText;
    }
  };
  xmlHttp.open("GET","graphcomp.php?&start=" + currentdateStart() +"&end=&" + currentdateEnd(),true);
  document.getElementById("graph").innerHTML = "Loading...";
  xmlHttp.send(null);      
}

function currentdateEnd() {
  var currentTime = new Date();
  var month = currentTime.getMonth() + 1;
  var day = currentTime.getDate();
  var year = currentTime.getFullYear();
  return month + "/" + day + "/" + year;
}

function currentdateStart() {
  var currentTime = new Date();
  var month = 1;
  var day = 1;
  var year = currentTime.getFullYear();
  return month + "/" + day + "/" + year;
}
alert(currentdateStart());
</script>

Open in new window

0
 

Author Comment

by:nm67304
ID: 33558153
This looks like it would help
But now I am getting an Error on Page.

0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 33558229
what error? on which line?
I did not add anything to cause any error ;)
0
 

Author Comment

by:nm67304
ID: 33558311
Ok I think if fixed the error but it still doesnt update the two text fields, start and end
0
 
LVL 52

Expert Comment

by:Huseyin KAHRAMAN
ID: 33558437
"still doesnt update the two text fields, start and end"

I dont see any code for those two text and I dont see how your code will udate those... do you miss any code?
0
 

Author Comment

by:nm67304
ID: 33558556
To help you, there are two fields i want the button to update...A Start field and End field, both text fields.
When you click SelectYTD I want it to populate those two text fields with the Start date as 01/01/2010 and the end field with whatever the current date is.

The reason for doing this is because this selectytd button will refresh a portion of the page with information...the date range for that information would pull from whatever is displayed in those two text boxes.

<table><tbody><tr><td>Start</td><td><input type='text' id='start' value='<?php echo date("m/d/Y");?>'/></td><td><a href="javascript:cal1.init('start',360,300);" id="cal1">MM/DD/YYYY</a></td></tr><tr><td>End</td><td><input type='text' id='end' value='<?php echo date("m/d/Y");?>'/></td><td><a href="javascript:cal1.init('end',360,300);" id="cal1">MM/DD/YYYY</a></td></tr></tbody></table><br/><input type='button' onclick='refresh()' value='Refresh' />
0
 

Author Comment

by:nm67304
ID: 33558598
Here is the snippit
<table><tbody><tr><td>Start</td><td><input type='text' id='start' value='<?php echo date("m/d/Y");?>'/></td><td><a href="javascript:cal1.init('start',360,300);" id="cal1">MM/DD/YYYY</a></td></tr><tr><td>End</td><td><input type='text' id='end' value='<?php echo date("m/d/Y");?>'/></td><td><a href="javascript:cal1.init('end',360,300);" id="cal1">MM/DD/YYYY</a></td></tr></tbody></table><br/><input type='button' onclick='refresh()' value='Refresh' />

Open in new window

0
 

Author Comment

by:nm67304
ID: 33559108
Any udpate?
0
 
LVL 52

Accepted Solution

by:
Huseyin KAHRAMAN earned 500 total points
ID: 33560608
us this function instead in the solution provided @ 33557961
function selectytd() {
  var dtStart = currentdateStart();
  var dtEnd = currentdateEnd();
  document.getElementById("start").value=dtStart;
  document.getElementById("end").value=dtEnd;
  var xmlHttp = ajax();
  xmlHttp.onreadystatechange=function() {
    if(xmlHttp.readyState==4) {
      document.getElementById("graph").innerHTML = xmlHttp.responseText;
    }
  };
  xmlHttp.open("GET","graphcomp.php?&start=" + dtStart +"&end=&" + dtEnd,true);
  document.getElementById("graph").innerHTML = "Loading...";
  xmlHttp.send(null);      
}

Open in new window

0
 

Author Comment

by:nm67304
ID: 33561078
That works, thanks.

It answered my posted question.
I posted it because i THOUGHT this would fix my main issue, but it didnt lol.  Back to the drawing board.

Thanks though, this cleans it up
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question