Send form data with jquery ajax json

Question

I m new in PHP jquery I would like to ask how to send json data from a form field like  name  age  etc  with ajax in a json format  Sadly I can t found any relevant information about this it s even possible to do it dynamically  Google searches only gives back answers like build up the data manually  like  name  X Y  age  32  and so on   Is there anyway to do that   Thanks for the help   Edit    lt form action  test php  method  post  gt  Name   lt input type  text  name  name  gt  lt br gt  Age   lt input type  text  name  email  gt  lt br gt  FavColor   lt input type  text  name  favc  gt  lt br gt   lt input type  submit  gt   lt  form gt

User · Answer

Sending data from formfields back to the server (php) is usualy done by the POST method which can be found back in the superglobal array $_POST inside PHP. There is no need to transform it to JSON before you send it to the server. Little example:

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST')
{
    echo '<pre>';
    print_r($_POST);
}
?>
<form action="" method="post">
<input type="text" name="email" value="[email protected]" />
<button type="submit">Send!</button>

With AJAX you are able to do exactly the same thing, only without page refresh.

User · Answer

here is a simple one  here is my test php for testing only   lt  php     this is just a test   send back to the ajax request the request  echo json encode   POST     here is my index html   lt  DOCTYPE html gt   lt html gt    lt head gt    lt  head gt   lt body gt    lt form id  form  action    method  post  gt  Name   lt input type  text  name  name  gt  lt br gt  Age   lt input type  text  name  email  gt  lt br gt  FavColor   lt input type  text  name  favc  gt  lt br gt   lt input id  submit  type  button  name  submit  value  submit  gt   lt  form gt       lt script src  https   ajax googleapis com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt   lt script gt        document  ready function               click on button submit             submit   on  click   function                   send ajax               ajax                   url   test php      url where to submit the request                 type    POST      type of action POST    GET                 dataType    json      data type                 data       form   serialize       post data    get data                 success   function result                           you can see the result from the console                        tab of the developer tools                     console log result                                      error  function xhr  resp  text                        console log xhr  resp  text                                                          lt  script gt   lt  body gt   lt  html gt    Both file are place in the same directory

User · Answer

The accepted answer here indeed makes a json from a form  but the json contents is really a string with url-encoded contents   To make a more realistic json POST  use some solution from Serialize form data to JSON to make formToJson function and add contentType   application json charset UTF-8  to the jQuery ajax call parameters     ajax       url   test php       type   POST       dataType   json       data  formToJson    form         contentType   application json charset UTF-8

User · Answer

You can use serialize   like this     ajax     cache  false    url   test php     data     form   serialize      datatype   json     success  function data

[javascript] Send form data with jquery ajax json

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to json