Here is my code.
<html>
<head>
<title>Patient Information Management</title>
<!--showDate AJAX script -->
<script language="javascript" type="text/javascript">
function showDate(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.value = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var date = document.getElementByName('Date').value;
var queryString = "?date=" +date ;
ajaxRequest.open("GET", "getappointmentdate.php" +queryString, true);
ajaxRequest.send(null);
}
</script>
<!-- //Calender Script -->
<link rel="stylesheet" type="text/css" media="all" href="scripts/jsDatePick_ltr.min.css"/>
<!--JavaScript-->
<script type="text/javascript" src="scripts/jsDatePick.min.1.3.js"></script>
<!--For javascript Calendar-->
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"Date",
cellColorScheme:"orange",
dateFormat:"%d-%m-%Y",
});
};
</script>
</head>
<body>
<div class="wrapper">
<?php include("include/header.php"); ?>
<div class="clear"></div>
<?php
<div class="clear"></div>
</div> <!-- end of sidemenu div -->
</div> <!-- end of left div -->
<div id="right" >
<h2>anything</h2>
<div class='grey_divider'></div>
<p> </p>
<div class='grey_divider'></div>
<h3>Make Appointment</h3>
<form action="">
Date : <input type="text" size="20" id="Date" name="Date"/>
<input type='button' onclick='showDate()' value='Submit'/>
</br>
</br>
</form>
</div>
</body>
</div>
</html>
When I click button 'Submit' , it should be run the php document, but unfortunately, nothing happen, someone can help me please.
I catch html date with getElementByName instead of getElementById because the 'id' has been use to catch the calender js .Would it affect?
I'm pretty sure you need to catch the button click and stop it's default behaviour with .preventDefault() and then call your function.
Added code
$('input[type="submit"]').click(function(e) {
e.preventDefault();
showDate();
});
Related
Here is my html/ajax code
<head>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var date = document.getElementById('Date').value;
var queryString = "?date=" + date;
ajaxRequest.open("GET", "php.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<!--showDate AJAX script -->
<!-- //Calender Script -->
<link rel="stylesheet" type="text/css" media="all" href="scripts/jsDatePick_ltr.min.css"/>
<!--JavaScript-->
<script type="text/javascript" src="scripts/jsDatePick.min.1.3.js"></script>
<!--For javascript Calendar-->
<script type="text/javascript">
window.onload = function(){
new JsDatePick({useMode:2, target:"Date", cellColorScheme:"orange", dateFormat:"%d-%m-%Y",});};
</script>
</head>
<body>
<form action="">
Date : <input type="text" size="20" id="Date" name="Date"/>
<input type="submit" name="submit" value="Submit" onClick="ajaxFunction()"/>
</form>
<div id="ajaxDiv">Time slots will be listed here...</div>
</body>
and here is my PHP code
<?php
$d = $_GET['date'];
$timestamp = strtotime($_GET['date']);
$date = date("Y-m-d",$timestamp);
echo "Time is $date";
?>
I can choose date from the calender and date will be displayed at below. Unfortunately, it doesn't work. Someone please helps me to solve my problem. I have tried many times to fix the error but still cannot done it. Almost faint.
First of all I advise you to use jQuery for Ajax handling, then why on Earth would you query the server for getting the date, passing the date itself?
Use moment.js or xdate for client-side datetime formatting.
What you want to do and what you are doing are two very different things,
1. You don't need php at all.
2. Here is full code for you to copy. http://www.java2s.com/Code/JavaScript/Development/UpdateTimepersecond.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Validate Zip Code</title>
<script type="text/javascript">
function IsValidZipCode(zip) {
var isValid = /20132/.test(zip);
if (isValid)
alert('Valid ZipCode');
else {
alert('yep')
}
}
</script>
</head>
<body>
<form>
<input id="txtZip" name="zip" type="text" /><br />
<input id="Button1" type="submit" value="Check My Zipcode"
onclick="IsValidZipCode(this.form.zip.value)" />
</form>
</body>
</html>
I need to use this to allow the user to go either to a page that says sorry we cannot service your area or to another page that says yes we can service your area based on wheter their zipcode is listed.
also how can i add more than one zip code in the isValid = line?
Setting window.location.href = "your url here"; answers the first part of your question.
"also how can i add more than one zip code in the isValid = line?"
If you want to stick with a regex test you can use the regex or |:
var isValid = /^(20132|20133|20200|90210|etc)$/.test(zip);
Note that I've also added ^ and $ to match the beginning and end of the entered string - the way you had it you'd also get matches if the user entered a longer string containing that code, e.g., "abc20132xyz" would match.
I'd be more inclined to do this validation server-side though.
if (isValid)
document.location.href="validzipcode.html";
else {
document.location.href="yep.html";
}
function IsValidZipCode(zip) {
var isValid = /20132/.test(zip);
if (isValid)
document.location.href="valid_zip.html";
else {
document.location.href="not_valid_zip.html";
}
}
<script type="text/javascript">
function IsValidZipCode(zip) {
var isValid = /20132/.test(zip);
if (isValid)
window.location = baseurl."/valid.php"
else {
window.location = baseurl."/invalid.php"
}
}
</script>
You can redirect it in javascript with following code , that can be put in your example instead of alert()
window.location.href = "http://stackoverflow.com";
You can try ajax for this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Validate Zip Code</title>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function IsValidZipCode(zip){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
//alert(ajaxRequest);
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
//var ajaxDisplay = document.getElementById('ajaxDiv');
//ajaxDisplay.innerHTML = ajaxRequest.responseText;
alert(ajaxRequest.responseText);
if(ajaxRequest.responseText=="")
{
alert("sorry we cannot service your area");
}
else{
window.location = "Page.php?zip="+zip+"";
}
}
}
//var age = document.getElementById('age').value;
//var wpm = document.getElementById('wpm').value;
//var sex = document.getElementById('sex').value;
var queryString = "?zip=" + zip;
ajaxRequest.open("GET", "zip_check.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<form name="form1" method="post">
<input id="txtZip" name="zip" type="text" /><br />
<input type="button" id="Button1" value="Check My Zipcode"
onclick="IsValidZipCode(document.form1.zip.value)" />
</form>
</body>
</html>
How to send looping data from html page to php page using ajax. I am trying so hard but i don't get any way passing looping data into php page.
order.html page code are described in the below:
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var age = document.getElementById('age[]').value;
var queryString = "?age=" + age ;
ajaxRequest.open("GET", "example.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name='myForm'>
Name: <input type='text' id='age[]' Name='age[]' /> <br />
Name: <input type='text' id='age[]' Name='age[]'/>
<br />
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id='ajaxDiv'>result will display here</div>
</body>
</html>
example.php page code are described in the below:
<?php
$len = count($_GET['age']);
for($x=0;$x<$len;$x++)
{
echo $service[$x]=$_GET['age'][$x];
}
?>
the [] should be append to the query string, not to the input name
var queryString = "?age[]=" + age1 + "&age[]=" + age2 + "&age[]=" + age3 ;
ajaxRequest.open("GET", "example.php" + queryString, true);
Hi everyone and first of all thanks for everything, well here is the question:
each time a hit the submit button that I have linked with the jquery trying to make an AJAX request to open a dialog in modal mode the jquery dosen't execute, I must have done something wrong but can't seem to find it, here is the code:
HTML
<html xmlns="http://www.w3.org/1999/xhtml" charset="utf-8">
<head>
<title>Administrador :: Estructuras M&M ::</title>
<link href="../CSS/admin.css" rel="stylesheet" type="text/css"/>
<link href="../CSS/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../js/jquery-ui.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="login">
<form method="post" id="ingreso" name="ingreso">
<div><label class="etiqueta">Usuario:</label><input type="text" maxlength="15" id="usuario" name="usuario" /></div>
<div><label class="etiqueta">Clave:</label><input type="password" maxlength="15" id="clave" name="clave" /></div>
<div><input type="submit" value="Aceptar" id="verificar" /></div>
</form>
</div>
</div>
</body>
and this is the Jquery im trying to execute:
$('#verificar').click(function()
{
var xmlhttp;
try
{
xmlhttp = new XMLHttpRequest();
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Su navegador no soporta AJAX, por favor pruebe con otro.");
return false;
}
}
}
if(xmlhttp)
{
var dialog = $("<div id='modal' class='cargando' title='Verificando Usuario por favor espere.'><span>Verificando la existencia del usuario por favor espere.</span></div>").appendTo('body');
dialog.dialog(
{
height: auto,
modal: true,
buttons: { "Ok": function() { $(this).dialog("close");} },
draggable: false,
resizable: false,
close: function(event, ui)
{
dialog.remove();
}
});
}
});
I really wish to make it work right so I'm open to all type of suggestions, thanks.
Oh and after I open the modal I'm supposed to send the ajax info to a PHP page to verify if the user exists, just haven't done it cause I was testing it out first,
$('input.verificar')
is a selector that is looking for inputs with a class of 'verificar'. what you want is to find an object with the id of 'verificar'.
$('#verificar')
I'm making a UNIX web-based terminal for learning purposes. So far I have made a text box and the output is being displayed. Sort of like this.
<?php
$output = shell_exec('ls');
echo "<pre>$output</pre>";
?>
Form
<html>
<head>
<link href="/css/webterminal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function shell_execute(str)
{
if (str.length==0)
{
document.getElementById("txtOut").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtOut").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","exec.php?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body onLoad="setUser();">
<div class="container">
<h2>UNIX Web Based Terminal 1.0</h2>
<br />
<p><b>output</b></p>
<form>
<span id="User"></span>< <input type="text" class="textbox" onkeyup="shell_execute(this.value)" size="20" />
</form>
<div class="output">
<p><span id="txtOut"></span></p>
</div>
</div>
</body>
</html>
But I want it to look as if the page was really a terminal. When I type a command, it should store the result of the shell command, and then append it to a div tag. So as I am typing in commands, it will keep on showing the output. Just like in the UNIX terminal.
How can I append the output of the commands to a div tag?
change:
document.getElementById("txtOut").innerHTML=xmlhttp.responseText;
to:
document.getElementById("txtOut").innerHTML += xmlhttp.responseText;
On a sidenote, why are you not using any of the well established javascript frameworks?
With jQuery for example you could reduce your code to maybe 4 lines.
Edit - using jQuery:
http://api.jquery.com/jQuery.ajax/
<html>
<head>
<link href="/css/webterminal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('#cmd').bind('keydown', function (evt) {
if (evt.keyCode === 13) { // enter key
var cmdStr = $(this).val();
$.ajax({
url: 'exec.php',
dataType: 'text',
data: {
q: cmdStr
},
success: function (response) {
$('#txtOut').append(response);
}
});
}
});
});
</script>
</head>
<body>
<div class="container">
<h2>UNIX Web Based Terminal 1.0</h2>
<br />
<p><b>output</b></p>
<span id="User"></span>
<input id="cmd" type="text" class="textbox" size="20" />
<div class="output">
<p><span id="txtOut"></span></p>
</div>
</div>
</body>
</html>