Question

How do you use a value “submitted” by a form in javascript?

Facts:
It is a PHP document
I’m using JavaScript because I need some timing factors I don’t think I can get from serverside-scripts 🙂

To simplify; what I want is, that when this form is submitted or a button is clicked:

<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>

the value of the text-input named “foo” is displayed elsewhere.

NOTE The form doesn’t have to be submitted, what I realy want is, that when you press a button the value can be used elsewhere

Should I use GET instead? Can I just use the $_POST array? Should I use AJAX (which I am completely useless at)? I don’t know what to do in this situation.

Answer 1

Since you mentioned that it does not depend fully upon whether the form is submitted or not, so it’s more easier to catch the value w/o POSTing / GETing the form. After you have written your interface logic in the body section, you need to write the following code in the footer page at the end:-

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>

The above code is your code only with some minor modifications, including calling a JS function “writeFoo()” on the “click” event of either a button / submit. This function takes 2 arguments:-

• arg – It mentions the destination placeholder ID of the HTML element, in which the value is to be printed.
• source – It mentions the source ID of the HTML element, from which the value is to be grabbed / taken.

rightpart.php:-

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

The above HTML code can be used for any panel, but must be included when the “anypage.php” page is to be shown to the user. This is because the placeholder element must be present when the “foo” element is being called. Be careful to use the same ID both in the “writeFoo()” function calling time & in this page.

footer.php:-

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

And this page should contain the above JS code containing the definition of the “writeFoo()” function.

EDIT, as for @Latze:-
See you can include that “rightpart.php” page either in the same block of “anypage.php” page or in any block of any other page (like “header.php” / “footer.php” page). But the main logic is that both the source ID (from which the value is taken) & the target / placeholder ID (where the value is to be shown) must be present when you are viewing that particular page (in this case, it means when you are viewing the “anypage.php” page).

Hope it helps.