Executing a PHP script/function from OnClick or OnChange

Javascript coding ..

Moderators: macek, egami, gesf

User avatar
popeye
New php-forum User
New php-forum User
Posts: 120
Joined: Sat Jan 03, 2004 7:06 pm
Location: New York, NY

Executing a PHP script/function from OnClick or OnChange

Postby popeye » Sun Oct 09, 2005 11:47 am

Is it possible to execute a PHP script or function using OnClick or OnChange for an <input>?
I need to show and/or select a date-time field from a MySQL table when the value of an <input> has changed or clicked. Thanks

User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Postby Alexej Kubarev » Mon Oct 10, 2005 3:32 am

The only solution will be working with XmlHttpRequest or whatever it is called.. i always mix parts of this function up. like i said, test using js to send a request to another page, get the response and use Js agaiin to change the data on that page.

User avatar
gesf
Moderator
Moderator
Posts: 1717
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden
Contact:

Postby gesf » Mon Oct 10, 2005 4:38 pm

Your question is very comfusing popeye, but... i understand it :)
Alexei is right, XmlHttpRequest can give you some kind of a "real-time" process when dialling between a client and a server side language.

This next code is a great examples for you to see how does it works.
This is a JS and HTML based code. Our Js PostForm() function will make the request (in background) to our email process php script.

Please follow each line/step of this Js code, i bet you'll understand it easily.
However, there are some other few things to know about XmlHttpRequest, but you can find it quickly by googling :D

Code: Select all

<html>
<head>
<title>Whatever</title>
<script type="text/javascript">
function PostForm() {
  var http = null;
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  var subject = document.getElementById('subject').value;
  var message = document.getElementById('message').value;

  if(window.XMLHttpRequest)
    http = new XMLHttpRequest();
  else if (window.ActiveXObject)
    http = new ActiveXObject('Microsoft.XMLHTTP');

  http.onreadystatechange = function() {
    if(http.readyState == 4)
      alert(http.responseText);
  };

  http.open('POST', 'Your_email_process_script.php', true);
  http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  http.send('name=' + name + '&email=' + email + '&subject=' + subject + '&message=' + message);
}
</script>
</head>
<body>
<form name="contact_form"method="post" action="">
  Name:<br />
  <input type="text" name="name" id="name" size="40" value="" /><br />
  Email:<br />
  <input type="text" name="email" id="email" size="40" value="" /><br />
  Subject:<br />
  <input type="text" name="subject" id="subject" size="40" value="" /><br />
  Message:<br />
  <textarea name="message" cols="70" rows="9" class="required"></textarea><br />
  <input type="button" onclick="PostForm()" name="SendMessage" value="Send Message" />
</form>
</body>
</html>
It should work just great :)

User avatar
popeye
New php-forum User
New php-forum User
Posts: 120
Joined: Sat Jan 03, 2004 7:06 pm
Location: New York, NY

Postby popeye » Wed Oct 12, 2005 5:42 pm

Thanks for your time and answer. I will try it and see if I can make changes to fit it into my need. But here is a simple example of what I really need to do:

<input type='text' value='2005-11-10' name='datex' OnChange='CheckSchedule()'>

The CheckSchedule funcion needs to check a MySql database table and see if the new date is available and if it is not suggest new one and reset it. My question really is; can this function be a PHP function? If not, how or where can I go to get some info on how to access and work with MySQL tables using JavaScript.

Thanks

User avatar
gesf
Moderator
Moderator
Posts: 1717
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden
Contact:

Postby gesf » Wed Oct 12, 2005 11:48 pm

That's the idea!
Your JavaScript CheckSchedule() function will call a PHP script (in background) via XmlHttpRequest to perform that operation!

User avatar
popeye
New php-forum User
New php-forum User
Posts: 120
Joined: Sat Jan 03, 2004 7:06 pm
Location: New York, NY

Postby popeye » Fri Oct 14, 2005 10:01 am

Thanks. I tried it and I am getting the script/text version of the PHP function "CheckSchedule()" splashed on the screen. It seems like I am missing some kind of translator for the processing of the new commands in order to process the PHP script. What is the role of "function()" in "http.onreadystatechange = function()" ? :?

User avatar
gesf
Moderator
Moderator
Posts: 1717
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden
Contact:

Postby gesf » Sat Oct 15, 2005 12:01 am

Please take a look at this: The XmlHttpRequest Object

User avatar
popeye
New php-forum User
New php-forum User
Posts: 120
Joined: Sat Jan 03, 2004 7:06 pm
Location: New York, NY

Postby popeye » Tue Oct 18, 2005 12:55 pm

I came up with the following but every time the loadscheduler function is called I get no response and it will not call the Scheduler.php.

Code: Select all

<html>
<head>
<title>Whatever</title>
<script type="text/javascript">
var xmlhttp ;
function loadscheduler()
{
var inschedtime = document.getElementById('schedtime').value;
// code for Mozilla, etc.
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest()
  xmlhttp.onreadystatechange=state_Change
  xmlhttp.open("GET","Scheduler.php",true)
  xmlhttp.send('inschedtime='+inschedtime)
  }
// code for IE
else if (window.ActiveXObject)
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
  xmlhttp.onreadystatechange=state_Change
  xmlhttp.open("GET","Scheduler.php",true)
  xmlhttp.send('inschedtime='+inschedtime)
  }
}
function state_Change()
{
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
  {
  // if "NOT OK"
  if (xmlhttp.status!=200)
  alert("Problem retrieving XML data:" + xmlhttp.statusText)
  }
}
</script>
</head>
<body>
<form name="contact_form" method="post" action="dosomething.php">
Schedule Date:<input type="button" value="2005-10-13" name="schedtime" ondblclick="loadscheduler()"><br>
</form>
</body>
</html>



The simple Scheduler.php looks like this:


Code: Select all

<?php
$inschedtime=$_GET['inschedtime'];
$outschedtime=$inschedtime+2;
echo outschedtime;
?>


Return to “JavaScript”

Who is online

Users browsing this forum: No registered users and 1 guest

cron