How to publish posts from Ajax forms in your WordPress site?

Hello!
How to make posting from Ajax form on the page?
To publish any users. Authorized and not.
They score all the data in a form (name, price, floor, etc.) click the send button and it all appears on the website, on the same page in the form post. Without moderation by administrator. This is a test.
The posts may also add the admin from the admin panel.
These posts registered as a separate Post type "Property" (realty).
Them bolted Custom fields - ACF plugin.
Fields: Photo, Title, Price, Area, Floor, street Address, City.
At the moment, the following is done: Post type Property Post type, City, custom fields for these fields. Removed these posts on the main page. Posts made through the admin panel. 12 pieces ready. And they are displayed on the main. Withdrawn their Photos, Name, etc., are also displayed in the city. Even made Ajax form, it is displayed also on the main page. It has all the right boxes. (except for photos yet). After filling the form and clicking on submit button all the data displayed immediately on the main, just a list.
Now we have to finish the following: (and I don't know how to do it all)
to form all the data formed a regular post type Property and this post appeared on this page. Last. Well and, accordingly, it should be stored in the database. In the admin we also need then to see. In the list of posts of this type. We will not touch, do those already made in the admin area. Ie the User will be required to drive only the data of the Property.

The dummy website here
https://89036797842.ru/test05/

Here is the form code for adding the property and the script submit the form

<!-- Form to add the object -->

<div class="container">
 <div class="row">
 <div class="col-md-6 col-sm-12 offset-md-3">
 <form id="formAjaxAddPost">
 <div class="form-row">
 <input type="text" id="realty_name" class="form-control" placeholder="Name">
 <input type="text" id="realty_area" class="form-control" placeholder="Area sqm">
 <input type="text" id="realty_cost" class="form-control" placeholder="Cost, RUB.">
 <input type="text" id="realty_address" class="form-control" placeholder="Address">
 <input type="text" id="realty_living_area" class="form-control" placeholder="floor-space, sq. m.">
 <input type="text" id="realty_floor" class="form-control" placeholder="Floor">
 <input type="text" id="realty_city" class="form-control" placeholder="City">
 <button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>


<!-- The script to submit the form -->

the <script>
jQuery(function($){
$('#formAjaxAddPost').submit(function(event){
event.preventDefault();
 let realty_name = $("#realty_name").val();
 let realty_area = $("#realty_area").val();
 let realty_cost = $("#realty_cost").val();
 let realty_address = $("#realty_address").val();
 let realty_living_area = $("#realty_living_area").val();
 let realty_floor = $("#realty_floor").val();
 let realty_city = $("#realty_city").val();
$.ajax({
 type: "POST",
 // url: "https://89036797842.ru/test05/wp-content/themes/understrap-child/page-templates/ajax.php",
 // url: "/test05/wp-admin/admin-ajax.php",
 url: "https://89036797842.ru/test05/wp-admin/admin-ajax.php",
 data: {
 action: 'ajax_realty_add',
 realty_name: realty_name,
 realty_area: realty_area,
 realty_cost: realty_cost,
 realty_address: realty_address,
 realty_living_area: realty_living_area, 
 realty_floor: realty_floor, 
 realty_city: realty_city
},
 success: function (response) {
$('#ajax_div_response').html(response);
}
});
});
});
</script>


But processing the forms in the file functions.php

function ajax_form(){
 // https://inprocess.by/blog/otpravka-formy-ajax-v-wordpress/ 
 $realty_name = $_REQUEST['realty_name'];
 $realty_area = $_POST['realty_area'];
 $realty_cost = $_POST['realty_cost'];
 $realty_address = $_POST['realty_address'];
 $realty_living_area = $_POST['realty_living_area'];
 $realty_floor = $_POST['realty_floor'];
 $realty_city = $_POST['realty_city'];

 echo ('Name:' . $realty_name);
 echo ('Area:' . $realty_area);
 echo ('Value:' . $realty_cost);
 echo ('Location:' . $realty_address);
 echo ('total area:' . $realty_living_area);
 echo ('Floor:' . $realty_floor);
 echo ('City:' . $realty_city);
}

add_action('wp_ajax_nopriv_ajax_realty_add', 'ajax_form' );
add_action('wp_ajax_ajax_realty_add', 'ajax_form' );
April 19th 20 at 12:24
0 answer

Find more questions by tags WordPressAJAX