initval inside my field when radio button is selected

E

ewitkop90

Here is my code:
<SCRIPT>
function transportchange(transport) {
if (framenewinstall.Helpdesk.checked)
framenewinstall.Helpdesk.checked=false;
if (framenewinstall.CircuitNumber.checked)
framenewinstall.CircuitNumber.checked=false;
switch (transport) {
case 0:
Helpdesk.innerText="No Info Needed";
CircuitNumber.innerText="FMS Number";
break;
case 1:
Helpdesk.innerText="GTS Contact Number";
CircuitNumber.innerText="Circuit Number";
break;
}
}
</SCRIPT>
<FORM method="POST" name="framenewinstall"
action="http://server/cgi-bin/Erik-FormMail.pl">
<INPUT TYPE="RADIO" NAME="Transport" VALUE="Sprint"
onclick="transportchange(0);" CHECKED>
Sprint
<INPUT TYPE="RADIO" NAME="Transport" VALUE="GTS"
onclick="transportchange(1);">
GTS<BR>
<input type="text" name="Helpdesk">
<label id="Helpdesk" for="Helpdesk">Helpdesk</label><BR>

<INPUT TYPE="text" NAME="CircuitNumber">
<LABEL ID="CircuitNumber" FOR="CircuitNumber">Circuit
Number</LABEL> <BR>

It is working, meaning that it changes the html OUTSIDE of the field
itself. But what I am looking to do is auto populate the helpdesk phone
# inside the field, depending on whether you select Sprint or GTS. I
thought it would be called an initval but that is not it.
 
M

Mick White

Here is my code:
<SCRIPT>
function transportchange(transport) {
if (framenewinstall.Helpdesk.checked)

Problems start here, IE Win only reference :
"framenewinstall.Helpdesk.checked"
framenewinstall.Helpdesk.checked=false;
if (framenewinstall.CircuitNumber.checked)
framenewinstall.CircuitNumber.checked=false;
switch (transport) {
case 0:
Helpdesk.innerText="No Info Needed";
CircuitNumber.innerText="FMS Number";

innerText is IE Win only reference
break;
case 1:
Helpdesk.innerText="GTS Contact Number";
CircuitNumber.innerText="Circuit Number";
break;

No default?

Should I continue?
[snip]

Mick
 
E

ewitkop90

I found my issue. I used the name helpdesk in too many places. I made
it helpdesk1 and that fixed it.

Thanks.
 
R

RobG

I found my issue. I used the name helpdesk in too many places. I made
it helpdesk1 and that fixed it.

Thanks.

I believe you have many more issues than you think. Your code
is exclusive to IE - making it cross browser is quite simple
(see below).

You have created duplicate id/name attributes incorrectly,
and your interface is illogical.

From your first post:

<script type="text/javascript">

The type attribute is required.
function transportchange(transport) {
if (framenewinstall.Helpdesk.checked)
framenewinstall.Helpdesk.checked=false;

This syntax is IE only, a cross-browser version is:

if (document.framenewinstall.Helpdesk.checked)
document.framenewinstall.Helpdesk.checked=false;
if (framenewinstall.CircuitNumber.checked)
framenewinstall.CircuitNumber.checked=false;

Same here:

if (document.framenewinstall.CircuitNumber.checked)
document.framenewinstall.CircuitNumber.checked=false;

A bigger issue is that this appears to be code for checkboxes,
not radio buttons. It also does nothing in either Firefox or IE
that I can tell - the radio button stays checked.

Do you want to use checkboxes and use the above function to make
them mutually exclusive? In that case, clicking on
"CicuitNumber" should un-check Helpdesk and vice versa.

switch (transport) {
case 0:
Helpdesk.innerText="No Info Needed";
CircuitNumber.innerText="FMS Number";
break;

More IE-only nastiness that is simply not necessary. I've
substituted a variable to shorten the line length.

var f = document.framenewinstall;

switch (transport) {
case 0:
f.Helpdesk.value = "No Info Needed";
f.CircuitNumber.value = "FMS Number";
break;

Use 'value' not 'innerText'. It is DOM compliant and works in
many more browsers than 'innerText'.
case 1:
Helpdesk.innerText="GTS Contact Number";
CircuitNumber.innerText="Circuit Number";
break;

case 1:
f.Helpdesk.innerText="GTS Contact Number";
f.CircuitNumber.innerText="Circuit Number";
break;

default:
return false; // or do something useful

As Mick said, you should have a default too.
}
}
</SCRIPT>
<FORM method="POST" name="framenewinstall"
action="http://server/cgi-bin/Erik-FormMail.pl">
<INPUT TYPE="RADIO" NAME="Transport" VALUE="Sprint"
onclick="transportchange(0);" CHECKED>
Sprint
<INPUT TYPE="RADIO" NAME="Transport" VALUE="GTS"
onclick="transportchange(1);">
GTS<BR>
<input type="text" name="Helpdesk">
<label id="Helpdesk" for="Helpdesk">Helpdesk</label><BR>

<INPUT TYPE="text" NAME="CircuitNumber">
<LABEL ID="CircuitNumber" FOR="CircuitNumber">Circuit
Number</LABEL> <BR>

Here you found one issue with your use of the name "Helpdesk",
but you also have the same issue with your labels having an ID
the same as the name of a different element. Labels don't need
an ID, so don't give them one.

And the label's "for" attribute should match an ID, not a name.

<URL:http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL>

"for = idref [CS]
This attribute explicitly associates the label being defined
with another control. When present, the value of this
attribute must be the same as the value of the id attribute
of some other control in the same document. When absent, the
label being defined is associated with the element's
contents."

You have done the right thing and made one radio button checked,
but don't put the associated values into the text input.

The labels on the text inputs are a bit useless, better to put
them on the radio buttons so clicking on the label selects the
button.

Here is a version that works, I've set default values on the
text inputs and made them readonly, you may want to have an
onload function that sets the values according to the radio
button that is selected by default.

If you actually want checkboxes, then post again.


<SCRIPT type="text/javascript">

function transportchange(transport) {
var f = document.framenewinstall;

switch (transport) {
case 0:
f.Helpdesk.value="No Info Needed";
f.CircuitNumber.value="FMS Number";
break;

case 1:
f.Helpdesk.value="GTS Contact Number";
f.CircuitNumber.value="Circuit Number";
break;

default:
return false;
}
}
</SCRIPT>
<FORM method="POST" name="framenewinstall"
action="http://server/cgi-bin/Erik-FormMail.pl">
<label for="Transport0">
<INPUT TYPE="RADIO" NAME="Transport" id="Transport0"
VALUE="Sprint" onclick="transportchange(0);"
CHECKED>&nbsp;Sprint</label>

<label for="Transport1">
<INPUT TYPE="RADIO" NAME="Transport" id="Transport1"
VALUE="GTS" onclick="transportchange(1);"
&nbsp;GTS</label><BR>

<label for="Helpdesk">
<input type="text" readonly name="Helpdesk"
id="Helpdesk" value="No Info Needed"
&nbsp;Helpdesk</label>
<BR>
<label for="CircuitNumber">
<INPUT TYPE="text" readonly NAME="CircuitNumber"
id="CiruitNumber" value="FMS Number"
&nbsp;Circuit&nbsp;Number</label>
<BR>

<input type="reset">
</form>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top