Отправка форм и использование значения (JavaScript)

Question

Как вы используете значение, «представленное» формой в javascript?

Факты:
Это документ PHP
Я использую JavaScript, потому что мне нужны некоторые факторы времени, которые я не думаю, что могу получить из серверных скриптов :)

Для упрощения;я хочу, чтобы при отправке этой формы или нажатии кнопки:

<form method="POST" action="test.php">
<input type="text" name="foo" size="30">
<input type="submit" value="Click me"> //it doesn't have to be submitted
<input type="button" action="some_action" value="Click me"> //an alternative solution
</form>

значение текстового ввода с именем "foo" отображалось в другом месте.

ПРИМЕЧАНИЕ Форма не должна быть отправлена, я действительно хочу, чтобы при нажатии кнопки значение могло использоваться в другом месте

Должен ли я использоватьПОЛУЧИТЬ вместо этого?Могу ли я просто использовать массив $ _POST?Должен ли я использовать AJAX (что я совершенно бесполезен)?Я не знаю, что делать в этой ситуации.

Answer 1

Так как вы упомянули, что это не зависит полностью от того, отправлена ​​форма или нет, так проще поймать значение без размещения / получения формы. После того, как вы написали логику вашего интерфейса в разделе body, вам нужно написать следующий код в конце нижнего колонтитула: -

anypage.php: -

<form method="POST" action="test.php">
  <input type="text" name="foo" id="foo" size="30" />
  <input type="submit" onclick="return writeFoo('foo_placeholder', 'foo');" value="Click me" /> //it doesn't have to be submitted
  <input type="button" onclick="return writeFoo('foo_placeholder', 'foo');" action="some_action" value="Click me" /> //an alternative solution
</form>

Приведенный выше код является вашим кодом только с некоторыми незначительными изменениями, включая вызов функции JS "writeFoo()" по событию "click" кнопки / submit. Эта функция принимает 2 аргумента: -

• arg - в нем упоминается идентификатор местозаполнителя пункта HTML-элемента, в котором должно быть напечатано значение.
• source - в нем указывается идентификатор источника HTML-элемента, из которого следует получить / извлечь значение.

rightpart.php: -

<div>
    <span id="foo_placeholder"></span>
</div>

Приведенный выше HTML-код можно использовать для любой панели, но он должен быть включен, когда пользователю должна быть показана страница «anypage.php». Это связано с тем, что элемент-заполнитель должен присутствовать при вызове элемента "foo". Будьте внимательны и используйте один и тот же идентификатор во время вызова функции "writeFoo()" и на этой странице.

footer.php: -

<script type="text/javascript"><!--
function writeFoo(arg, source) {
    if(document.getElementById(arg) != null) {
        document.getElementById(arg).innerHTML = document.getElementById(source).value;
    }
}
// --></script>

И эта страница должна содержать приведенный выше JS-код, содержащий определение функции "writeFoo()".

РЕДАКТИРОВАТЬ, как для @Latze: -
Смотрите, вы можете включить эту страницу "rightpart.php" либо в тот же блок страницы "anypage.php", либо в любой блок любой другой страницы (например, страницы "header.php" / "footer.php"). Но основная логика заключается в том, что и идентификатор источника (из которого берется значение), и идентификатор цели / заполнителя (где должно отображаться значение) должны присутствовать при просмотре этой конкретной страницы (в данном случае это означает, что когда вы просматриваете страницу "anypage.php").

Надеюсь, это поможет.

Answer 2

PHP работает на сервере. JavaScript работает в браузере. Эти два языка не разговаривают друг с другом; они даже не работают одновременно, не говоря уже об одной машине. Как только пользователь отправляет форму, браузер запрашивает test.php с сервера, и текущая страница исчезает навсегда, сценарии и все.

Действительно трудно понять, что именно вы хотите делать, поэтому я дам вам несколько общих советов:

• JavaScript может перехватить отправку формы. Вам необходимо прикрепить обработчик события onsubmit к элементу <form>. Функция, назначенная событию, может делать все, что ей нужно, и затем возвращать true (и позволить продолжению отправки) или возвращать false (и отменять отправку).

• JavaScript может читать и писать практически любой элемент страницы. Вам нужно использовать так называемые методы DOM.

• PHP может генерировать все, что вам нужно, включая поля ввода HTML.

Пример:

<?php

$foo_value = date('Y-m-d H:i:s');

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<script type="text/javascript"><!--
window.onload = function(){
    var documentForms = document.getElementsByTagName("form");
    for(var i=0, len=documentForms.length; i<len; i++){
        documentForms[i].onsubmit = function(e){
            var currentForm = e.target;
            var fooValue = currentForm.elements.foo.value;

            var p = document.createElement("p");
            p.appendChild(document.createTextNode("Aborted submission: " + fooValue));
            currentForm.appendChild(p);

            return false;
        };
    }
};
//--></script>
</head>
<body>

<form method="POST" action="test.php">
<input type="text" name="foo" value="<?php echo htmlspecialchars($foo_value) ?>" size="30">
<input type="submit" value="Tryk her">
</form>

</body>
</html>

Обновление

Небольшое примечание об этом:

documentForms[i].onsubmit = function(e){
};

Когда вы назначаете обработчик события, спецификация требует, чтобы при вызове функции она получала объект события в качестве первого аргумента. Этот объект представляет событие, которое вызвало вызов функции, и его можно использовать для получения дополнительной информации, такой как исходный узел DOM, который вызвал событие . Неважно, как вы вызываете это внутри своей функции; Я использую e, потому что я никогда не знаю, как назвать вещи:)

Answer 3

Вы можете прочитать значение из массива $_POST или $_REQUEST на стороне сервера и вставить его в вывод в любом месте, где захотите - даже в javascript, если хотите.Пример:

<?php
$myValue = $_POST['foo'];
?>
<script type="text/javascript"><!--
function writeMyValue() { document.write('<?php echo $myValue; ?>'); }
// --></script>