The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 18, 2019, 12:54:36 AM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: js form output to same page/file  (Read 3579 times)
deregular
Expert
****
Offline Offline

Posts: 172


View Profile
« on: March 18, 2008, 06:09:19 AM »

Ok guys im a retard when it comes to javascript, this should be an easy one for some of you.

I have a similar form to this i need to convert to javascript (well the result needs to be, so that it can be all thrown into just the One html file so that it and its calculation is easily transportable (without needing access to a server or WAMP installed)

Any ideas of how id do this??

Code:
<?php

if(isset($_POST['go'])){

echo'Your name is '.$_POST['yourname'];

}else{

echo"<form action='".$_SERVER['PHP_SELF']."' method='POST'>";
echo"<input type='hidden' name='go' value=''>";
echo'Enter your name:';
echo"<input type='text' name='yourname' value=''>";
echo"<input type='submit' value='Submit'>";

}

?>
Logged
vsloathe
vim ftw!
Global Moderator
Lifer
*****
Offline Offline

Posts: 1669



View Profile
« Reply #1 on: March 18, 2008, 08:13:29 AM »

Make it so that the submit button is not a submit, but a call to a JS function called like "blitName" or whatever, then just either pop up an alert box in JS or change the value of some element to say what you want it to say inside said function.
Logged

hai
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #2 on: March 18, 2008, 10:42:46 AM »

I'm really not sure i understand your question... are you saying that you'd like to take form variables and convert them to ... something else ... so that you can get another HTML page? I don't understand what you mean by no server access and no WAMP installed... this is a web page, right?

I'll use that as an example in any case:

Code:
<input type="text" id="name" style="width: 200px;">
<input type="checkbox" id="somecheck">
<input type="button" value="test" onClick="doTest()">

<script>
function doTest()
{
var theName = document.getElementById('name');
var isChecked = (document.getElementById('somecheck').checked) ? '1' : '0';
var newURL = '/anotherPage.php?name=' + theName + '&ischecked=' + isChecked;
top.location = newURL;
}
</script>

I have no idea if that helps, but if I'm way off ping again.

/p
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #3 on: March 18, 2008, 10:44:56 AM »

OK in rereading, perhaps you mean you want this file to be local and you want to load it in a browser and have all the JS do the work.

In this case, rather than sending the page (top.location) somewhere else, do this:

<div id="theAnswer">Nothing Yet</div>

and in the code,

document.getElementById('theAnswer').innerHTML = [the answer to what you are calculating]

Better?
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
deregular
Expert
****
Offline Offline

Posts: 172


View Profile
« Reply #4 on: March 18, 2008, 09:55:01 PM »

Thanks for the replies..

Yep you guys are onto what I meant. Sorry about the vagueness, its kind of hard to explain.

Anyway, from looking at the code its pretty close, but what I suppose I was asking is, is there a way to show just those results on the page, without the initial form staying there as well.

Im essentially looking for a ...

Step 1. Fill out the form. (checkboxes, whatever)
Step 2. Process the form (do price calculations etc.)
Step 3. Spit out the results on its own page. (not showing the form and not needing to be posted to another file)

A One file 'product select', 'calculate', and 'invoice print out' if you will.

Perhaps I need to contain the form in a div, that is toggled to hidden if there is a GET variable found.??

Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #5 on: March 18, 2008, 10:39:49 PM »

Yes, absolutely - my last post referenced that, but here is a working example:

Code:
<html>

<table cellpadding="5" cellspacing="0" border="1">
<tr valign="middle">
<td><input type="text" id="leftside" value="0" style="width: 45px"></td>
<td><select id="operation" size="1">
<option value="+">Plus</option>
<option value="-">Minus</option>
<option value="*">Times</option>
<option value="/">Divided by</option>
</select></td>
<td><input type="text" id="rightside" value="0" style="width: 45px"></td>
<td><input type="button" value="Equals..." onClick="calculate()"></td>
<td><div id="result" style="width: 70px;"></div></td>
</tr>
</table>

<script>
function calculate()
{
var left = document.getElementById('leftside').value;
var right = document.getElementById('rightside').value;
var theSel = document.getElementById('operation');
var op = theSel.options[theSel.selectedIndex].value;
var res = 0;
switch (op)
{
case '+':
res = left + right;
break;
case '-':
res = left - right;
break;
case '*':
res = left * right;
break;
case '/':
res = left / right;
break;
}
document.getElementById('result').innerHTML = res;
}
</script>
</html>
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #6 on: March 18, 2008, 10:43:35 PM »

Note that you really don't even need the notion of a "form" with this sort of thing, because a "form" is actually an HTML container for sending stuff up to a server... the DOM model does make a couple things easier with it, but by and large I almost never use the form tag unless I really really need to. By referencing everything by it's DOM id, it's quick and easy.

Note one caveat: if you name variables the same as element IDs you will have troubles in certain circumstances and browsers. I recommend using similar, but different names (ie., rightside -> right, result ->res)
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
deregular
Expert
****
Offline Offline

Posts: 172


View Profile
« Reply #7 on: March 19, 2008, 02:05:31 AM »

Excellent, thanks for the code perk, now i can have a play with an already working script.
I can see how you've referenced everything now too. Very much appreciated.
 Praise
Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #8 on: March 19, 2008, 08:06:16 AM »

NW mate, good luck!
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!