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;
}
?>
Related
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.
I am working on trying to post to ajax file with jquery and showing result on page posted from. Post gets posted but I get no reply from ajax. Am i missing something here?
form file
<!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>Test Ajax</title>
<script src="js/jquery-1.10.2.js"></script>
</head>
<body>
<form id="myform" />
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
</form>
<div id="answer"></div>
<script type="text/javascript">
$('#myform').submit(function(){
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function(response){
$("#answer").html(response);
}
});
});
</script>
</body>
</html>
ajax file
<?php
if(isset($_POST['youTyped'])){
$youTyped = $_POST['youTyped'];
}
echo $youTyped;
?>
Well, first of all, you didn't write your form correctly, the elements you want to send are not inside the form.
Second, your js function is not avoiding the form for being sent, so you're reloading the page when submitting the form.
So, to correct it, and get the answer, just change the code to:
<!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>Test Ajax</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<form id="myform">
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
<div id="answer"></div>
</form>
<script type="text/javascript">
$('#myform').submit(function(e){
// Avoid send the form as a normal request
e.preventDefault();
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function(response){
$("#answer").html(response);
}
});
});
</script>
</body>
</html>
One last thing. To test it, when you're sending and receiving AJAX, if you're using Chrome you can use the development tools to know if you're sending correctly the requests. Just press F12, and then go to Network tab. If you're using correctly AJAX, you'll see how new lines are added when you press the submit button:
You need to return false on form submit. The form is being submited before ajax request. Also add a closing tag for form.
<script type="text/javascript">
$('#myform').submit(function () {
var youTyped = $("#youTyped").val();
var data = {
youTyped: youTyped
};
$.ajax({
type: "POST",
url: "scripts/ajaxTest.php",
data: data,
success: function (response) {
$("#answer").html(response);
}
});
return false;
});
</script>
Try if this code is working:
<body>
<input type="text" id="youTyped" value=""/>
<input type="submit" id="submit" value="Submit">
<div id="answer"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var youTyped = $("#youTyped").val();
$.post('scripts/ajaxTest.php',{"youTyped" : youTyped},function(response)
{
$("#answer").html(response);
});
});
});
</script>
</body>
</html>
<!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>Test Ajax</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$('#myform').submit(function(event){
event.preventDefault();
var youTyped = $("#youTyped").val();
var data = {youTyped:youTyped};
$.ajax({
type: "POST",
url: "ajaxTest.php",
data: data,
success: successMsg,
error: errorMsg
});
});
function successMsg(response){
alert(response);
$("#answer").html(response);
}
function errorMsg(){
alert("Invalid Ajax Call");
}
</script>
</head>
<body>
<form id="myform" />
<input type="text" id="youTyped" value=""/>
<input type="submit" value="Submit">
<div id="answer"></div>
</body>
</html>
As I toyed with the idea, thought that this would make a good addition/contribution to the question.
I added and modified a few things.
One of which being:
If nothing was typed into the form input field, it would return "You typed: Nothing".
PHP:
<?php
if(!empty($_POST['youTyped'])){
$youTyped = $_POST['youTyped'];
echo "You typed: " .$youTyped;
}
else if (empty($_POST['youTyped'])){
echo "You typed: Nothing";
}
?>
I have an HTML file that has a form with two fields. These fields' value should be posted to a PHP and this PHP should be fetched from the HTML using JQuery. This is what I implemented.
My HTML file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#first").load("result_jquery.php");
});
});
</script>
</head>
<body>
<div id="first"></div>
<div>
<form method="POST" id="myForm">
Name: <input type="text" name="name"/><br/>
Number: <input type="text" name="number"/><br/>
<button>submit</button>
</form>
</div>
</body>
This is my result_jquery.php
<?php
$n = $_POST["name"];
echo "hello ".$n;
?>
When I click the submit button, the hello is getting printed. But the name is not getting printed. Can you please help me with this. I don't know where I am going wrong.
I think that the use of the button element is the worry and the code that i will put now it is working properly as you need so try this and tell me the result :)
<!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>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$("#first").load("result_jquery.php",{'namee':n,'number':nb},function(data){});
});
});
</script>
</head>
<body>
<div id="first"></div>
<div>
<form method="POST" id="myForm">
Name: <input type="text" name="namee"/><br/>
Number: <input type="text" name="number"/><br/>
<input type="button" value="Submit" id="button" />
</form>
</div>
</body>
</html>
copy this code:
<script type="text/javascript">
$(document).ready(function() {
$("#send").click(function() {
$.ajax({
type: "POST",
data : "name="+$( '#name' ).val(),
url: "result_jquery.php",
success: function(msg) {
$('#first').html(msg);
}
});
});
});
</script>
change this in form
<form method="POST" id="myForm">
Name: <input type="text" id="name" name="name"/><br/>
Number: <input type="text" id="number" name="number"/><br/>
<input type="button" id="send" value="Submit">
</form>
just try that and tell me the result :)
var n = $('[name="name"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'name':n,'number':nb},function(data){});
Note try to change the element name for the name field from "name" to "namee" and apply changes as needed look like this :
var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'namee':n,'number':nb},function(data){});
and the result_jquery.php file :
<?php
$n = $_POST["name"];
echo "hello ".$n;
?>
From the jQuery documentation on load:
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success) except that it is a
method rather than global function and it has an implicit callback
function. When a successful response is detected (i.e. when textStatus
is "success" or "notmodified"), .load() sets the HTML contents of the
matched element to the returned data. This means that most uses of the
method can be quite simple:
You are performing a HTTP GET with that method, and not a POST.
My suggestion would be if you want to send an AJAX request to your server with information in it, get used to using the long form jQuery AJAX:
$.ajax({
data: 'url=encoded&query=string&of=data&or=object',
url: 'path/to/server/script.php',
success: function( output ) {
// Handle response here
}
});
For more info, see jQuery documentation: http://api.jquery.com/jQuery.ajax/
i have a simple form where one one field is there which is random javascript file whose name ranges from 1 to 500000 so i have used rand function to populate its field without any issue
i want form to be automatically submitted after loading but i dont want pages to be refreshed and even i dont want field value to be changed after form is submitted. my code is very clear but dont know why it is not working
index.html
<!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=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<title>testing</title>
</head>
<body>
<script type="text/javascript" >
$(function() {
$("form1#form1").submit(function() {
var searchBox = $("#searchBox").val();
var dataString = 'searchBox='+ searchBox ;
if(searchBox=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "test34.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
<form method="post" name="form1" id="form1" enctype="multipart/form-data">
<input type="text" class="status" name="searchBox" id="searchBox" value="<?= "".rand(1,2889889).".js"; ?>">
<input class="button" type="submit" value="Submit" /></form>
</body>
</html>
test34.php
<?php
include('connect.php');
$title23 = $_POST['searchBox'];
mysql_query("insert into test (title) values('$title23')");
echo $title23;
?>
but it is not submitting the form automatically please advise
Your selector should probably look like this $("form#form1") instead of $("form1#form1")
After you've bound your submit method to the form, try triggering the submit method by doing this.
return false;
});
$("form1#form1").trigger('submit'); // Here
});
I'm learning how to integrate JQuery, AJAX and PHP together.
My problem is that my success function isn't getting any value from the parameter and just getting a '0'. I'm not really sure what I'm doing wrong either, but I have just been following this tutorial JQuery & PHP Tutorial and just copied how he got the value from the PHP code using echoes and a parameter variable r.
I have tried searching for the solution, but I'm not sure if any of the results are relevant to what I am doing. I tried following some of their advice but none seems to work (the promise thing for jQuery)
I hope someone can enlighten me what I am doing wrong as I am eager to learn more PHP and jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function () {
jQuery("form").submit(function(e) {
var input = $("#input").val();
var url = 'input=' + input;
$.ajax({
type: "POST",
url: "process.php",
data: url,
success: function(r) {
$("#output").text(function(r) {
return r;
});
}
});
e.preventDefault();
});
});
</script>
<title>Insert title here</title>
</head>
<body>
<form action="process.php" method="post">
Inputs:<br />
<textarea rows="15" cols="60" id="input" name="input">Some text...
</textarea><br /><br />
Start:
<input type="text" id="start" name="start" />
End:
<input type="text" id="end" name="end" /><br />
<input type="submit" id="submit" name="submit" value="Submit">
</form>
<p id="output">Output: Some Random Text</p>
</body>
</html>
PHP:
require 'parser.php';
$parser = new Parser();
#header('index.php');
$hash = $parser->parse($_POST['input']);
$keys = array_keys($hash);
foreach($keys as $key) {
echo "$key ->";
$dests = $hash[$key];
foreach($dests as $dest) {
echo " $dest";
}
echo "<br />";
}
?>
<script>
$(function () {
jQuery("form").submit(function(e) {
var input1 = $("#input").val();
var url = {'input' : input1}; // a little change to the data parameter
$.ajax({
type: "POST",
url: "process.php",
data: url,
success: function(r) {
// $("#output").text(r); //<--- changed to this
$("#output").html(r); // this is better as you output html
}
});
e.preventDefault();
});
});
</script>
for jquery text(), use the return value from the server directly. If you are outputting html use jquery html() instead