Please help us to sort out the problem. On the local machine (XAMPP) writing a small site. There is a PHP page on which written form by sending a script JQuery. In writing the script itself is not strong, so he took from the Internet and adapted to fit their needs. But the problem is that when the form is submitted the form itself does not see the script JQuery and just trying to submit a form via a GET request, even though I specify POST.

To check and write a simple form handler. The script took from the network. But even this form of trying to go as a GET. As far as I understand, it happens because the form does not see the script and by default sends as a GET.

UPD: links to JQuery on page connected:

link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel= "stylesheet" integrity= "sha384-EVSTQN3 /azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin= "anonymous ">
script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl + NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP + JcXn /tWtIaxVXM" crossorigin= " anonymous ">
/script >
script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" >
/script >

Please help us understand what went wrong.


form id= "form1" >
input type= "text" name= "imp1" />
button type= "submit" name= "ok" >
send <
/Button >
/Form >

The script JQuery:

$ ( "# form1"). Submit (function (event) {
    $ Data= $ (this) .serialize ();
    $ .Ajax ({
      url: "form1proc.php",
      type: "POST",
      data: $ data,
      dataType: "html",
      success: function (data) {

The handler PHP:

$ f1= $ _ POST [ 'imp1'];
echo $ f1;

Well, probably not Type: "POST", and Method: "POST"

Simon2021-09-04 19:04:38

@Simon tried and so, and as you say. But the result is all the same, does not work.

giovannigio1112021-09-04 19:06:34

@ Nikolay, took advantage of your option -everything goes great! Thanks! Tell me, please, if two files are transmitted in the form in two input, your script version will work?

giovannigio1112021-09-04 21:26:05
  • Answer # 1
    $ ("# Form1"). Submit (Function (EVENT) {
      event.preventDefault ();
  • Answer # 2

    Script must be after the form, check

    Upd: Type: 'Post' will not work, as the commentator noted correctly. It is necessary to write Method: 'POST'

    Also send data as FormData

    Const Data= New Formdata (this);

    That's what happens

    $ ("# Form1"). Submit (Function (EVENT) {
      Const $ Data= New Formdata (this);
      $.ajax ({
         URL: "Form1Proc.php",
         Method: "POST",
         Data: $ Data,
         Datatype: "HTML",

    Yes, that is right. Script at the very end, after form.

    giovannigio1112021-09-04 19:07:15

    Unfortunately, everything is the same. When the button is pressed, nothing happens, the query is added to the address bar, as with a get request. Tell me, please, even if I have a script or handler incorrect, still there should be an attempt to send a form? Now it seems that the form simply ignores the script.

    giovannigio1112021-09-04 19:33:41

    If you remove the jQuery script and specify a direct handler form, then everything works correctly.

    giovannigio1112021-09-04 19:40:19

    Then add the Encype= "Multipart /Form-Data" attribute to Form

    Datatype in this case

    Oleg Kosnyrev2021-09-04 19:50:21