AJAX does not send user input from a form to a PHP script

Question

I am trying to learn basic AJAX and Javascript by following various tutorials and examples on the Internet, but I hit the wall. I am trying to write a simple script to take user input from a form using AJAX and submit it to a PHP script, which then simply re-phrases the input.

All I really can say is that everything that is entered does not work, but I still can not say why. I tried with both POST and GET, and with different data types, with the same result. I’m sure 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: , , , . , , AJAX , , - PHP. AJAX/HTML , testrun.php script testrun.php, AJAX, ,

AJAX, , , - , PHP POST? .

Answer 1

:

1. var verb = $ ("word1").val(); var verb = $ ("#word1").val();, id (word1)

2. data: "verb", data: {"verb":verb},

3. , ( submit): -

: -

$(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",
        });
   });
});

Answer 2

data: "verb", ajax. params.

-, word1 $("word1").val();, # .

:

$(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",
        });
    });
});

Answer 3

# var verb = $("word1").val();

data data: {"your_var_name" : verb}

Answer 4

• # foe id word1.
• .on() . submit, submit

• . $_POST['verb']

  $(document).ready(function ()
  {
      $("#my_form").on('submit', function (e)
      {
          e.preventDefault();
          var verb = $("#word1").val();
          $.ajax({
              url: "testrun.php",
              data: {verb: verb},
              type: "POST"
          });
      });
  });
  

Answer 5

:

var verb = $("#word1").val();  //Don't forget to add #
$.ajax({
    url: "testrun.php",
    data: {"verb":verb},
    type: "POST",
});

verb - , !

The correct answer is HERE from Anant

Answer 6

Try this ...

$.ajax({
  type: "POST",
  url: "testrun.php",
  data: "paramname=value",  // access in php $_POST['paramname']
  success: function(data){
    // if page request is success
  },
  error: function(data){
    // if page request failes
  }
});

Run code