i am using normal ajax to search from data base when form submit but the code is not working . There are two date field i want to search data between two dates if i use separate page the code is working but in ajax it is not working .any help will be appreciate Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="datepicker/javascript/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="datepicker/css/default.css" type="text/css" />
<script type="text/javascript" src="datepicker/javascript/zebra_datepicker.js"></script>
<script>
$(document).ready(function() {
$('input.datepicker').Zebra_DatePicker();
$('#strt_dt').Zebra_DatePicker();
});
$(document).ready(function() {
$('input.datepicker').Zebra_DatePicker();
$('#end_dt').Zebra_DatePicker();
});
</script>
<script>
function showStd(tstfrm) {
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("replace").innerHTML=xmlhttp.responseText;
}
}
var strt_dt = document.getElementById('strt_dt').innerHTML;
var end_dt = document.getElementById('end_dt').innerHTML;
xmlhttp.open("GET","test2.php?strt_dt="+strt_dt+"&end_dt="+end_dt, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" method="post" onsubmit="return showStd(this);" name="tstfrm" id="tstfrm">
<fieldset>
<p><label>Start Date:</label><input name="strt_dt" type="text" class="text-long" id="strt_dt" /></p>
<p><label>End Date:</label><input name="end_dt" type="text" class="text-long" id="end_dt" /></p>
<input name="serch" type="submit" id="serch" value="search"/>
</fieldset>
</form>
<div id="replace" style="height:500px; width:1000px; border:1px solid #000;">
</div>
</body>
</html>
and here is the below test2.php for search
<?php
include '../dbconn.php';
$strt_dt=$_REQUEST['strt_dt'];
$end_dt = $_REQUEST['end_dt'];
?>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="137"><b>Name</b></td>
<td width="154"><b>Contact</b></td>
<td width="407" align="center"><b>Action</b></td>
</tr>
<?php
$qry=mysql_query("SELECT * FROM std_register WHERE reg_dt BETWEEN '".$strt_dt."' AND '".$end_dt."'");
while($row=mysql_fetch_array($qry))
{
?>
<tr>
<td><?php echo $row['std_name1']." ".$row['std_name2'];?></td>
<td><?php echo $row['std_phno'];?></td>
</tr>
<?php
}
?>
</table>
Dude i can see in your code that you are using jQuery on the page.
can use jQuery provided methods for Ajax requests.
$.get
$.post
And more verbose method $.ajax for your work you need jQuery to make it cross browser.
$.get('/test2.php?date='+date,function(response){
//use server response to manipulate dom
});
Related
I'm having mistakes do not know where error
Having trouble using JavaScript or Ajax and text display the same page
Please help me in the wrong reform
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pop up example</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
document.getElementById('myform').addEventListener("submit",upload);
function upload()
{
var xhr = new XMLHttpRequest();
xhr.open("POST","/upload.php",true);
{
var formdata = new formData(myform);
xhr.send(formdata);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200)
{
//some code to check if submission succeeded
url = xhr.responseText();
if(url == 'failed')
Console.log('upload failed'); // do something for failure
else
document.getElementById('urlBox').innerHTML = url;
}
}; return false;
}
</script>
</head>
<body>
<form id="myform" method="POST" action=<?php ($_SERVER["PHP_SELF"]); ?>>
<p>chose url:
<select size="1" name="D1">
<option value="google_drive">google drive</option>
<option value="clody">clody</option>
</select>
<input type="text" name="T1" size="40">
<input type="submit" value="go" name="B1">
<input type="reset" value="reset" name="B2">
</p>
</form>
</body>
</html>
and this upload.php file
<?php
if(!empty($_POST['D1']) && !empty($_POST['T1'])){
$providers = array(
'google_drive' => 'Goole drive^https://drive.google.com/file/d/{replace}/view',
'clody' => 'Cloudy^https://www.cloudy.ec/embed.php?id={replace}'
);
if(isset($providers[$_POST['D1']])){
$url = str_replace('{replace}', $_POST['T1'], $providers[$_POST['D1']]);
echo "$url";
}
}
else{
echo "failed";
}
?>
and thank you all
Add following line in your html page
<div id='urlBox'></div>
It is normal your semicolon after xhr.open("POST","/upload.php",true) ?
You can try replace this line:
<form id="myform" method="POST" action=<?php ($_SERVER["PHP_SELF"]); ?>>
For this:
<form id="myform" method="POST" action="<?php ($_SERVER["PHP_SELF"]); ?>">
The differece is in your action. You're not using ""
This question already has answers here:
add onclick function for submit button
(5 answers)
Closed 7 years ago.
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
</head>
<body style="background-color:red;">
I was just thinking that I could do us a private lil webpage ^^
I love you so much hun! <3
<form name="Wish">
Wish<input type="text" name="wish"/>
<input type="submit" class="button" onclick="sendtoajax(this.form)" />
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function sendtoajax(form){
var xmlhttp;
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)
{
alert('done')
}
}
xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("form.wish.value");
}
</script>
</body>
</html>
I want to execute the function on button click and if I just leave it plain so it executes immidiatelly it work but when I put it into a function and I call it on button click it doesnt at all...
Change type="button" of input. If input has type="submit" it submits the form and hence your function will not be called.
<input type="button" class="button" onclick="sendtoajax(this.form)" />
<!DOCTYPE html>
<html>
<head>
<title>Login page</title>
<script language="javascript">
function sendtoajax(){
var xmlhttp=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert('done')
}
}
xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send( 'wish='+document.querySelectorAll('input[name="wish"]')[0].value );
}
</script>
</head>
<body style="background-color:red;">
I was just thinking that I could do us a private lil webpage ^^ I love you so much hun! <3
<form name='Wish'>
<label>Wish<input type="text" name="wish" /></label>
<input type="button" class="button" value='Wish now' onclick="sendtoajax()" />
<input type="reset" value="Cancel"/>
</form>
</body>
</html>
In your code, the <form> submits and redirects. AJAX forms are not meant to redirect. Either give return false; like this:
<input type="submit" class="button" onclick="sendtoajax(this.form); return false;" />
Or give an event.preventDefault() in your AJAX code:
function sendtoajax(form) {
//----
//----
//----
return false;
}
If you can do with jQuery, it is very easy. Lemme take the same code of yours, and convert it to jQuery in a simple way and explain you:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<title>Login page</title>
</head>
<body style="background-color: red;">
I was just thinking that I could do us a private lil webpage ^^
I love you so much hun! <3
<form name="Wish" id="Wish">
Wish <input type="text" name="wish" />
<input type="submit" class="button" />
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
$(function () {
$("#Wish").submit(function () {
$.post("ajax.php", $(this).serialize(), function () {
alert("Submitted");
});
});
});
</script>
</body>
</html>
I am trying to update a div with information received from a server periodically. The code below will receive the correct information from the server, append it to the divs text, then reload the page/clear out the div.
<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type='text/javascript'>
function exec(command){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = document.getElementById("txtHint").innerHTML + "<br/><br/>" + xmlhttp.responseText;
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "HAS-sync.php", true);
xmlhttp.send()
}
</script>
<style type="text/css">
.auto-style1 {
margin-top: 0px;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<td style="width: 141px; height: 390px">Managers<br /> DHTs</td>
<td name="targetThing" style="height: 390px">
<form onsubmit="exec()">
<input class="auto-style1" name="Text1" type="text">
<input type="submit">
</form>
<br />
<div id="txtHint" style="border:1px solid black;width:50%;height:50%"></div>
</td>
</tr>
</table>
</body>
</html>
How can I get this to simply append the result of the ajax call to the divs text, instead of clearing it completely?
First move the onsubmit to the form tag instead of the input as said in the comment.
<form onsubmit="updateTxt(this.value);return false">
You need to append the response text instead of overwriting what is already in innerhtml.
document.getElementById("txtToUpdate").innerHTML += xmlhttp.responseText;
Right now, you are overwriting the HTML using the = assignment. You need to append it, instead, using +=:
document.getElementById("txtToUpdate").innerHTML += xmlhttp.responseText;
Use
var txtToUpdate = document.getElementById("txtToUpdate");
txtToUpdate.innerHTML = txtToUpdate.innerHTML + xmlhttp.responseText;
You need to return false in your onsubmit handler so the browser knows you've handled the request and it should not proceed. This can be done in a couple ways:
Add return false; after exec() in your binding:
<form onsubmit="exec();return false;"><!-- ... --></form>
or, Modify your binding to be return exec() and have the method return false;:
<script>
function exec(){
/* ... */
return false;
}
</script>
<form onsubmit="return exec()"><!-- ... --></form>
As an aside, you should consider moving away from binding javascript using attributes and start using addEventHandler (and alike) to keep a clear separation of concerns.
when i run with welcome.jsp, dojo creates a textbox dynamically.but when i call the welcome.jsp with ajax in index.jsp, which shows only div element.which doesn't create a text field inside that div........... please someone help me?
hear is the code.
index.jsp
<!DOCTYPE html>
<%#page import="java.util.*" %> <%#page import="org.hibernate.*,org.hibernate.cfg.*,example.*" %>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/tundra/tundra.css">
<script>
require(["dojox/layout/ContentPane"]);
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;
}
}
alert("str is"+str);
xmlhttp.open("GET","welcome.jsp",true);
xmlhttp.send();
alert(4);
}
</script>
</head>
<body class="tundra">
<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="customer1">customer1</option>
</select>
</form>
<br>
<div data-dojo-type="dojox/layout/ContentPane" id="txtHint" data-dojo-props="href: '/welcome.jsp', executeScripts: true">
Customer info will be listed here...
</div>
</body>
</html>
welcome.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%#page import="java.util.*" %> <%#page import="org.hibernate.*,org.hibernate.cfg.*,example.*" %>
<html>
<head>
<title>Dojo DnD test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/document.css">
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/dijitTests.css">
<body onload="vali();">
</body>
<script>
dojo.require("dojo.dnd.Source");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
require(["dojox/layout/ContentPane"]);
var widgets = new Array();
var source;
var c=new Array();
dojo.ready(function() {
for (var i = 0; i < 5; i++) {
widgets.push(
new dijit.form.TextBox({
value: i,
class: 'dojoDndItem',
}).placeAt("source"));
}
source = new dojo.dnd.Source("source", {
copyOnly: false
});
new dojo.dnd.Source("target");
});
setValue = function() {
widgets[0].attr("value", (new Date).getTime());
};
insertNew = function() {
widgets.push(
new dijit.form.TextBox({
value: widgets.length,
class: 'dojoDndItem',
}));
source.insertNodes(true, [widgets[widgets.length-1].domNode]);
};
</script>
</head>
<body class="claro">
<form name="form1">
<div dojoType="dijit.form.Button" onClick="setValue">
set value textbox 0
</div>
<div dojoType="dijit.form.Button" onClick="insertNew">
insert new textbox
</div>
<table>
<tr>
<td>
<div id="source" style="height: 200px; width: 200px; border: 1px solid red;">
</div> </td>
<td><div id="target" style="height: 200px; width: 200px; border: 1px solid blue;">
</div></td></tr></table>
</form>
</body>
</html>
That's because when you load your content with AJAX, scripts are not interpreted. You have to evaluate them by yourself using the eval() function. Or, since you're using Dojo, you could look at the dojox/layout/ContentPane module. This module allows you to load a page (through AJAX requests) and execute the scripts that are on it without the entire XMLHttpRequest or ActiveXObject overhead (and without having to manually call eval()).
To do this with the dojox/layout/ContentPane, you just replace your <div> with ID #txtHint by:
<div data-dojo-type="dojox/layout/ContentPane" id="txtHint" data-dojo-props="href: 'welcome.jsp', executeScripts: true">
Customer info will be listed here...
</div>
You only need to make sure you load Dojo, set the data-dojo-config attribute so that parseOnLoad: true property is set and you need to make sure you import the dojox/layout/ContentPane module by having the following code:
require(["dojox/layout/ContentPane", "dojo/parser"]);
A full example loading a webpage can be found on this JSFiddle (I change the href to / so it would load the homepage again, because I have no welcome.jsp page).
Another example doing the same programmatically can be found on this JSFiddle.
When I use responseText, I get all the data. From <HTML> to </HTML>. How to I extract specific parts of it? For example, I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tester</title>
</head>
<body>
<table>
<tr>
<td><a name="Name"></a>Name</td>
<td>John</td>
</tr>
<tr>
<td><a name="Email"></a>Email</td>
<td>john#aol.com</td>
</tr>
<tr>
<td><a name="Address"></a>Address</td>
<td>123 Elm Street</td>
</tr>
<tr>
<td><a name="City"></a>City</td>
<td>Los Angeles</td>
</tr>
<tr>
<td><a name="State"></a>State</td>
<td>CA</td>
</tr>
</table>
</body>
</html>
And Then I need to just extract like the city part Los Angeles. How would I go about doing this? I can't do responseText.getElementByTagName, or anything like that.
Here's the AJAX call:
var xmlhttp;
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)
{
var pageContents = xmlhttp.responseText;
document.getElementById("myDiv").innerText = pageContents;
}
}
xmlhttp.open("GET","content.html",false);
xmlhttp.send();
For a pure JavaScript solution, try (untested):
var city = responseXML.getElementsByName('City').parentNode.nextElementSibling.childNodes[0].getAttribute('textContent');
That said, a JavaScript library, like jQuery, to do the heavy lifting sure makes your code a lot easier to read (as well as cross-browser friendly).
jQuery names this (sort of) easy:
alert($('table').find('tr').eq(3).find('td').eq(1).html()) ---> Los Angeles