У меня есть форма PHP, которая перезагружается после отправки. Я использовал Ajax, чтобы остановить его перезагрузку, и теперь он не передает данные в базу данных. Я что-то здесь упускаю? Как я уже сказал, если я удаляю AJAX, он работает нормально, но страница перезагружается. Я знаю, что делаю очень маленькую ошибку.

Форма

<form class="form-horizontal" method="post" role="form">
  <div class="form-group">
    <div class="col-sm-6">
       <label for="name" class="control-lable" style="font-size:15px;">Name* :</label>
       <input type="text" class="form-control" name="query_name" id="name" required>
    </div>
    <div class="col-sm-6">
       <label for="email" class="control-lable" style="font-size:15px;">Email* :</label>
       <input id="email" type="email" class="form-control" name="query_email" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <label for="comments" class="control-lable" style="font-size:15px;">Message*:</label>
      <textarea id="comments"  class="form-control" name="query_message" rows="5" required></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <input type="submit" class="btn btn-block btn-danger" name="contactus" value="Submit">
    </div>
  </div> 
</form>

AJAX

 jQuery(function($) {

    $('form').on('submit', function (e) {
      e.preventDefault();
      var str = $(this).serialize();

$.ajax({
       type: "POST",
       cache: false,
       data:str,
       url:window.location.origin+'/post-page/',
       success:function() {
         console.log('email sent');
         $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Thank you for posting query, You will be replied in next 24 hours</div>');
         $("form").trigger("reset");
       }
      });
    });
  });

PHP

  if(isset($_POST['contactus'])){

    $query_date = date('Y-m-d G:i:s');
    $query_name = strip_tags($_POST['query_name']);
    $query_email = strip_tags($_POST['query_email']);
    $query_message= strip_tags($_POST['query_message'], '<p><br>');

    $ins_query = $conn->prepare("INSERT INTO query (query_date, query_name, query_email, query_message) VALUES (?,?,?,?)");

    $ins_query->bind_param("ssss", $query_date, $query_name, $query_email, $query_message);

    $ins_query->execute();
    $ins_query->close();

   }
0
stack kid 27 Авг 2017 в 13:26

4 ответа

Лучший ответ

Вы не указываете расширение файла в ajax url. Изменить на your-php-form-handling-page.php

На странице form добавьте идентификатор в форму

<form class="form-horizontal" id="FrmSubmit" method="post" role="form">
<input type="hidden" name="path_uri" value="<?php echo get_template_directory_uri(); ?> id="path_uri">

На вашей ajax странице

jQuery(function($) {
    $("#FrmSubmit").submit(function(e) {
        e.preventDefault();
        var uri = $('#path_uri').val();

        $.ajax({
            type: "POST",
            url: uri+'/single-palliative.php',
            cache: false,
            data: $('#FrmSubmit').serialize(),
            success: function() {
                console.log('email sent');
                $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Thank you for posting query, You will be replied in next 24 hours</div>');
                $("#FrmSubmit").trigger("reset");
            }
        });
    });
});

В вашем filename.php

if(isset($_POST['query_name']) && isset($_POST['query_date']) && isset($_POST['query_email']) && isset($_POST['query_message'])){

    $query_date = date('Y-m-d G:i:s');
    $query_name = strip_tags($_POST['query_name']);
    $query_email = strip_tags($_POST['query_email']);
    $query_message= strip_tags($_POST['query_message'], '<p><br>');

    $ins_query = $conn->prepare("INSERT INTO query (query_date, query_name, query_email, query_message) VALUES (?,?,?,?)");

    $ins_query->bind_param("ssss", $query_date, $query_name, $query_email, $query_message);

    $ins_query->execute();
    $ins_query->close();

}

ОБНОВЛЕНИЕ . Добавлено скрытое поле в форме и изменение URI в URL AJAX.

1
Sreejith BS 28 Авг 2017 в 06:19

1.) дайте форме удостоверение личности:

<form class="form-horizontal" id="formsid" method="post" role="form">

2.) отредактируйте вашу Ajax-функцию с правильным путем к вашему файлу php, установите данные с идентификатором вашей формы.

    $.ajax({
       type: "POST",
       cache: false,
       data: $("#formsid").serialize(),
       url:path/to/phpfile.php,
       success:function() {
         console.log('email sent');
         $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Thank you for posting query, You will be replied in next 24 hours</div>');
         $("#formsid").trigger("reset");
       }
      });

3.) в PHP изменить if-оператор:

if(is_array($_POST) && isset($_POST)) {
    //your code
} else {
    throw new Exception('Post is empty'.var_dump($_POST));
}

Это должно работать!

0
N3wbie 27 Авг 2017 в 11:51
    $.ajax({
           type: "POST",
           cache: false,
           data:{query_name:'query_name',query_email:'query_email',query_email:'query_email'},
           url:window.location.origin+'/post-page/',
           success:function() {
             console.log('email sent');
             $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>Thank you for posting query, You will be replied in next 24 hours</div>');
             $("form").trigger("reset");
           }
          });
        });
      });

Вы должны добавить data: {<your data>} в ajax

-1
varman 27 Авг 2017 в 10:31

Попробуй это,

<form class="form-horizontal" method="post" role="form">
<input type="hidden" name="action" value="contactus">
  <div class="form-group">
    <div class="col-sm-6">
       <label for="name" class="control-lable" style="font-size:15px;">Name* :</label>
       <input type="text" class="form-control" name="query_name" id="name" required>
    </div>
    <div class="col-sm-6">
       <label for="email" class="control-lable" style="font-size:15px;">Email* :</label>
       <input id="email" type="email" class="form-control" name="query_email" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <label for="comments" class="control-lable" style="font-size:15px;">Message*:</label>
      <textarea id="comments"  class="form-control" name="query_message" rows="5" required></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <input type="submit" class="btn btn-block btn-danger" name="contactus" value="Submit">
    </div>
  </div> 
</form>

А потом,

if(isset($_POST['action']) && $_POST['action']=="contactus"){

    $query_date = date('Y-m-d G:i:s');
    $query_name = strip_tags($_POST['query_name']);
    $query_email = strip_tags($_POST['query_email']);
    $query_message= strip_tags($_POST['query_message'], '<p><br>');

    $ins_query = $conn->prepare("INSERT INTO query (query_date, query_name, query_email, query_message) VALUES (?,?,?,?)");

    $ins_query->bind_param("ssss", $query_date, $query_name, $query_email, $query_message);

    $ins_query->execute();
    $ins_query->close();

   }
0
vikash kumar tiwari 27 Авг 2017 в 19:03