Hello can you guys give a quick tip on what I'm doing wrong here.
I want to pass $_POST['url'] to a php file via ajax.
ajax:
<script>
$('#checkUrl').click(function() {
$('#loader').css("display","block");
$('#form').submit(function (e) {
e.preventDefault();
$.ajax({
url: 'example.php',
data: {url:'<?php echo $_POST['url']; ?>'},
type: 'POST',
success: function(data) {
$('#loader').css("display","none");
$('#reponse').replaceWith(data);
}
});
});
});
</script>
Form
<form id="form" method="post">
<input type="search" size="35" id="url" name="url" placeholder="www.myblogurl.com" class="btn btn-mod btn-gray btn-medium btn-round" />
<span class="hidden-xs"> </span>
<input type="submit" value="Submit" id="checkUrl" class="btn btn-mod btn-medium btn-round mb-xs-10">
</form>
I know I'm calling the php file, as I can var_dump random text from it. But var_dump($_POST); is empty.
array(1) { ["url"]=> string(0) "" }
your code should be
<script>
//$('#checkUrl').click(function() { // no need to use click event here enough to use submit for form
$('#form').submit(function (e) {
$('#loader').css("display","block");
e.preventDefault();
$.ajax({
url: 'example.php',
data: {url:$(this).find('#url').val()}, // while ID must be unique you can use $('#url').val(); directly
type: 'POST',
success: function(data) {
$('#loader').css("display","none");
$('#reponse').replaceWith(data);
}
});
});
//});
</script>
and in php
<?php
echo $_POST['url'];
?>
Try this
data: {url:$('#url').val()},
rather then echoing php variable you can get url using jQuery.
Related
My ajax successfully return the value but my problem is I can't use the value to my function. How do I convert this div to a value?
<?php
echo $ajax_user_id = '<div id="result"></div>'; //value can display here
getName($ajax_user_id); //value wont work here
?>
<form method="post" id="registerSubmit">
<input type="text" name="user_id" id="user_id">
<button id="submit" type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "test.php",
method: "post",
data: $(this).serialize(),
dataType: "text",
success: function(Result) {
$('#result').text(Result)
}
})
});
});
</script>
You can't use it that way.because jQuery is a scripting language which runs in browser when DOM is fully loaded and elements are available to make selectors.While php is server side language which runs on server way before page load.anyway to fulfill your need you can try something like this.
<form method="post" id="registerSubmit">
<input type="text" name="user_id" id="user_id">
<button id="submit" type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$("#registerSubmit").submit(function( e ) {
e.preventDefault();
$.ajax({
url: "test.php",
method: "post",
data: $(this).serialize(),
dataType: "text",
success: function(Result) {
$('#result').text(Result);
getNameAjax(Result);
}
})
});
});
function getNameAjax(val)
{
$.ajax({
type: "POST",
url: GetNameAjax.php,
data:{'user_id':val},
success: function(res){
$('#name').html(res);
}
});
}
</script>
GetNameAjax.php file you can write like this
$ajax_user_id=$_POST['user_id'];
function getName($ajax_user_id)
{
return "name on the basis of id";
}
I am trying to submit data to the database using AJAX. I have one array and I have to pass the value of the array to PHP using AJAX to display all the related records.
<form id="search-form" method="POST">
<input value="4869" name="compare_id[]" type="hidden">
<input value="4884" name="compare_id[]" type="hidden">
<input value="5010" name="compare_id[]" type="hidden">
<input type="button" id="search-button" name="search-button" value="search">
</form>
<div id="response"></div>
AJAX
<script>
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: 'POST',
url: 'response.php',
data: $('#search-form').serialize(),
dataType: 'json',
success: function(response) {
$('#response').html(response);
//alert(response);
}
});
});
});
</script>
PHP
$sql='SELECT Name, Email FROM request WHERE Id IN (' .( is_array( $_POST['compare_id'] ) ? implode( ',', $_POST['compare_id']) : $_POST['compare_id'] ).')';
$records = array();
$query=$conn->query($sql);
if ($query->num_rows > 0) {
while($row=$query->fetch_assoc()){
$records[]=$row;
}
}
echo json_encode($records);exit();
HTML
<form id="search-form" method="POST">
<input value="4869" name="compare_id[]" type="hidden">
<input value="4884" name="compare_id[]" type="hidden">
<input value="5010" name="compare_id[]" type="hidden">
<input type="button" id="search-button" name="search-button" value="search">
</form>
<div id="response"></div>
JS
<script>
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: 'POST',
url: 'response.php',
data: $('#search-form').serialize(),
dataType: 'json',
success: function(response) {
$('#response').html(response);
}
});
});
});
</script>
PHP
var_dump($_POST['compare_id']);
// it is already an array of ids. You can do whatever you want with it.
change your script as below. Your output is in array so you cant add it in div directly
<script>
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: 'POST',
url: 'action.php',
data: $('#search-form').serialize(),
dataType: 'json',
success: function(response) {
$('#response').html();
for(data in response) //loop over your data
{
$('#response').append(response[data].Email); //add email
}
//alert(response);
}
});
});
});
</script>
There are errors in your code. A good way to debug this is to print_r your POST value in your php script.
First $_POST["All"] does not exist. It is all. (php)
Second, you send a GET request not a POST one. (jQuery)
Third, format your date into json. A good way to do this is to create a variable right after compare_id.push, it's more readable, as so :
var json_data = {"my_array" : [1,2, "bonjour", 4]};
Your problem is mostly related to "how to debug". I think you should print what's happening along the way to figure out what's happening.
How can I send input values through AJAX on button click? My code is below. Thanks in advance.
while
{
<form class="commentform">
<input type="hidden" class="proid" name="proid" value="<?=$rr['id']?>">
<input type="text" class="form-control" name="comval" placeholder="Write a comment.." autocomplete="off">
<button class="btn btn-post" type="button">Post</button>
</div>
</form>
}
$(document).ready(function() {
$(document).on('click', '.btn-post', function(){
var thePostID = $(this).val;
$.ajax({
url: 'fetch_comments.php',
data: { postID: thePostID },
type: 'POST',
success: function() {
alert(data);
}
});
Firstly, the correct method is $(this).val(), not just $(this).val.
Secondly, you can simplify your code by getting the data from the closest form element using serialize(). Try this:
$(document).on('click', '.btn-post', function() {
var $form = $(this).closest('form');
$.ajax({
url: 'fetch_comments.php',
data: $form.serialize(),
type: 'POST',
success: function() {
alert(data);
}
});
});
$("form").serialize();
Serialize a form to a query string, that could be sent to a server in an Ajax request.
I have below code. when I click reply link, it will show a comment box.
I want 2 points.
or give me best way to do my work.
When 1 comment box open other must be hide.
when I click on send button correct value should send vie serialize values.
These are the codes
PHP code
<?PHP
for($i = 1; $i < 10; $i++)
{
?>
<div>comments text etc etc...</div>
Reply
<div class="reply-comment-form" style="display:none;">
<form class="comment_form" method="post">
<textarea name="comment_box" rows="6" class="span10"></textarea> <br /><br />
<input type="button" onClick="send_comment()" class="btn btn-primary" value="send" />
</form>
</div>
<?PHP
}
?>
Jquery code
<script>
$(function(){
$('.reply-comment').on('click', function(e){
e.preventDefault();
$(this).next('.reply-comment-form').show();
});
});
function send_comment()
{
$.ajax({
type: "POST",
data : $('.comment_form').serialize(),
cache: false,
url: 'test.php',
success: function(data){
}
});
}
</script>
test.php file no need. I am checking values through firebug.
please help me to clarify this problem.
or give me best way to do my work.
I am stuck since 2 days.
Thank you for your valuable time.
For the first one
$('.reply-comment').on('click', function(e){
e.preventDefault();
// Hide others
$(".reply-comment-form").hide();
// Show the one which is required
$(this).next('.reply-comment-form').show();
});
And for second, do a .on("submit"... on the form and it will serialize the right input fields only.
UPDATE:
<form class="comment_form" method="post">
<textarea name="comment_box" rows="6" class="span10"></textarea> <br /><br />
// Change type to submit and remove onclick
<input type="submit" class="btn btn-primary" value="send" />
</form>
jQuery:
$(".comment_form").on("submit", function(e){
e.preventDefault(); // Here
var _data = $(this).serialize();
$.ajax({
type: "POST",
data : _data,
cache: false,
url: 'test.php',
success: function(data){
console.log(data);
}
});
});
I found a solution. #void helped me for this.
$(".test").on("click", function(){
var _data = $(this).parent().serialize();
$.ajax({
type: "POST",
data : _data,
cache: false,
url: 'test.php',
success: function(data){
}
});
});
Thanks!
I'm trying to send an input value to a php script and have the returned value posted to a div, using ajax, but I can't seem to get this right. Any help/suggestions would be appreciated. Thanks!!
This is what I have by now, but console says: "Failed to load resource: the server responded with a status of 404 (Not Found)".
test1.php:
<script>
$.ajax({
type: 'POST',
url: 'test2.php',
data: {url: $('#id1').val()},
success: function (data)
{
$(document).ready(function(){$("#content").load("test2.php");});
}
});
</script>
<form name="input">
<input type="text" id="id1">
<input type="submit">
</form>
<div id="content"></div>
test2.php:
<?php
$string=$_POST['id1'];
require_once('connect.php');
$inf = "SELECT * FROM `comments` WHERE date='$string'";
$info = mysql_query($inf);
while($info2 = mysql_fetch_object($info)) {echo $info2->username.$info2->date;}
?>
<script>
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'test2.php',
data: {id1: $('#id1').val()},
success: function(data)
{
$("#content").html(data);
}
});
});
});
</script>
<form name="input">
<input type="text" id="id1">
<input type="submit" id="submit">
</form>
<div id="content"></div>
When you submit the ajax request, you're already submitting your content to test2.php, so you don't need to load it again. In the success function, you can append the result to the div from the callback.
$(document).on('click','#submit',function(e) {
e.preventDefault();
$.post('test2.php',{url: $('#id1').val()},function(data){
$("#content").html(data);
}
});
});
404 (Not Found) Error is for page not found. Please make sure that file test2.php is exist in same folder. Check url.
Also you can copy the URL from console and paste it in the browser URL to check the url correct or incorrect.
jQuery
<script>
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'test2.php',
data: {id1: $('#id1').val()},
success: function(data)
{
$("#content").html(data);
}
});
});
});
</script>
HTML
<form name="input">
<input type="text" id="id1">
<input type="submit" id="submit">
</form>
You could try this:
<script>
$('#submitBtn').on('click',function(){
$.ajax({
type: 'POST',
url: 'test2.php',
data: {url: $('#id1').val()},
success: function (data)
{
$("#content").html(data);
}
});
return false;
});
</script>
<form name="input">
<input type="text" id="id1">
<input id="submitBtn" type="submit">
</form>
<div id="content"></div>