Browser Incompatibility in a simple script

[giles100]

Hi All,

I’m currently finishing off a project with is mostly server side. However, I need a little client-side magic. I’ve managed to pull together what I need, it works fine with IE but I suspect I’ve inherited some browser incompatibility issues (i.e. I know it fails with safari), and with time very much against me I need to ask for your help. The script works as follows. A text field gathers keyed text. four buttons pass that text plus a unique value serverside. THAT’S IT - I’d be really grateful for any help you can give me

thanks in advance
Giles

code follows----------------------------------

<SCRIPT LANGUAGE="JavaScript"><!--
function button1() {
document.output.answer.value = document.answer.text.value;
document.output.goto.value = "{VALUE1}";
document.output.submit();
return false;
}
function button2() {
document.output.answer.value = document.answer.text.value;
document.output.goto.value = "{VALUE2}";
document.output.submit();
return false;
}

function button3() {
document.output.answer.value = document.answer.text.value;
document.output.goto.value = "{VALUE3}";
document.output.submit();
return false;
}

function button4() {
document.output.answer.value = document.answer.text.value;
document.output.goto.value = "{VALUE4}";
document.output.submit();
return false;
}
//--></SCRIPT>

<!-- BEGIN question -->
<table border=2 align="center">
<tr>
<td bgcolor="maroon"><div align="center"><b><font color="white">
{QUESTION1}</font></b>
</td>
</tr>
</table>
<!-- END question -->


<!-- BEGIN answer -->
<FORM NAME="answer">
<div align="center">
<INPUT NAME="text" TYPE="text" value="{ANSWER}">
</div>
</FORM>
<!-- END answer -->


<!-- BEGIN buttons -->
<table border=2 align="center">
<tr>
<td bgcolor="maroon"><div align="center"><b><font color="white">
{PROMPT}</font></b>
</td>
</tr>
</table>

<FORM NAME="buttons">
<div align="center">
<input type="button" onclick="button1()" value="{NAME1}" />
<input type="button" onclick="button2()" value="{NAME2}" />
<input type="button" onclick="button3()" value="{NAME3}" />
<input type="button" onclick="button4()" value="{NAME4}" />
</div>
</FORM>

<FORM NAME="output"form method="GET" action="{ACTION}">
<INPUT TYPE="HIDDEN" NAME="answer">
<INPUT TYPE="HIDDEN" NAME="goto">
</FORM>
<!-- END buttons -->

 

[jpadie]

why do you need javascript for this?

<form method="get" action='{ACTION}">

<div align="center">
<INPUT NAME="text" TYPE="text" value="{ANSWER}"> <br/>
<input type="submit" name="submit"  value="{NAME1}" />
<input type="submit" name="submit" value="{NAME2}" />
<input type="submit" name="submit" value="{NAME3}" />
<input type="submit" name="submit" value="{NAME4}" />
</div>
</form>

only the clicked button will submit so you just test for the value of the submit buttong (e.g $_GET['submit'] in php and similar in other languages) to get your unique number.

 

[trollacious]

How about something like this?

var values = ['{VALUE1}', '{VALUE2}', '{VALUE3}', '{VALUE4}'];

function sethiddenvalue(valueindex)
{
var outform = document.forms['output'];
var answerform =
outform.elements['answer'].value = document.forms['answer'].elements['text'].value;

outform.elements['goto'].value = values[valueindex - 1];
outform.submit();
return false;
}

and

<FORM NAME="buttons">
<div align="center">
<input type="button" onclick="sethiddenvalue(1)" value="{NAME1}" />
<input type="button" onclick="sethiddenvalue(2)" value="{NAME2}" />
<input type="button" onclick="sethiddenvalue(3)" value="{NAME3}" />
<input type="button" onclick="sethiddenvalue(4)" value="{NAME4}" />
</div>
</FORM>

One function and one array handles it all, and if you add more buttons later on, it will be easy to modify.
Lee