How can i post a json object with ajax?

Question

im a beginner coder and i want to make a contact form sending a json object to another php file. This is my current code

[...]
<body>
        <form id="form" class="formular">
            <div class="input-group">
                <input id="phone" type="tel" class="form-control" name="phone" placeholder="phone" required>
            </div>
            <br>
            <div class="input-group">
                <input type="email" id="email" class="form-control" name="email" placeholder="mail" required>
            </div>
                <br>
            <div class="input-group">
                <textarea id="message" class="form-control" placeholder="message..." required></textarea>
            </div>
            <button id="form_submit_button" name="form_submit_button">Send!</button>
        </form>
    </body>
</html>


<?php
?>

<script>

    jQuery(document).ready(function($) {
        $("#form_submit_button").click(function (event) {
            event.preventDefault();

            $.ajax({
                type: 'POST',
                url: 'test.php',
                data: JSON.stringify({ Form: $('#form').val }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
            })



        });
    });



</script>

The test.php simly is: var_dump($_POST); Of course it's always 0. Can someone help me please :)

not realy, i don't understand how most of it works.... :/ – Block y Dec 17 '19 at 18:47 — Block y, Dec 17 '19 at 18:47

score 1 · Answer 1 · answered Dec 17 '19 at 19:12

What you're trying to do is to send the contents of the form using AJAX. As pointed out by NVRM, you don't need to use jQuery to do this. You can use the native fetch function.

const form = document.getElementById('form');

form.onsubmit = (e) => {
  e.preventDefault();
  
  const phone = document.getElementById('phone').value;
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;

  const data = new FormData();
  data.append('phone', phone);
  data.append('email', email);
  data.append('message', message);
  
  fetch("test.php", {
    method: "POST",
    body: data
  });
}

<form id="form" class="formular">
  <div class="input-group">
    <input id="phone" type="tel" class="form-control" name="phone" placeholder="phone" required>
  </div>
  <br>
  <div class="input-group">
    <input type="email" id="email" class="form-control" name="email" placeholder="mail" required>
  </div>
  <br>
  <div class="input-group">
    <textarea id="message" class="form-control" placeholder="message..." required></textarea>
  </div>
  <button id="form_submit_button" name="form_submit_button">Send!</button>
</form>

First, you put the values of each of the form fields into variables, and then insert them into a FormData object. Then use the fetch function to send the FormData object to the server where it can be accessed from the $_POST variable.

What you had originally was $('#form').val() which doesn't return anything because #form is the form element, which doesn't have a value.

score -1 · Answer 2 · answered Dec 17 '19 at 18:49

-1

Try instead $('#form').serialize(). You may also use FormData.

answered Dec 17 '19 at 18:49

Muhammad Hassan Khan

149
5

score -1 · Answer 3 · answered Dec 17 '19 at 18:56

You are not forced to use jquery, here is a possible way using fetch native javascript.

document.getElementById("form_submit_button").onmousedown = () => {
  fetch('https://httpbin.org/post', {
    method: 'post',
    body: JSON.stringify({"phone": phone.value, "email": email.value, "message": message.value})
  }).then(a=>a.json())
    .then(a => console.log(a))
}

<form id="form" class="formular">
            <div class="input-group">
                <input id="phone" value="555777">
            </div>
            <br>
            <div class="input-group">
                <input type="email" id="email" value="lol@gov.com">
            </div>
                <br>
            <div class="input-group">
                <textarea id="message">
                Message in textarea 
                </textarea>
            </div>
           
</form>

<button id="form_submit_button">Send!</button>

How can i post a json object with ajax?

3 Answers3