Javascript function doesnt work in safari

[cmk08]

Hello there,

I am trying to figure out why this function (submit form) doesn't work in Safari (or Firefox) but only in IE. Any reference to where I can find the answer or learn about tricks on how implementing javascript to work across browser would be great! Thanks.

The closeWindow() function works fine in all browsers...

{literal}
function submitForm() {
	var start = document.getElementById("start").value;
	
	var end	= document.getElementById("end").value;
	
	var sa = start.split("-");
	var ea = end.split("-");
	
	var d1 = new Date();
	d1.setFullYear(sa[0],sa[1],sa[2]);
	d1.setHours(0,0,0,0);
	
	var d2 = new Date();
	d2.setFullYear(ea[0],ea[1],ea[2]);
	d2.setHours(0,0,0,0);
	//document.write(d);
	
	if(d1.getTime() >= d2.getTime())
		alert("End-Date should be later than Start-Date.");
	else{
		document.form1.submit();
		window.opener.location="?a=goal&rand="+rand+"#"+goal;
	}
}

function closeWindow() {
	window.close();
	window.opener.location="?a=goal&rand="+rand+"#"+goal;
}
{/literal}

 

[angelwatt]

It's hard to debug without being able to test it out, is this posted on any page we can access?

At the end of the first function you have,

document.form1.submit();

but you'd be better off with

document.getElementById('form1ID').submit();

making sure the form as an id attribute to reference. This is the better way of accessing the form.

That's the only thing that catches my eye when I look at the code, but would be better if I could test the code. Are there any error messages in the Error Console? Does that alert line ever get fired?

 

[cmk08]

Nothing happens. There is no error logged anywhere or a javascript error in the browser. The alert doesn't work either.

Changing that line you suggested actually caused the function to stop working in IE as well.

Unfortunately I don't know javascript, otherwise I would write a second function to do the work when safari is being used.

I am not going to pursue this issue anymore, but here is what I heard from the developer - "Safari is a different kind of browser that does NOT support javascript very well." Honestly I don't believe that's the case and if good programming practices had been used I would not be in this forum today.

 

[elppa]

EDIT: document.form1.submit(); will work provided your form tag has form1 as the value for its name attribute. You can also do:

document.forms[0].submit();

This assumes the form you want to submit is the first form on the page (as counting begins at zero). If you want the second form on the page then change the 0 in square brackets to a 1.

or

document.getElementById('idOfMyForm')

It does raise an error in both browsers using either the webkit inspector in Safari or Firebug in Firefox. If you want to write Javascript, you should familiarise yourself with these tools. You can use them set breakpoints and step through your javascript line by line as it is executing in the browser.

Safari:

TypeError: Result of expression 'document.form1' [undefined] is not an object.

Firefox:

document.form1 is undefined

That's a pretty big clue your statement is not not getting a form object. If your not getting a form you obviously can't submit it because there is nothing to submit.

You can easily debug this too:

alert(document.forms[0]) will display a message saying:

[object HTMLFormElement]

alert(document.form1) will display a message saying:

undefined

here is what I heard: Safari does support javascript very well. Honestly I don't believe that's the case

More fool you then.

and if good programming practices had been used I would not be in this forum today.

Quite. You have to be pretty arrogant to think that a problem with your javascript is the fault of the many talented developers who have worked on the Webkit and Mozilla projects.

I bet there is either a problem with your markup or a syntax error somewhere in your javascript. We never got to see the markup or the rest of the javascript so it was hard to debug.

Changing that line you suggested actually caused the function to stop working in IE as well.

Of course it would if you didn't change the form so it had an id of form1ID.

All three below work in both Firefox and Safari.
By Name:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
	<script type="text/javascript" charset="utf-8">
		function submitForm() {
			alert(document.form1);
			document.form1.submit();
		}
	</script>
	
</head>

<body>
	<form action="go.cgi" name="form1" method="get" accept-charset="utf-8">
		
		<a href="#" onclick="submitForm()">Hello</a>
		
	</form>
</body>
</html>

By id:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
	<script type="text/javascript" charset="utf-8">
		function submitForm() {
			alert(document.getElementById('idOfMyForm'));
			document.getElementById('idOfMyForm').submit();
		}
	</script>
	
</head>

<body>
	<form action="go.cgi" id="idOfMyForm" method="get" accept-charset="utf-8">
		
		<a href="#" onclick="submitForm()">Hello</a>
		
	</form>
</body>
</html>

By accessing element in array:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
	<script type="text/javascript" charset="utf-8">
		function submitForm() {
			alert(document.forms[0]);
			document.forms[0].submit();
		}
	</script>
	
</head>

<body>
	<form action="go.cgi" method="get" accept-charset="utf-8">
		
		<a href="#" onclick="submitForm()">Hello</a>
		
	</form>
</body>
</html>

 

[memco]

"Safari is a different kind of browser that does support javascript very well."

I'm assuming this is a mis-type, but that's a true statement there. Safari has a very nice implementation of Javascript, and the next version of Safari is going to have an incredible javascript engine.

 

[cmk08]

thanks for the great tools!! As I said before I don't know javascript, but it shouldn't be that hard to learn a few new things I will start working on it right away. Let's see what happens...

"Safari is a different kind of browser that does support javascript very well."

you are right, it is a mistype. I was told that "Safari does NOT support javascript very well". And I agree with you, I have far more problems with IE than Safari or Firefox. Thanks for mentioning it, I don't want to look like an idiot here .

Ok, I used firebug to see what the code was doing and looks like the variables are not getting populated. A js calendar is being used here, and the two dates variables appear to be null...I can't figure this out myself. This works only in IE.

Here is the entire code for the form, the calendarDateInput.js is very long so I didn't post it. If you think that you can help me better with that I can certainly post it:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Add Sub Goal</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<script type="text/javascript" src="js/calendarDateInput.js"></script>
<script>
var goal = {$goal_id};
var rand = {$rand};
{literal}
function submitForm() {
	var start = document.getElementById("start").value;
	
	var end	= document.getElementById("end").value;
	
	var sa = start.split("-");
	var ea = end.split("-");
	
	var d1 = new Date();
	d1.setFullYear(sa[0],sa[1],sa[2]);
	d1.setHours(0,0,0,0);
	
	var d2 = new Date();
	d2.setFullYear(ea[0],ea[1],ea[2]);
	d2.setHours(0,0,0,0);
	//document.write(d);
	if(d1.getTime() >= d2.getTime())
		alert("End-Date should be later than Start-Date.");
	else{
		document.form1.submit();
		window.opener.location="?a=goal&rand="+rand+"#"+goal;
	}
}

function closeWindow() {
	window.close();
	window.opener.location="?a=goal&rand="+rand+"#"+goal;
}
{/literal}
</script>
<body bgcolor="#336699" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form name="form1" method="post" action="?a=add_sub&goal_id={$goal_id}">
<table width="279"  border="0">
  <tr>
    <td width="338" class="subgoal">Sub Goal</td>
  </tr>
  <tr>
    <td><textarea name="sub_desc" cols="32" rows="6" class="bg-blue" id="sub_desc"></textarea></td>
  </tr>
  <tr>
    <td><table width="226"  border="0">
      <tr>
        <td width="58%" class="small-font">Start Date</td>
        <td width="42%"><script>DateInput('start', true, 'YYYY-MM-DD')</script></td>
      </tr>
      <tr>
        <td class="small-font">End Date </td>
        <td><script>DateInput('end', true, 'YYYY-MM-DD')</script></td>
      </tr>
      <tr>
        <td class="small-font">%Complete</td>
        <td><select name="complete" class="date" id="complete">
            <option>0</option>
            <option selected>25</option>
            <option>50</option>
            <option>75</option>
            <option>100</option>
        </select></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>
      <input type="button" name="Button" value="  Submit  " onClick= "submitForm();">
 
<input type="button" name="Button" value="Close" onClick="closeWindow();">
        <input name="goal_id" type="hidden" id="goal_id" value="{$goal_id}">
    </td>
  </tr>
</table>
</form>
</body>

</html>

Thanks!!