Задать вопрос
@KitCat12
php

Как передать данные с html в php и обратно?

Есть такая структура
css
  |_ style.css
php
  |_ action.php
index.html


Содержимое style.css
spoiler
body {
  background-color: #FF9E0D;
}
.gui form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 5px 5px 10px 5px;
}
.gui {
  margin: 0 auto;
  background-color: #9dd2ea;
  width: 100%;
  max-width: 295px;
  border-radius: 4px;
}
.flex-block {
  display: flex;
  margin-top: calc(50vh - 150px);
}
input {
  outline: 0;
  position: relative;
  border: 0;
  color: #495069;
  background-color: #fff;
  border-radius: 4px;
  width: 60px;
  height: 50px;
  margin: 5px;
  font-size: 20px;
  box-shadow: 0 4px rgba(0,0,0,0.2);
}
.button:hover {
  background-color: rgb(222, 237, 252);
  box-shadow: 0 4px rgb(173, 188, 202);
}
.button:active {
  top: 4px;
  box-shadow: none;
}
.answer {
  width: 100%;
  font-size: 26px;
  text-align: center;
  background-color: #F1FAEB;
  float: left;
  margin-bottom: 10px;
}
.operator {
  background-color: #f1ff92;
  position: relative;
}
.operator:hover {
  background-color: #E7F56B;
  box-shadow: 0 4px #B7C259;
}
.operator:active {
  top: 4px;
  box-shadow: none;
}
.clear {
  float: left;
  position: relative;
  display: block;
  background-color: #ff9fa8;
}
.clear:hover {
  background-color: #F297A0;
  box-shadow: 0 4px #CC7F86;
}
.clear:active {
  background-color: #F297A0;
  box-shadow: none;
}


Содержимое action.php
spoiler

<?php

function calculate($value)
{
    return eval("return ".$value.";");
}

print(calculate($_POST["answer"]));

?>


Содержимое index.html
spoiler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="flex-block">
            <div class="gui">
                <form name="calc" action="../php/action.php" method="post">
                    <input class="answer" type="text" name="answer" size="16" autocomplete="off">
                    <input class="button" type="button" name="one" value="1" onclick="form.answer.value += '1'">
                    <input class="button" type="button" name="two" value="2" onclick="calc.answer.value += '2'">
                    <input class="button" type="button" name="three" value="3" onclick="calc.answer.value += '3'">
                    <input class="button operator" type="button" name="plus" value="+" onclick="calc.answer.value += '+'">
                
                    <input class="button" type="button" name="four" value="4" onclick="calc.answer.value += '4'">
                    <input class="button" type="button" name="five" value="5" onclick="calc.answer.value += '5'">
                    <input class="button" type="button" name="six" value="6" onclick="calc.answer.value += '6'">
                    <input class="button operator" type="button" name="minus" value="-" onclick="calc.answer.value += '-'">
                
                    <input class="button" type="button" name="seven" value="7" onclick="calc.answer.value += '7'">
                    <input class="button" type="button" name="eight" value="8" onclick="calc.answer.value += '8'">
                    <input class="button" type="button" name="nine" value="9" onclick="calc.answer.value += '9'">
                    <input class="button operator" type="button" name="times" value="x" onclick="calc.answer.value += '*'">
                
                    <input class="button clear" type="button" name="clear" value="c" onclick="calc.answer.value = ''">
                    <input class="button" type="button" name="zero" value="0" onclick="calc.answer.value += '0'">
                    <input class="button" type="submit" name="doit" value="=">
                    <input class="button operator" type="button" name="div" value="/" onclick="calc.answer.value += '/'">
                </form>
            </div>
        </div>
    </div>
</body>
</html>


Передаю пример в action.php, там он обрабатывается и выводит результат. Вопрос в том, как мне этот результат вставить в index.html, а конкретно в поле 
<input class="answer" type="text" name="answer" size="16" autocomplete="off">
?
  • Вопрос задан
  • 576 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 3
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
https://developer.mozilla.org/ru/docs/Web/API/Fetc...
На кнопку результата навешиваете обработчик, в нем получив результат
document.getElementsByName("answer")[0].value = data;
Ответ написан
3 комментария
3 комментария
@cannabioid1337
Тут два варианта:

Сделать action на этой же странице, и выводить так:

<input class="answer" type="text" name="answer" size="16"  value="<?php echo (isset(($_POST["answer"] ))  ? htmlspecialchars($_POST["answer"]) : '' ?>" autocomplete="off">


Либо же через AJAX:

action.php
<?php echo (isset(($_POST["answer"] ))  ? htmlspecialchars($_POST["answer"]) : '' ?>


$.ajax({
    url: '../php/action.php',
    type: 'POST',
         success: function(data) {
          $('.answer').test(data);
         });
Ответ написан
7 комментариев
7 комментариев
@KitCat12 Автор вопроса
Получилось после объединения в 1 php файл

<?php
$result = "";

function calculate($value)
{
    return eval("return ".$value.";");
}

if (isset($_POST["answer"])) 
{
    $result = calculate($_POST["answer"]);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="flex-block">
            <div class="gui">
                <form name="calc" method="post">
                    <input class="answer" type="text" name="answer" value="<?php print($result); ?>" autocomplete="off">
                    <input class="button" type="button" value="1" onclick="form.answer.value += '1';">
                    <input class="button" type="button" value="2" onclick="calc.answer.value += '2'">
                    <input class="button" type="button" value="3" onclick="calc.answer.value += '3'">
                    <input class="button operator" type="button" value="+" onclick="calc.answer.value += '+'">
                
                    <input class="button" type="button" value="4" onclick="calc.answer.value += '4'">
                    <input class="button" type="button" value="5" onclick="calc.answer.value += '5'">
                    <input class="button" type="button" value="6" onclick="calc.answer.value += '6'">
                    <input class="button operator" type="button" value="-" onclick="calc.answer.value += '-'">
                
                    <input class="button" type="button" value="7" onclick="calc.answer.value += '7'">
                    <input class="button" type="button" value="8" onclick="calc.answer.value += '8'">
                    <input class="button" type="button" value="9" onclick="calc.answer.value += '9'">
                    <input class="button operator" type="button" value="x" onclick="calc.answer.value += '*'">
                
                    <input class="button clear" type="button" name="clear" value="c" onclick="calc.answer.value = ''">
                    <input class="button" type="button" value="0" onclick="calc.answer.value += '0'">
                    <input class="button" type="submit" value="=">
                    <input class="button operator" type="button" value="/" onclick="calc.answer.value += '/'">
                </form>
            </div>
        </div>
    </div>
</body>
</html>
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
PHP разработчик
Creative Code
от 100 000 до 160 000 ₽
Бэкендер (PHP)
Клиники «Чайка» • Москва
от 150 000 до 220 000 ₽
Программист PHP
Инскайнет
До 15 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Проанализировать сайт
27 июн. 2024, в 10:44
10000 руб./за проект
[javascript/typescript] научить заполнять и запускать .js файл
27 июн. 2024, в 10:42
1000 руб./за проект
Верстка лендинга на 15 блоков
27 июн. 2024, в 10:29
18000 руб./за проект
Ещё заказы