Как запретить повторный клик на submit с присвоенным class в рамках определенного div?

Question

[ian14]

Привет знатокам. Подскажите, каким образом можно запретить повторный клик на sumbit с заданным class в рамках определенного div? И как сделать, чтобы после клика div с кнопкой заменялся на какой-либо html-код?

Грубо говоря, структура такая:

<div class="div1">
<input type="submit" value="Подписать" class="class">
</div>

<div class="div2">
<input type="submit" value="Подписать" class="class">
</div>

Нужно, чтобы в каждом блоке можно было только единожды клацнуть на кнопку, и чтобы после первого и единственного клика кнопка "Подписать" заменялась на текст "Вы подписали". Заранее спасибо.

Comments

[Станислав Б]

php тут ни при чем

[ian14]

Станислав Б, спасибо, очень помогли ))

Answer 1

[kreoTech]

$('.class').on('click', function(e){
      var $this = $(this);
      if ($this.prop('disabled')) {return false;};
      $this.prop('disabled', true);
      $this.val('Вы подписаны');
   });

На коленке сделал. Должно работать.

Comments

[ian14]

Спасибо большое. Как раз то, что нужно. Скажите, а можно ли как-то сохранять в бд или еще куда-то информацию о том, что конкретный пользователь уже кликнул на эту кнопку? Чтобы после обновления страницы он не смог снова кликнуть.

https://jsfiddle.net/q9myb83o/ здесь все работает отлично, но почему-то в Вордпресс не запускается ни в какую.

[kreoTech]

Если сохранять в базу данных, надо задействовать либо AJAX с серверной составляющей, либо делать полную отправку формы (это не имеет смысла, так как будет каждый раз перезагружаться страница)

Если эти данные не сильно влияют на работу и можно иногда обойтись без их наличия, тогда есть вариант сохранять в localstorage в браузере.

https://tproger.ru/articles/localstorage/

[kreoTech]

В вордпресс могут быть проблемы с подключением jQuery или ограничения на ввод кода, если он вводится через редактор страниц.

[ian14]

kreotech, blog.harrix.org/article/4556 тут написано, что в Вордпресс нужно символ $ заменить на jQuery, т.к. стандартный способ обращения к элементам через $ отключен. Действительно, раньше сталкивался с подобным, заменял символ и все работало. Но попробовал так сделать с этим кодом, ничего не вышло. Скрипт и html-код вставляю в php-файл шаблона страницы.

Библиотеку подключаю в файле functions.php:

function my_scripts_method() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}    

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 11 );

[kreoTech]

var $this
Выше указано название переменной, в ней знак доллара трогать не надо. Его надо менять только где вызывается функции jQuery

Результат:

jQuery('.class').on('click', function(e){
      var $this = jQuery(this);
      if ($this.prop('disabled')) {return false;};
      $this.prop('disabled', true);
      $this.val('Вы подписаны');
   });

[ian14]

kreotech, странно, все равно не срабатывает

[kreoTech]

Возможно у вас там классы другие возможно еще что-то. Это уже гадание на кофейной гуще.

[ian14]

kreotech, в любом случае спасибо за помощь. Буду отталкиваться от вашего кода и изучать localstorage.

[kreoTech]

Пожалуйста.

Можете еще попробовать отловить ошибки в консоли браузера.
Если проблемы с подключением jQuery они там будут.
Иначе просто тестировать включая в код
console.log('Тестовое сообщение');

Внутри обработчика клика, который я написал, и перед ним.

Так что дальше только отладка.