I've been trying to learn basic AJAX and Javascript by following various tutorials and examples online, but I've hit a wall. I'm trying to write a simple script to take user-input from a form using AJAX and submit it to a PHP script, which then just echos the input.
All I can really tell is that whatever is being entered is not going through, but I'm not at the point yet where I can say why. I've tried with both POST and GET, and with various dataTypes, with the same result. I'm certain that I'm doing something wrong or misunderstanding something, but I'm not sure what.
HTML/ AJAX
<form id="my_form">
word <input type ="text" id="word1"/><br/>
<input type="submit">
</form>
<script>
$(document).ready(function(){
$("#my_form").on(function(e){
e.preventDefault();
var verb = $("word1").val();
$.ajax({
url: "testrun.php",
data: "verb",
type: "POST",
});
});
});
</script>
PHP
if (isset($_POST['verb'])){
$x= $_POST['verb'];
echo $x;
}else {
echo "not working";
}
EDIT: I've tried a few of the suggestions thus far, copying and pasting them directly, and none of them have actually done anything that I can see. I think I'm starting to understand a bit more about how AJAX should work, based on the responses, but it's still not reaching the PHP for some reason. I've tried both with the AJAX/HTML in a separate file that calls to the testrun.php script and with putting everything into the testrun.php file and basically having it call itself with the AJAX, but neither approach has achieved anything.
If the AJAX that I've gotten from the responses is fine, then am I misunderstanding something in how the PHP should be set up in order to actually receive the POST data? I'm still rather lost.
Three changes:-
1.var verb = $ ("word1").val(); need to be var verb = $ ("#word1").val();because its id (word1)
2.data: "verb", needs to be data: {"verb":verb},
3.form submission need to be correct so code given below (missing submit):-
Correct code:-
$(document).ready(function(){
$("#my_form").on('submit',function(e){ // check here you have one missing `submit`
e.preventDefault();
var verb = $("#word1").val(); // remove space between `$` and `(`
$.ajax({
url: "testrun.php",
data: {"verb":verb},
type: "POST",
});
});
});
You can not send data as data: "verb", in ajax. you need to send your data in params.
Second, you can not get the value of word1 input as $("word1").val(); you need to use # for get input by IDs.
Example:
$(document).ready(function(){
$( "#my_form" ).submit(function( e ) { //CHANGED using submit event.
e.preventDefault();
var verb = $("#word1").val(); //CHANGED
$.ajax({
url: "testrun.php",
data: "verb="+verb, //CHANGED
type: "POST",
});
});
});
you miss to give the # sign in var verb = $("word1").val();
and use a variable just as a variable to the data like data: {"your_var_name" : verb}