Serializing and Submitting a Form With Jquery and PHP

jQuery $.post() a form with .serialize() / Where are my params in PHP?

POST doesn't use the request URL to send the query string like GET does. POST instead sends the query string in the HTTP message body. When you type the query string into the browser, you are using method GET.

Here is an article from W3Schools about it.

That doesn't mean you should switch to using $.get necessarily though. There are drawbacks to using GET over POST, such as having a length limit or being less secure. Read the article to learn more.

To fix your code, you will have to choose which HTTP method suites your needs, and then align the jQuery and PHP code so that they both use the same method.

Serialize form data to PHP

In your PHP, you start off with this:

echo "1";

When using AJAX, an echo is the same as a return, so this is where your function stops. Remove all unnecessary echo's or your function will simply not continue.

Furthermore, you are using spaces in your HTML name attributes:

<input type="text" name="first name"> <!-- Incorrect -->

Use underscores instead or you will not be able to retrieve the value properly:

<input type="text" name="first_name"> <!-- Correct -->

Afterwards, $firstName = $_POST["first_name"]; is the correct way to retrieve your values in PHP.

How to post form serialize data using PHP?

Get rid of the object with formdata property and only send the serialized string and add the csrf to the end of it or add the csrf to the form as a hidden input and let it get serialized also in serialize()

$("#save").click(function() {
  var formData = $('#myForm').serialize();
  formData += '&csrf_test_name=' + csrf_token

  $.ajax({
    type: "POST",
    url: base_url + 'home/save',
    data: formData,
    success: function(response) {
      console.log(response);
      alert(response)
    }
  });
});

Then in php access the same names as in form.

$fomdata=$this->input->post();

$roomCount = $fomdata['room_count_new'];
$csrfToken = $fomdata['csrf_test_name'];

Can't retrieve jQuery serialized form data with PHP $_POST[] variable

use $(this).serializeArray() instead of $(this).serialize()

Reference:- https://api.jquery.com/serializeArray/

The difference between both:-https://stackoverflow.com/a/10430571/4248328

You need to do like below:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='contact'>
  <input type='text' name='modal_name' id='modal_name' />
  <input type='email' name='modal_email' id='modal_email' />
  <textarea name='modal_message' id='modal_message'></textarea>
  <input type="submit" value = "submit">
</form>

<script type="text/javascript">
$('#contact').on('submit', function(e) {
  e.preventDefault();
  if (modal_name && modal_email && modal_message) {
     var data = $(this).serializeArray();
     data.push({name: 'action', value: 'send_message'});
     $.post('query.php', data, function(response) {
      $('.modal').append(response);
    });
  }
});
</script>

And in php:-

<?php

if(!empty($_POST)){
    echo "<pre/>";print_r($_POST);
}
?>

It will output like this:-

<pre/>Array
(
    [modal_name] => sdsadsa
    [modal_email] => a@gmail.com
    [modal_message] => sadada
    [action] => send_message
)

Note:- if you want to use serialize()only then do like below:-

<script type="text/javascript">
$('#contact').on('submit', function(e) {
  e.preventDefault();
  if (modal_name && modal_email && modal_message) {
     var data = $(this).serialize()+ '&action=send_message';
     $.post('query.php', data, function(response) {
      $('.modal').append(response);
    });
  }
});
</script>

serialize a form and send the serialized data with ajax using POST method

    function insertStudent(data){
        $.ajax({
            url: 'process.php',
            data: data,
            type: 'POST',
            dataType: 'json',
            success: function(str){
                 $("#result").html(str);
            }
        });     
    }

And then print $_POST in your PHP file :)

submitting html form via jquery ajax() and serialize()

Use this - there have been a few syntax errors and the event has to be submit

 $(function(){
        $("#form1").submit(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

Use jQuery and ajax to send serialized form as value in data object to php

change javascript like:

$('#submit_project').click(function() {
    var form_data = {};
    $('#add_project_form').serializeArray().map(function(n){form_data[n.name] = n.value;});
    $.ajax({
        url: 'ajax_calls.php',
        type: 'POST',
        data: {
            add_project_call: true,
            form_data: form_data
        },
        success: function(addedResults) {
            console.log(addedResults);
        }
    });
});

change php file (ajax_calls.php) like:

if(isset($_POST['add_project_call'])) {
   $title = $_POST['form_data']['title'];
   $visible = $_POST['form_data']['visible'];
   echo $title;
}

jQuery post() with serialize and extra data

You can use serializeArray ^[docs] and add the additional data:

var data = $('#myForm').serializeArray();
data.push({name: 'wordlist', value: wordlist});

$.post("page.php", data);