Ошибка в ajax запросе к форме

227

23 декабря 2017, 07:09

Добрый день всем, ребят, не могу понять в чем проблема, очевидно имеет место быть какая то ошибка в ajax запросе, подскажите пожалуйста где я опростоволосился...

ЗЫ. если форме просто указать ссылку к экшену, все отрабатывает корректно

$( document ).ready(function() {
      $("#btn").click(
          function () {
              sendAjaxForm('ajax_form', 'https://www.site.com/lds/action_ajax_form.php');
              $('form').find("input[type=text], textarea").val("");
              return false;
          }
      );
      function sendAjaxForm(ajax_form, url) {
          jQuery.ajax({
              url: url,
              type: "POST",
              dataType: "html",
              data: jQuery("#" + ajax_form).serialize(),
              contentType: "application/x-www-form-urlencoded;charset=UTF-8",
              success: function (response) {
                  result = jQuery.parseJSON(JSON.stringify(response));
                  alert('success');
              },
              error: function (response) {
                  result = jQuery.parseJSON(JSON.stringify(response));
                  alert('error');
              }
          });
      }
  });

 <form class="form first" enctype="multipart/form-data"  id="ajax_form" method="POST">
          <div class="form-input input-field">
              <input type="text" name="name" id="name1" autocomplete="off">
              <label for="name1" class="input-title">Enter Your Name</label>
              <div class="error-message">The name can't contain symbols and digits</div>
          </div>
          <div class="form-input input-field">
              <input type="email" name="email" id="email1" autocomplete="off">
              <label for="email1" class="input-title">Enter Your Email</label>
          </div>
          <div class="form-input input-field">
              <input type="tel" id="phone1" name="phone" class="phoneNumber" autocomplete="off">
              <label for="phone1" class="input-title">Your Phone</label>
          </div>
          <div class="form-input input-field">
              <textarea id="details1" name="details" rows="1" class="resizible-textarea"></textarea>
              <label for="details1" class="input-title">Project Details / Questions</label>

        </div>
          <div class="form-button">
              <button type="submit"  id="btn" class="button button_green button_round form-button text-center"><span class="button_text">send</span>
                  <div class="sending-preloader">
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                      <div></div>
                  </div>
              </button>
          </div>
      </form>

Answer 1

 $(document).ready(function () {
        $("#ajax_form").on('submit', function (event) {
            event.preventDefault();
            event.stopPropagation();
            sendAjaxForm('ajax_form', 'https://www.site.com/lds/action_ajax_form.php');
            $('form').find("input[type=text], textarea").val("");
            return false;
        });
        function sendAjaxForm(ajax_form, url) {
            jQuery.ajax({
                url: url,
                type: "POST",
                dataType: "html",
                data: jQuery("#" + ajax_form).serialize(),
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                success: function (response) {
                    result = jQuery.parseJSON(JSON.stringify(response));
                    alert('success');
                },
                error: function (response) {
                    result = jQuery.parseJSON(JSON.stringify(response));
                    alert('error');
                }
            });
        }
    });

<form class="form first" id="ajax_form">
    <div class="form-input input-field">
        <input type="text" name="name" id="name1" autocomplete="off">
        <label for="name1" class="input-title">Enter Your Name</label>
        <div class="error-message">The name can't contain symbols and digits</div>
    </div>
    <div class="form-input input-field">
        <input type="email" name="email" id="email1" autocomplete="off">
        <label for="email1" class="input-title">Enter Your Email</label>
    </div>
    <div class="form-input input-field">
        <input type="tel" id="phone1" name="phone" class="phoneNumber" autocomplete="off">
        <label for="phone1" class="input-title">Your Phone</label>
    </div>
    <div class="form-input input-field">
        <textarea id="details1" name="details" rows="1" class="resizible-textarea"></textarea>
        <label for="details1" class="input-title">Project Details / Questions</label>

    </div>
    <div class="form-button">
        <button type="submit" id="btn" class="button button_green button_round form-button text-center"><span
                class="button_text">send</span>
            <div class="sending-preloader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </button>
    </div>
</form>