deregular

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

<?

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'>";

}

?>

vsloathe

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.

perkiset

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:


<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

perkiset

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?

deregular

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

perkiset

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


<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="/">Applauseivided 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>

perkiset

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)

deregular

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

perkiset

NW mate, good luck!


Perkiset's Place Home   Politics @ Perkiset's