0

Нужно вывести в тег заполненное имя форма:

        <form class="job-form header__call-form" id="dataler" method="post" enctype="multipart/form-data" action="">
            <input type="hidden" name="checked_form" value="Заказ обратного звонка">
            <div class="title">
                <p>Заказ обратного звонка</p>
            </div>
            <div class="form-content">
                <div class="input-wrap"><span class="input-title">Имя</span>
                    <input class="form-input" type="text" placeholder=" " required name="name">
                </div>
                <div class="input-wrap"><span class="input-title">Номер телефона</span>
                    <input class="form-input phone" type="text" placeholder=" " required name="phone">
                </div>
                <div class="input-wrap">
                    <fieldset class="header__call-quest">
                        <legend>Когда вам перезвонить?</legend>
                        <label>
                            <input id="timeChoice1" type="radio" name="worktime[]" checked value="Сейчас"><span>Сейчас</span>
                        </label>
                        <label>
                            <input id="timeChoice2" type="radio" name="worktime[]" value="Вечером"><span>Вечером</span>
                        </label>
                        <label>
                            <input id="timeChoice3" type="radio" name="worktime[]" value="Указать точное время"><span>Указать точное время</span>
                        </label>
                    </fieldset>
                </div>
                <div class="note">
                    <p class="text">Отправляя это сообщение, вы соглашаетесь с </p><a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a>
                </div>
                <button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Заказать</span></button>
            </div>
        </form>

Ajax

  $("form#dataler").submit(function (e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
      url: 'sendler.php',
      type: 'POST',
      dataType: 'html',
      data: formData,
      success: function success(data) {
        console.log(data);
        $('.header__call-form').hide();
        $('.header__call-form--success').show();
        $('.header__call-form--success > .name').text(data.name);
      },
      error: function error(data) {
        console.log('error');
        // после отправки формы в консоле выводится массив с получеными данными
      },
      cache: false,
      contentType: false,
      processData: false
    });
  });

и сам блок с обращением по имени при успешной отправке

<div class="header__call-form--success">
                    <p class="name">Username,</p>
                    <p class="text">Ваша заявка успешно отправлена!</p>
                    <p class="text">Вскоре мы свяжемся с Вами</p>
                    <div class="btn-white header-call--success__close"><span class="text">Закрыть</span></div>
                </div>

нужно будет заменить в этом теге на текст, который пользователи вводит в поле "имя"

<p class="name">Username,</p>
3
  • Так а в чём проблема? В случае успеха(succes:) пишите туда значение input[name="name"] и все дела.
    – zhurof
    30 авг 2018 в 11:02
  • $('.header__call-form--success > .name').text(formData.get('name'));
    – zhurof
    30 авг 2018 в 11:05
  • получилось) отлично, примерно так и представлял, но пока в синтаксисе не разобрался. Опубликуйте, пожалуйста, это ответом)
    – stiv
    30 авг 2018 в 14:10

1 ответ 1

1

$("form#dataler").submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);

  $.ajax({
    url: 'sendler.php',
    type: 'POST',
    dataType: 'html',
    data: formData,
    success: function success(data) {
      console.log(data);
      $('.header__call-form').hide();
      $('.header__call-form--success').show();
      $('.header__call-form--success > .name').text(formData.get('name')+', ');
    },
    error: function error(data) {
      console.log('error');
    },
    cache: false,
    contentType: false,
    processData: false
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="job-form header__call-form" id="dataler" method="post" enctype="multipart/form-data" action="">
  <input type="hidden" name="checked_form" value="Заказ обратного звонка">
  <div class="title">
    <p>Заказ обратного звонка</p>
  </div>
  <div class="form-content">
    <div class="input-wrap"><span class="input-title">Имя</span>
      <input class="form-input" type="text" placeholder=" " required name="name">
    </div>
    <div class="input-wrap"><span class="input-title">Номер телефона</span>
      <input class="form-input phone" type="text" placeholder=" " required name="phone">
    </div>
    <div class="input-wrap">
      <fieldset class="header__call-quest">
        <legend>Когда вам перезвонить?</legend>
        <label>
<input id="timeChoice1" type="radio" name="worktime[]" checked value="Сейчас"><span>Сейчас</span>
</label>
        <label>
<input id="timeChoice2" type="radio" name="worktime[]" value="Вечером"><span>Вечером</span>
</label>
        <label>
<input id="timeChoice3" type="radio" name="worktime[]" value="Указать точное время"><span>Указать точное время</span>
</label>
      </fieldset>
    </div>
    <div class="note">
      <p class="text">Отправляя это сообщение, вы соглашаетесь с </p><a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a>
    </div>
    <button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Заказать</span></button>
  </div>
</form>

<div class="header__call-form--success">
  <p class="name"></p>
  <p class="text">Ваша заявка успешно отправлена!</p>
  <p class="text">Вскоре мы свяжемся с Вами</p>
  <div class="btn-white header-call--success__close"><span class="text">Закрыть</span></div>
</div>

Ваш ответ

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

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