M
M
Michael2020-04-16 21:31:16
WordPress
Michael, 2020-04-16 21:31:16

How to publish posts from an Ajax form on a WordPress site?

Hello!
What is the best way to publish posts from an Ajax form on a website page?
Any user can post. Authorized and not.
They fill in all the data in the form (name, price, floor, etc.), press the submit button, and all this appears on the site, on the same page as a post. Without admin moderation. This is such a test.
Posts can also be added by the admin from the admin panel.
These posts are registered as a separate Post type "Realty" (realty).
Custom fields are attached to them - by the ACF plugin.
The fields are: Photo, Name, Cost, Area, Floor, Address, City.
So far the following has been done: Post type Real Estate, Post type Cities, custom fields for these types of fields. These posts have been moved to the main page. The posts themselves are made through the admin panel. Pieces 12 ready. And they are displayed on the main page. Their Photos, Title, etc. are displayed. Cities have also been removed. An Ajax form has also been made, it is also displayed on the main page. It has all the required fields. (except for the photo so far). After filling out the form and clicking on the submit button, all data is displayed right there on the main page, just in the form of a list.
Now we still need to finish the following: (and I still don’t know how to do all this)
so that all the data from the form form the next post of the type Real Estate and this post appears on this page. Last. Well, accordingly, it should be stored in the database. And in the admin panel, we should also see it later. In the list of posts of this type. We will not touch the cities, we will manage with those that have already been made in the admin panel. Those. The user will only have to enter the Real Estate data.

The test site itself is here
https://89036797842.ru/test05/

Here is the form code for adding a property, and the form submission script

<!-- Форма для добавления объекта -->

<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="Название">
                  <input type="text" id="realty_area" class="form-control" placeholder="Площадь, кв.м.">
                  <input type="text" id="realty_cost" class="form-control" placeholder="Стоимость, руб.">
                  <input type="text" id="realty_address" class="form-control" placeholder="Адрес">
                  <input type="text" id="realty_living_area" class="form-control" placeholder="Жилая площадь, кв.м.">
                  <input type="text" id="realty_floor" class="form-control" placeholder="Этаж">
                  <input type="text" id="realty_city" class="form-control" placeholder="Город">
                  <button type="submit" class="btn btn-primary">Отправить</button>
              </div>
            </form>
        </div>
    </div>
</div>


<!-- Скрипт для отправки формы -->

<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>


And here is the form processing in the functions.php file

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 ('Имя: ' . $realty_name);
    echo ('Площадь: ' . $realty_area);
    echo ('Стоимость: ' . $realty_cost);
    echo ('Адрес: ' . $realty_address);
    echo ('Жилая площадь: ' . $realty_living_area);
    echo ('Этаж: ' . $realty_floor);
    echo ('Город: ' . $realty_city);
}

add_action('wp_ajax_nopriv_ajax_realty_add', 'ajax_form' );
add_action('wp_ajax_ajax_realty_add', 'ajax_form' );

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question