i'm really stuck in ajax,
i don't have problem with simply sending values using form tag to PHP file. but i want to make my program a bit more fancy using jquery and ajax. and i'm totally stuck for few days.
what i'm trying to do is when i click on some text (study progress in my code), it turns into an editing box and when i finish editing, it sends to variable "name" and update in PHP. so i have to somehow send the value in the editing box in ajax, but i keep having
" Undefined index: name "
i searched on google a lot, but i couldn't find the answer for me. can i get some help from here?
i want to put the values of what i edited to the variable name
; and want to check on server side.
how can i put the values of what i edited to variable name
and send to php in POST and check on server?
here is code that i made so far.
======HTML======
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/.../jquery/3.2.0/jquery.min.js"></script>
<div id="fullname">study progress</div>
<script>
$('#fullname').click(function(){
var name = $(this).text();
$(this).html('');
$('<input></input>')
.attr({
'type': 'text',
'name': 'fname',
'id': 'txt_fullname',
'size': '50',
'value': name
})
.appendTo('#fullname');
$("#txt_fullname").focus().val("").val(name);
});
$(document).on('blur','#txt_fullname', function(){
var name = $(this).val();
$.ajax({
type: 'POST',
url: 'practice_check.php',
data : { "name" : name },
success: function(){
$('#fullname').text(name);
alert(name);
location.replace("practice_check.php");
}
});
});
</script>
======PHP ( practice_check.php ) ======
<?php
$name = $_POST["name"];
echo $name;
?>
You were wrong. You need to specify the url and if you want to get data in PHP you need to add data. I made a simple code. You can check full detail at this link : http://api.jquery.com/jquery.ajax/
data Type: PlainObject or String or Array Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting
var name = 'abc';
$.ajax({
url: 'practice_check.php',
type: 'POST',
data: {name: name},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
first your ajax should be like this
$.ajax({
type: 'POST',
url: 'practice_check.php',
data : { "name" : name },
dataType: 'JSON',
success: function(response){
//response will be the output of practice_check.php
$('#fullname').text(name);
alert(response.data);
}
});
in you practice_check.php
$name = $_POST["name"];
// do your functions here .. then echo response like for example
if(strlen($name) < 3){ echo "oops invalid name"; }
else { echo "successfully checked with no errors"; }