this script receive time from www.time.is and from #twd ID and show when click on the send btn.
I have two problems:
1-only show first receive time and don't update when click on send again
2- page refresh and lose data
I have Three problem with below code:
<?php include 'simple_html_dom.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Untitled 1</title>
<script src="js/jquery.js"></script>
</head>
<body>
<form action="" method="POST">
<input id="url" name="url" type="text" value="http://www.time.is/">
<input id="address" name="address" type="text" value="#twd">
<input id="send" type="submit" value="get">
</form>
<ul id="times">
</ul>
<script type="text/javascript">
$("#send").click(function(events) {
events.preventDefault();
var url = $("#url").val();
var address = $("#address").val();
var dataString = 'url=' + url + '&address=' + address;
$.ajax({
type: "POST",
url: "read.php",
data: dataString,
success: function() {
var result = "<?php echo getme($url,$address); ?>";
alert(result);
$('#times').append('<li></li>');
}
});
return true;
});
</script>
<?php
function getme($url, $address) {
$html = file_get_html($url);
$code = $html->find($address, 0);
return $code;
}
echo getme($url, $address);
?>
</body>
</html>
any body can help me ..
Thanx all
Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function timer(){
$.post( "process.php", function( data ) {
$('#times').append('<li>'+data+'</li>');
});
}
setInterval(function(){timer()},1000);
});
</script>
</head>
<body>
<ul id="times"></ul>
</body>
</html>
And put this in your process.php file:
<?php
include 'simple_html_dom.php';
$html = file_get_html('http://www.time.is/');
foreach($html->find('#clock0') as $element){
echo $element->plaintext;
}
?>
This is my test result:
11:15:43AM
11:15:46AM
11:15:51AM
11:15:53AM
11:15:53AM
11:16:10AM
11:15:52AM
11:15:42AM
11:16:09AM
11:16:17AM
11:16:12AM
Note:
1- It is advisable that you change intervals from 1000 milliseconds (1 second).
2- Don't forget to use clearInterval() after specific repeat.
Related
I just need to display names of the array using ajax. Following code is working but the result ( Nilantha Ruwan Nimal Shamitha Alex) is just display and disappears.
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top:50px";>
<form >
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="Enter Name....">
</div>
<div class="form-group">
<button class="btn btn-success" id="btn">Enter</button>
</div>
</form>
<div class="msg"></div>
</div>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
var name = $("#name").val();
$.post("ajax.php",{ajax_name:name},function(response){
$(".msg").html(response);
})
.fail(function(error){
alert(error.statusText);
})
})
})
</script>
</body>
</html>
ajax.php
<?php
if(isset($_POST['ajax_name'])){
$store = array("Nilantha","Ruwan","Nimal","Shamitha","Alex");
foreach($store as $names) {
echo $names,"<br>";
}
}
?>
Try the following code.
<script type="text/javascript">
function submit() {
jQuery("form").submit(function(e) {
e.preventDefault();
var name = jQuery("#name").val();
jQuery.ajax({
type: 'POST',
url: 'ajax.php',
data: {ajax_name:name},
success: function(response) {
jQuery(".msg").html(response);
jQuery('#name').val('');
},
error: function() {
console.log("Something wrong");
}
});});
}
jQuery(document).ready(function() {
submit();
});
</script>
I would suggest looking at the network tab of Chrome Devtools and ensuring that the AJAX call isn't running twice. I would think that if the query ran twice but the second one did not have any name attached then it would return blank once the first one had received its response.
I'm trying to create an auto-suggestion AJAX box but there is no response from the server.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title></title>
<?php
include 'search.php';
?>
<script>
$(document).ready(function() {
$("#textbox1").keyup(function() {
$.ajax({
type: "GET",
url: "search.php",
data: {textbox1: $(this).val()},
success: function (data) {
$("#main").html(data);
}
});
});
});
</script>
<form method="POST">
enter keyword to search<br>
<input type="text" name="textbox1" id="textbox1">
<br><br>
<div id="main"></div>
</form>
</head>
<body>
this is search.php
<?php
include 'connection.php';
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$search_value = $_POST['textbox1'];
$query = "SELECT username FROM users WHERE username LIKE '" . $search_value . "%'";
$conn_status = mysqli_query($conn, $query);
while($row = $conn_status->fetch_assoc())
{
echo $row['username'] . '<br>';
}
}
?>
You Missed Following
Ajax Request is Get And you use POST request in PHP
Second is not matter but it is good practice if you define action in
Change Code As follow
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title></title>
<?php
include 'search.php';
?>
<script>
$(document).ready(function() {
$("#textbox1").keyup(function() {
$.ajax({
type: "POST",
url: "search.php",
data: {textbox1: $(this).val()},
success: function (data) {
$("#main").html(data);
}
});
});
});
</script>
<form method="POST" action="">
enter keyword to search<br>
<input type="text" name="textbox1" id="textbox1">
<br><br>
<div id="main"></div>
</form>
</head>
<body>
I've been studyiing jQuery lately and today I was working with AJAX. What I want to do, right now, is simply send a date from a date picker to a PHP page which sends back that date.
I'll later improve the PHP page to do what I need to do.
Here's the code of the HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
$(document).ready(function() {
$("#foo").submit(function(){
var serializedData = $(this).serialize();
$.post('demo.php', serializedData, function(response) {
// Log the response to the console
console.log("Response: "+response);
$("#result").text() = response;
});
});
});
</script>
<title></title>
</head>
<body>
<form id='foo'>
<input type='date' id='dataI' name='dataI'>
<input type='submit' value='send'>
<p id='result'></p>
</form>
</body>
</html>
And here's the simple php page I made:
<?php
echo $_POST["dataS"];
?>
But when I try to send data nothing happens. What am I doing wrong? I tried using a solution I saw here on stack overflow but it doesn't work.
I am attaching code sample;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function validate(){
var serializedData = $('#foo').serialize();
$.post('ajax.php', serializedData, function(response) {
// Log the response to the console
console.log("Response: "+response);
$("#result").html(response);
});
return false;
}
</script>
<title></title>
</head>
<body>
<form id='foo' action="#" onsubmit="return validate()">
<input type='date' id='dataI' name='dataI'>
<input type='submit' value='send'>
<p id='result'></p>
</form>
</body>
</html>
Ajax code file;
echo $_POST["dataI"];
Try adding return false; after
$.post('demo.php', serializedData, function(response) {
// Log the response to the console
console.log("Response: "+response);
$("#result").text() = response;
});
statement.
$(document).ready(function() {
$("#foo").submit(function(){
var serializedData = $(this).serialize();
$.post('demo.php', serializedData, function(response) {
// Log the response to the console
console.log("Response: "+response);
$("#result").text() = response;
});
return false;
});
});
Well I've been having this issue now where my ajax form doesn't show my response value which I enter in the text field. I can't seem to understand why it doesn't show my post value at all.
reset.php
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script>
function submitdata()
{
var email=document.getElementById( "emailfield" );
var datastring='email='+ emailfield;
{
$.ajax({
url: "work2.php",
type:'POST',
data:datastring
cache:false
success: function (html){
$('#msg').html();
}
});
});
</script>
</head>
<body>
<form method="POST">
E-mail: <input type="text" id="emailfield"><br>
<input value="submit" type="submit" onclick="return submitdata()">
</form>
<p id="msg"><p/>
</body>
</html>
work2.php
<?php
$email=$_POST['email'];
echo "response $email";
?>
There are few things you are missing here:
1) You are NOT getting the value from user.
Use:
var emailfield = document.getElementById( "emailfield" ).value;
OR simply
$("#emailfield").val();
2) You are not preventing the default submit process.
Use:
e.preventDefault();
I went ahead and wrote this for you. Just copy all the file and you'll see it working. Hope it helps!
<?php
$data = array();
if(isset($_POST['email'])){
$data = $_POST['email'];
echo json_encode($data);
die();
}
?>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
E-mail: <input type="text" id="emailfield"><br>
<input value="submit" type="submit">
</form>
<p id="msg"><p/>
<script type = "text/javascript">
$("form").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "testing.php",
method: "POST",
dataType: "json",
data: {email: email},
success: function (result) {
alert("result: " + result);
console.log(result);
$("#msg").html(result);
}
});
});
</script>
</body>
</html>
You didn't take value, it's element object, change here
var emailfield = document.getElementById( "emailfield" ).value;
Also put html with value
$('#msg').html(html);
Try it like this.
<html>
<head>
<body>
E-mail: <input type="text" id="emailfield"><br>
<button type="button">Submit</button>
<p id="msg"><p/>
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#emailfield").on("click",function(){
var value = $("#emailfield").val();
$.ajax({
method: "POST",
url: "work2.php",
data: { email: value }
})
.done(function( data ) {
$('#msg').html(data);
});
});
});
</script>
</body>
</html>
I have written a code to pass values of input fields to a php script using ajax but it is not working. Can anyone suggest how to rectify this code ? I want to display the values passed through ajax in the php file.
ex.php
<?php
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
echo $temp.$name;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").change(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
$.ajax({
method: "POST",
url: "ex.php", // path to php file
data: { start_date: fname, end_date: lname } // send required data here
})
.done(function( msg ) {
});
});
});
</script>
</head>
<body>
<form action="#" method="post" name="form1">
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname"/>
</form>
</body>
</html>
try using below code :
<?php
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
echo $temp.$name;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").change(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
var post = "&start_date=" + fname + "&end_date=" + lname;
$.ajax({
'url': ex.php,
'data': post,
'type': 'POST',
'success': function (data)
{
}
});
});
});
</script>
</head>
<body>
<form action="" method="post" name="form1">
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname"/>
</form>
</body>
</html>
Add an element to your makeup
<span id="idOfSomeElementYouWantToUse"></span>
and in your callback set it's text.
.done(function( msg ) {
$("#idOfSomeElementYouWantToUse").text(msg);
});
Add a div to your page and use html() to append the data that comes from the ajax request
<body>
<form action="#" method="post" name="form1">
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname"/>
</form>
<div class="ajax-result"></div>
</body>
js:
$("input").change(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
$.ajax({
method: "POST",
url: "other_file.php", // path to php file
data: { start_date: fname, end_date: lname }, // send required data here
success:function(data){
$(',ajax-result').htm(data);
}
});
Note: from what i can tell you are ajaxing to the same page,i strongly suggest you create a new php file(other_file.php) with your logic in it
From what I can understand from your comment above, you want to insert textbox value to the database, to do this you don't want to call ajax on textChange event because at that time not all value will be present, I suggest adding submit button to the form and call ajax on form submit.
Here is the main file:
ajax_ex.php (You should name it as per your requirement)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form id="frmInsert" method="post" name="form1">
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname"/>
<input type="submit" value="Insert" />
</form>
<div id="msg">
</div>
</body>
<!-- You should put javascript at bottom -->
<script src="jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
$("#frmInsert").submit(function(e){
var fname = $("#fname").val();
var lname = $("#lname").val();
$.ajax({
method: "POST",
url: "insert.php", // path to php file
data: { start_date: fname, end_date: lname } // send required data here
})
.done(function( msg ) {
msg = $.trim(msg);
if (msg == 'true') {
$('#msg').html("Data is inserted successfully");
}else {
$('#msg').html("Data insertion failed");
}
});
e.preventDefault();
});
And you should not call the same file in ajax, I recommend that you create individual file that will be called in ajax, this file will handle all back-end processing.
insert.php
<?php
//Check if post data is available (You should also check for particular attribute if it is available)
if (!empty($_POST)) {
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
//Insert Data into database
// Your code
$result = 'true'; //check for operation if it is success and store it in result
//Echo result so you can check if insert is success of not in your ajax callback.
echo $result;
}
?>