Verification: a143cc29221c9be0

Onclick on button in php

Как реагировать на события

JavaScript может выполняться при возникновении события, например, когда пользователь щелкает элемент HTML.

Чтобы выполнить код, когда пользователь щелкает элемент, добавьте код JavaScript в атрибут события HTML:

onclick=JavaScript

Примеры событий HTML:

  • Когда пользователь щелкает мышью
  • Когда веб-страница загрузилась
  • Когда изображение загружено
  • Когда мышь перемещается по элементу
  • Когда поле ввода изменено
  • Когда отправляется HTML форма
  • Когда пользователь нажимает клавишу

В этом примере содержимое

элемента изменяется, когда пользователь нажимает на него:

Пример



Click on this text!


Попробуйте сами »

В этом примере функция вызывается из обработчика событий:

Пример



Click on this text!


Попробуйте сами »



Атрибуты событий HTML

Чтобы назначить события HTML элементам, вы можете использовать атрибуты событий.

Пример

Назначьте событие onclick элементу кнопки:

Попробуйте сами »

В приведенном выше примере функция с именем displayDate будет выполняться при нажатии кнопки.


Назначьте события с помощью HTML DOM

HTML DOM позволяет назначать события элементам HTML с помощью JavaScript:

Пример

Назначьте событие onclick элементу кнопки:

Попробуйте сами »

В приведенном выше примере функция с именем displayDate назначается HTML элементу с расширением id="myBtn".

Функция будет выполнена при нажатии кнопки.


События onload и onunload

События onload и onunload запускаются, когда пользователь входит или покидает страницу.

Событие onload может быть использовано для проверки типа браузера и версии браузера посетителя, и загрузите соответствующую версию веб страницы на основе информации.

События onload и onunload могут использоваться для работы с файлами cookie.


Событие onchange

Событие onchange часто используется в комбинации с проверкой входных полей.

Ниже приведен пример использования onchange. Функция upperCase() будет вызываться, когда пользователь изменяет содержимое поля ввода.


События onmouseover и onmouseout

События onmouseover и onmouseout могут использоваться для запуска функции, когда пользователь наводит курсор мыши на элемент HTML или выходит из него:

Наведи мышь

Попробуйте сами »


События onmousedown, onmouseup и onclick

События onmousedown, onmouseup, и onclick являются частями щелчка мыши. Сначала, когда нажимается кнопка мыши, запускается событие onmousedown, затем, когда кнопка мыши отпускается, запускается событие onmouseup, наконец, когда щелчок мыши завершается, запускается событие onclick.

Нажми на меня

Попробуйте сами »


Больше примеров

onmousedown and onmouseup
Изменяет изображение, когда пользователь удерживает кнопку мыши.

onload
Отобразить окно предупреждения, когда страница завершит загрузку.

onfocus
Изменить цвет фона поля ввода, когда оно находится в фокусе.

События мыши
Изменение цвета элемента при наведении курсора на него.


Простой пример счётчика на JavaScript

HTML:

Clicked: 0
Click me

JavaScript:

var link = document.getElementById("link"),
 counter = document.getElementById("counter"),
 count = 0;
link.onclick = function() {
 count++;
 counter.textContent = count;
};

Простой пример счётчика на jQuery

Разметка из предыдущего примера. Скрипт jQuery:

$( document ).ready(function() {
 var link = $("#link"),
  counter = $("#counter"),
  count = 0;
 link.on('click', function(e) {
  e.preventDefault();
  count++;
  counter.html(count);
 });
});

Счётчик кликов с сохранением в текстовый файл

Примеры выше работают не полноценно, при обновлении страницы счётчик перегрузится снова в 0. Нам необходимо сохранять показатель счётчика при его обновлении. Информацию из js будем передавать в PHP посредством AJAX запроса.

Там, где выводим счётчик добавляем код PHP:


$file = "counter.txt";
if(!is_file($file)){
 $fh = fopen($file, 'w');
 fwrite($fh, 0);
 fclose($fh);
}
$data = (int)file_get_contents($file);
?>
Clicked: = $data ?>
Click me

jQuery:

$( document ).ready(function() {
 var link = $("#link"),
     counter = $("#counter");
 link.on('click', function(e) {
  e.preventDefault();
  var ajax = $.ajax({
   method : 'post',
   url : 'counter.php',
   dataType : 'text',
   data : { 'count' : 1 }
  });
  ajax.done(function(data){
   data = JSON.parse(data);
   counter.html(parseInt(data));
  }) ;
 });
});

PHP:

getMessage();
 }
endif;

Счётчик кликов с сохранением в базу данных SQLite

Пример реализации счётчика кликов с сохранением в базу данных SQLite с помощью PDO. Кликать теперь будем по кнопке.

Разметка с выводом результата:

exec($command);
 }
endif;
$stmt = $pdo->query("SELECT `value` FROM counter WHERE `id` = 1");
$data = (int)$stmt->fetchColumn();

// HTML
Clicked: = $data ?>

jQuery:

$( document ).ready(function() {
 var button = $("#button"),
     counter = $("#counter_bnt");
 button.on('click', function(e) {
  e.preventDefault();
  var ajax = $.ajax({
   method : 'post',
   url : 'counter.php',
   dataType : 'text',
   data : { 'count' : 1 }
  });
  ajax.done(function(data){
   data = JSON.parse(data);
   counter.html(parseInt(data));
  }) ;
 });
});

counter.php:

query("SELECT `value` FROM counter");
  $data = (int)$stmt->fetchColumn();
  $data++;
  $command = "UPDATE counter "
  . "SET `value` = {$data} "
  . "WHERE id = 1";
  $pdo->exec($command);
  echo json_encode($data);
 } catch (Exception $e) {
  echo $e->getMessage();
 }
endif;

Используйте jQuery для выполнения функции PHP с событием onclick()

Мы можем использовать jQuery для выполнения события onclick(), написав функцию, которая будет выполнять функцию PHP. Например, создайте файл PHP echo.php и напишите функцию php_func(). Напишите внутри функции сообщение Have a great day и вызовите функцию. В другом файле PHP напишите какой-нибудь jQuery внутри тега script. Не забудьте связать веб-страницу с источником jQuery. Напишите в HTML тег button с атрибутом onclick(). Запишите значение атрибута как функцию test(). Напишите текст Click между тегами button. Создайте пустой тег div под кнопкой. Напишите функцию test() внутри тега script. Напишите метод AJAX с URL как echo.php и напишите функцию success() с параметром result. Затем с помощью селектора выберите тег div и используйте функцию text() с параметром result.

В приведенном ниже примере мы используем метод AJAX для выполнения асинхронного HTTP-запроса. URL-адрес представляет собой URL-адрес для отправки запроса, а функция success() запускается, когда запрос успешен. Метод отправляет запрос в файл echo.php, который находится в том же месте, что и текущий файл PHP. Запрос становится успешным, функция success() возвращает результат, и он печатается.

Пример кода:

#php 7.x

Выход:

Have a great day

Используйте простой JavaScript для выполнения функции PHP с событием onclick()

Этот метод использует JavaScript для выполнения функции PHP с событием onclick(). Например, напишите функцию PHP php_func(), которая отображает сообщение Stay Safe. Создайте кнопку с названием Click с помощью тега button. Задайте функцию onclick() в качестве атрибута с функцией clickMe() в качестве ее значения. Напишите функцию clickMe() внутри тега скрипт. Создайте переменную result и вызовите в ней php_func() внутри тегов PHP. Используйте функцию document.write() с параметром result для печати вывода.

В приведенном ниже примере функция JavaScript clickMe() выполняется, когда мы нажимаем кнопку. Затем функция PHP php_func() выполняется из функции JavaScript. Переменная result сохраняет результат функции PHP, и он печатается.

Пример кода:

#php 7.x

function clickMe(){
var result =""
document.write(result);
}

Выход:

Stay Safe