Question posted in
You can find the official documentation here.

Jquery ajax – How can i post a json object with ajax?

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 🙂

Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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="[email protected]">
            </div>
                <br>
            <div class="input-group">
                <textarea id="message">
                Message in textarea 
                </textarea>
            </div>
           
</form>

<button id="form_submit_button">Send!</button>
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search