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 that you have read and understand our privacy policy and code of conduct.

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