0

Добрый день всем, ребят, не могу понять в чем проблема, очевидно имеет место быть какая то ошибка в 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>
2
  • Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему 22 дек 2017 в 11:59
  • Отправка формы, в данном случае оно не происходит, после добавление preventDefault(); отправка работает, но данные с полей формы не уходят до адресата. 22 дек 2017 в 13:46

1 ответ 1

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>
2
  • Спасибо большое, но после добавление preventDefault(); отправка работает, но данные с полей формы не уходят до адресата. 22 дек 2017 в 13:47
  • Можно подробнее описать, что означает не уходят? Ошибка в консоли? закрытые корсы? неверные хедеры? - @AntonKolesnikov 22 дек 2017 в 13:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.