js form output to same page/file

deregular

Journeyman

Offline

Posts: 67

js form output to same page/file

« 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

Posts: 679

Re: js form output to same page/file

« 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

link buying service
link building service

perkiset

Olde World Hacker
Administrator
Lifer

Online

Posts: 5326

:sniffle: Humor was so much easier before.

Re: js form output to same page/file

« 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

If I can't be Mr. Root then I don't want to play.

perkiset

Olde World Hacker
Administrator
Lifer

Online

Posts: 5326

:sniffle: Humor was so much easier before.

Re: js form output to same page/file

« 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

If I can't be Mr. Root then I don't want to play.

deregular

Journeyman

Offline

Posts: 67

Re: js form output to same page/file

« 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

Online

Posts: 5326

:sniffle: Humor was so much easier before.

Re: js form output to same page/file

« 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

If I can't be Mr. Root then I don't want to play.

perkiset

Olde World Hacker
Administrator
Lifer

Online

Posts: 5326

:sniffle: Humor was so much easier before.

Re: js form output to same page/file

« 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

If I can't be Mr. Root then I don't want to play.

deregular

Journeyman

Offline

Posts: 67

Re: js form output to same page/file

« 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

Online

Posts: 5326

:sniffle: Humor was so much easier before.

Re: js form output to same page/file

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

NW mate, good luck!


	Logged

If I can't be Mr. Root then I don't want to play.

Pages: [1]

« previous next »

	Welcome, Guest. Please login or register.	January 08, 2009, 07:35:27 PM
		Login with username, password and session length