Запустите PHP-код после нажатия кнопки, но без обновления страницы
У меня есть форма в HTML для применения купона на скидку к текущей корзине покупок. Я бы хотел, чтобы пользователь просто нажал "ПРИМЕНИТЬ" (после ввода кода купона), а затем, не обновляя страницу, запустил некоторый PHP-код, чтобы он рассчитал соответствующую скидку.
Вот моя форма:
<form action="">
<input type="text" name="couponCode">
<input type="submit" value="Apply">
</form>
PHP для запуска:
if (isset($_REQUEST['couponCode']) && $_REQUEST['couponCode']!='')
{
$couponCode = $_REQUEST['couponCode'];
if ($couponCode == "TEST1")
{
$discount=0.2;
}
}
Как это можно сделать с помощью javascript?
4 answers
Вам нужно использовать либо событие onsubmit формы, либо событие onclick кнопки.
В обработчике событий вы собираете URL-адрес и "получаете" его. Например:
<script type="text/JavaScript">
function submitCouponCode()
{
var textbox = document.getElementById("couponCode");
var url =
"https://www.example.com/script.php?couponCode=" + encodeURIComponent(textbox.value);
// get the URL
http = new XMLHttpRequest();
http.open("GET", url, true);
http.send(null);
// prevent form from submitting
return false;
}
</script>
<form action="" onsubmit="return submitCouponCode();">
<input type="text" id="couponCode">
<input type="submit" value="Apply">
</form>
Используйте jQuery AJAX. Когда он будет завершен, обновите свою страницу по мере необходимости.
Вы можете использовать Jquery для создания AJAX-сообщения вашего PHP-скрипта, а затем использовать JS для изменения содержимого вызывающей страницы.
С jQuery все просто. Вам просто нужно использовать правильный тег. Если вы используете тег "a", страница обновится.
<button id="MyButton">Click Me!</button>
<script>
$("#MyButton").click( function(){
$.post("somefile.php");
});
</script>