Форма отправки не работает при использовании jQuery - PullRequest
Новая
       9

Форма отправки не работает при использовании jQuery

0 голосов
/ 16 мая 2018

У меня есть форма, и когда пользователь нажимает кнопку Отправить, я хотел бы, чтобы форма скрылась и появилось сообщение с благодарностью. К сожалению, с кодом, который у меня есть, он не работает, и я не могу понять, почему. Я думаю, что это может быть что-то с jQuery, поэтому я хотел бы попробовать переписать эту функцию, используя vanilla JS, но я не уверен, как.

Это последняя часть функции, if (empty.length), скрыть форму, показать сообщение спасибо, что вызывает у меня проблемы. Все остальное работает нормально, поэтому эту функцию я хотел бы попробовать написать на JavaScript или попробовать другой способ, используя jquery, чтобы он работал. Проблема в том, что он не работает в моем коде, но когда я открываю его в jsfiddle, он не просто скрывает форму, открывает новую страницу, и я получаю сообщение об ошибке. Я не хочу, чтобы пользователь направлялся на новую страницу, я просто хочу, чтобы форма закрылась и появилось сообщение с благодарностью. Я очень новичок в этом, поэтому я прошу прощения, если мой код грязный.

ОБНОВЛЕНИЕ: я действительно думаю, что проблема здесь в jQuery, могу ли я написать это на простом JS, и это исправит это? 

var $subscribe = $('#click-subscribe');
var $subscribeContent = $('#subscribe-content');
var $subscribeClose = $('#subscription-close');

$subscribeContent.hide();

$subscribe.on('click', function(e) {
  e.preventDefault();
  $subscribeContent.slideToggle();
});

$subscribeClose.on('click', function(e) {
  e.preventDefault();
  $subscribeContent.slideToggle();
})

var $form = $('#signup-form'),
  $signupForm = $('.form-show'),
  $formReplace = $('#thank-you');

$formReplace.hide();


$form.on('submit', function() {
  var empty = $(this).find("input, select, textarea").filter(function() {
    return this.value === "";
  });

  if (empty.length <= 0) {
    $signupForm.hide();
    $formReplace.show();
  } else {
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click-subscribe">Show / hide form</button>
<div id="subscribe-content">
  <div class="subscription-signup">
    <div class="subscription-close" id="subscription-close"></div>
    <div class="email-signup">
      <p class="cat-title subscription-text">lorem ipsum</p>
      <p class="subscription-text">lorem ipsum</p>
      <p class="subscription-text">lorem ipsum</p>

      <div class="subscription-form">
        <form id="signup-form" class="form-show" name="signup-form" method="post" action="${URLUtils.url('Newsletter-SubscribeMobile')}">
          <div class="form-row salutation header">
            <label for="salutation">Title</label>
            <div class="chzn-row valid salutation">
              <select id="title" name="title" class="chzn-global-select input-select optional required">
                <option value="">--</option>
                <option value="Mr">Mr.</option>
                <option value="Mrs">Mrs.</option>
                <option value="Ms">Ms.</option>
                <option value="Miss">Miss</option>
              </select>
            </div>
          </div>

          <div class="form-row required">
            <label for="firstname">
              <span aria-required="true">First Name</span>
              <span class="required-indicator">*</span>
            </label>
            <input class="input-text required" id="firstname" type="text" name="firstname" value="" maxlength="500" autocomplete="off">
          </div>

          <div class="form-row required">
            <label for="lastname">
              <span aria-required="true">Surname</span>
              <span class="required-indicator">*</span>
            </label>
            <input class="input-text required" id="lastname" type="text" name="lastname" value="" maxlength="500" autocomplete="off">
          </div>

          <div class="form-row required">
            <label for="signup-email" style="display:none;">Email</label>
            <input class="header-signup-email" type="text" id="signup-email-header" name="signup-email" value="" placeholder="Email" />
          </div>
          <div class="form-row text-center">
            <input type="submit" name="signup-submit" id="signup-submit" class="subscribe-submit" value="Submit" />
          </div>
        </form>

        <div id="thank-you">
          <p>Thanks for subscribing!</p>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 16 мая 2018

Я думаю, что какой-то другой код javascript / jQuery создает проблемы для запуска кодов, для простого решения сделайте ваш код в виде плагина и назвайте его следующим образом.

создать новый js файл с именем validation.js

(function($){
    $.fn.validation = function(){        
        var $subscribe = $('#click-subscribe');
        var $subscribeContent = $('#subscribe-content');
        var $subscribeClose = $('#subscription-close');

        $subscribeContent.hide();
        $subscribe.on('click', function(e) {
            e.preventDefault();
            $subscribeContent.slideToggle();
        });
        $subscribeClose.on('click', function(e) {
            e.preventDefault();
            $subscribeContent.slideToggle();
        });

        var $form = $('#signup-form'), $signupForm = $('.form-show'), $formReplace = $('#thank-you'); $formReplace.hide();
       this.on('submit', function(e){
            var empty = $(this).find("input, select, textarea").filter(function() {
                return this.value === "";
            });
            if(empty.length == 0){
                $signupForm.hide();
                $formReplace.show();
            }
            e.preventDefault();
        });        
    }; 
})(jQuery);

Теперь позвоните по номеру validation.js по номеру head, как показано ниже 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="validation.js"></script>
<script type="text/javascript">
$(function(){
    $('#signup-form').validation();
});
</script>
...