Hello everyone.
My girlfriend wrote an electronic form with some Java script code.
However some buttons don’t work on IE (like the "submit and “default values” battens).
Could someone please have a quick view and maybe tell me what should be changed?
http://img2.timg.co.il/forums/1_142239233.txt
Thanks
thanks for you both
One doctype, all browsers.
It’s just that IE6 and 7 have very large differences between “no doctype” and a doctype (their Quirks Mode is extremely noticeable because in Quirks Mode they render pages the same way IE5 did!). Firefox on the other hand might not look hugely different between quirks, almost standard and standard.
Also, IE6 is sensitive to where the doctype is. It should be char 1, line1 of the HTML page. Comments, whitespace, even those xml prologues some people put before the <html> tag will make IE6 ignore the doctype and go into quirks. IE7 has the same problem but knows to ignore the xml line. Not that there should be an xml prologue… that’s only for real XHTML/XML.
Your page may look vastly different after adding the doctype. However, with a doctype, you can validate your HTML at the W3C validator, and having good HTML does matter to Javascript (the DOM, the structure of the HTML document, is what Javascript uses).
I think Paul (pmw57) is closer to your actual problem in your JS, I’m just pointing out that you have other issues going on as well.
HTML4.01 Strict is the most standard you can get. However, that doesn’t mean that the web browsers have to follow them.
if you want some way to guarantee that everything will work problem free on IE6 through to IE8, we can only come close to that with practice and experience.
Tried to avoid posting it all. But I guess I omitted some important code after all.
<html>
<head>
<script type="text/javascript">
function validate_form(thisform)
{
with(thisform){
if (valid_str(str)==false || valid_mute(mute)==false ||
valid_reading(readingframe , str , amino)==false ||valid_not_null(treeEdit , hamming , basePair)==false||
valid_dist1(dist1)==false|| valid_dist2(dist2)==false || valid_radio()==false ||valid_erange(erange)==false ||
valid_radio2()==false || valid_mail(email)==false )
{
return false;
}
else {
return true;
}
}
}
function valid_erange(field){
with (field){
if(field.value==null || field.value=="" || field.value==' ' || isNaN(field.value)){
alert("The erange field must be a positive number");
return false;
}
else{
return true;
}
}
}
function valid_dist1(field)
{
with (field){
if(field.value==null || field.value=="" || field.value==' ' || isNaN(field.value)){
alert("The dist1 field must be a positive number");
return false;
}
else{
return true;
}
}
}
function valid_dist2(field)
{
with (field){
if(field.value==null || field.value=="" || field.value==' ' || isNaN(field.value)){
alert("The dist2 field must be a positive number");
return false;
}
else{
return true;
}
}
}
function valid_radio()
{
var radio_choice = false;
for (counter = 0; counter < input.distance.length; counter++)
{
// If a radio button has been selected it will return true
// (If not it will return false)
if (input.distance[counter].checked){
radio_choice = true;
}
}
if (!radio_choice)
{
// If there were no selections made display an alert box
alert("Please select a distance")
return (false);
}
return (true);
}
function valid_radio2()
{
var radio_choice = false;
for (counter = 0; counter < input.method.length; counter++)
{
// If a radio button has been selected it will return true
// (If not it will return false)
if (input.method[counter].checked){
radio_choice = true;
}
}
if (!radio_choice)
{
// If there were no selections made display an alert box
alert("Please select a method")
return (false);
}
return (true);
}
function valid_mail(field)
{
with(field){
if(input.useMail[1].checked){
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{
alert("The e-mail address is not valid");
return false;
}
}
else {return true;}
}
}
function valid_str(field)
{
var alphaExp = /^[A C U T G a c u t g ' ' \
\ ]+$/;
if(field.value==null || field.value=="" || field.value==' '){
alert("Please insert an RNA sequence");
return false;
}
else {
if(field.value.match(alphaExp)){
return true;
}
else{
alert("The rna seq is not valid , please re-enter");
return false;
}
}
}
function valid_mute(field)
{
with (field){
if(value==null||value==""||value < 0) {
alert("The number of mutation need to be positive");
value=0;
return false;
}
else{
if(isNaN(value)){
alert ("Mutation must be a positive number!");
return false;
}
return true;
}
}
}
function valid_reading(field1 , field2 , field3)
{
var value1 = field1.value;
var value2 = field2.value;
var value3 = field3.checked;
if (value3==false){
value1= -1;
return true;
}
else{
if(value1=="" || value1==null || value1 < 0 || value1 > value2.length) {
alert("The reading frame needs to be positive number but smaller than the seq length");
return false;
}
else{
if(isNaN(value1)){
alert ("The readingFrame field must be a positive number!");
return false;
}
return true;
}
}
}
function valid_not_null(field1 , field2 , field3)
{
var value1 = field1.value;
var value2 = field2.value;
var value3 = field3.value;
if(value1==null||value1==""||value1 < 0 ||value2==null||value2==""||value2 < 0||
value3==null||value3==""||value3 < 0) {
alert("All tables fields must be a positive number");
value2=0;
value1=0;
value3=0;
return false;
}
else{
if(isNaN(value1) ||isNaN(value2) ||isNaN(value3)){
alert ("All tables must be a positive number!");
return false;
}
return true;
}
}
function insert_values(thisform){
document.forms['input'].str.value = 'AGCGGGGGAGACAUAUAUCACAGCCUGUCUCGUGCCCGACCCCGC';
with(thisform){
mute.value = "2";
document.input.readingframe.disabled = false;
readingframe.value="4";
dist1.value="15";
dist2.value="14";
treeEdit.value = "7";
hamming.value = "9";
basePair.value = "11";
erange.value = "10";
document.input.distance[0].checked=true;
document.input.method[2].checked=true;
}
}
function reset_form(thisform)
{
with(thisform){
document.input.readingframe.disabled = true;
document.input.email.disabled = true;
}
}
function enable_text(status)
{
status=!status;
document.input.readingframe.disabled = status;
}
function enable_mail(status)
{
status=!status;
document.input.email.disabled = status;
}
</script>
</head>
<body onload=enable_text(false); bgcolor="Silver" type filter text>
<form name="input" action="file.jsp" onsubmit="return validate_form(this)" onreset = "return reset_form(this)" method="post">
<h1>RNA Mute</h1>
<h2><font color=navy><p>Please insert RNA sequence here:</p></font></h2>
<textarea input="text" name="str" rows="10" cols="100">Please enter the RNA sequence </textarea>
<blockquote>
<table>
<tr>
<td width=300>
<fieldset>
<br>
Number of mutations:<input type="text" name="mute" id = "mute" size="6">
<br>
<br>
Reading frame <input type="text" name="readingframe" id = "readingframe" size="5">
<br>
<br>
<input type="checkbox" name="amino" onclick="enable_text(this.checked)" value="1"/>
Don't change amino acids
<br>
<br>
</fieldset>
</td>
<td width=7></td>
<td width=300>
<fieldset>
<legend> Tables </legend>
treeEdit: <input type="text" name="treeEdit" id = "treeEdit" size = "6">
<br>
<br>
hamming: <input type="text" name="hamming" id = "hamming" size = "6">
<br>
<br>
basePair: <input type="text" name="basePair" id = "basePair" size = "6">
<br>
</fieldset>
</td>
</tr><tr></tr></table>
<br>
<br>
<table>
<tr><td>
<fieldset>
<legend>
RNAsubopt configure:
</legend>
<table>
<tr>
<td width=5> </td>
<TD WIDTH=200><fieldset>
dist1: <input type="text" name="dist1" id = "dist1" size="3">
<br>
<br>
dist2: <input type="text" name="dist2" id = "dist2" size="3">
<br>
<br>
enter a range: <input type="text" name="erange" id = "erange" size="3"></fieldset></td>
<td width=10></td>
<TD WIDTH=200>
<fieldset>
<legend>
please choose the distance:
</legend>
<br>
<input type="radio" name="distance" value="1">
Hamming Dot - Bracket<br>
<input type="radio" name="distance" value="2">
Base Pair Dot-Bracket<br>
<br>
</fieldset> </td>
<td width=10></td>
<td width=300>
<fieldset>
<legend>
please choose the method:
</legend>
<input type="radio" name="method" value="f" >
Fast , only stabilizing<br>
<input type="radio" name="method" value="s" >
Slow , only stabilizing<br>
<input type="radio" name="method" value="d" >
Fast , stabilizing & destabilizing<br>
<input type="radio" name="method" value="e" >
Slow , stabilizing & destabilizing<br>
</td>
</tr>
</table>
</fieldset>
</table>
<t> Please choose how do you want to get the results</t>
<br>
<br>
<input type="radio" name="useMail" onclick="enable_mail(!this.checked)" value="1" >
I want to wait here <br>
<br>
<input type="radio" name="useMail" onclick="enable_mail(this.checked)" value="2">
By mail: <input type="text" disabled name="email" size="25" value="">
<p>
<input type=submit value="Submit Form">
<input type=reset value="Reset Form">
<input type=button OnClick="window.open('http://www.google.com')" value="Help">
<input type=button OnClick="insert_values(this)" value="Default values">
</p>
</blockquote>
</form>
</body>
</html>
The form uses a function called validate_this
<form name="input" action="file.jsp" onsubmit="return validate_form(this)" onreset = "return reset_form(this)" method="post">
Where is the validate_form function?
The default values button uses a function called insert_values
<input type=button OnClick="insert_values(this)" value="Default values">
Where is the insert_values function?
What happens when I report that the default values and the submit buttons work for me.
Because we tried IE7 i think…
anyway you don’t see any syntax error that should block IE lower than 8. right?
Thanks for the useful link.
Just to make sure: is there an standard Doctype suitable for IE6,7,8 ?
Heh, whoops, I was editing and you guys were both online : )
Your documents should always have a doctype. I prefer HTML4.01 Strict, but so long as it’s Strict, you can choose.
Might be unrelated question, but does the actual page have a doctype? I’m unsure what IE6 and 7 do in Quirks Mode regarding JS, but if the page really does start with <html> (maybe you were making the code less verbose for us though), they are certainly in Quirks Mode.
Also, it wouldn’t hurt to have a good HTML form instead of what you’ve got. Doesn’t change the Javascript issue either way, but no reason to spew out forms like that. No blockquotes, tables, or non-form tags like the headers inside the form… add labels to your inputs, with for attributes, escaping your &'s etc.
What’s the difference between the reset button and the default values button? If you start your boxes with default values in the first place (in the HTML), reset will display those.
You check to see if stuff ==false… if someone manually types in a 0, that’s not false… is that okay?
You check to see if one of the two radio buttons has been selected… however, you will never know what user agent automatically chooses one or not, as the HTML specs say whenever you have a group of radio buttons, one must be checked=“checked” at the start anyway. So, not choosing a radio button should never be an option. One should be checked by default anyway.
I’m still new in JS but I didn’t see anything that normally trips up IE in there… why not run your JS through JSLint.com? You can also check for anything like a syntax error using the Javascript error consoles in various browsers (they’ll tell you if you’re missing or have an extra } for example).
How about that the defaults button is not a form element, but is being passed (as the this keyword) to a function that requires one?
Hi,
This is the whole code - as is.
I didn’t fully understand you. What else do you suggest me to do ?