[SOLVED] Form works in IE not FF

clang · April 7, 2008

Ok first off, I'm sorry. I don't know javascript well enough to trouble shoot things myself all the time, and given that, I'm not totally sure which information I need to give in order to get help with a solution. If there is something that I'm not telling you, that you need to know to help figure out the problem, let me know and I'll put it right up.

Phew. Glad thats out of the way.

So the problem. I have a form, with 4 drop down options. 3 of those drop downs are filled in when the page is loaded. The final drop down is filled in after you have selected the other three.

Once you have selected all 4 of these options, you click on the submit button, and a link appears at the top of your screen. That link is comprised of the options you've selected.

If you don't select anything, no link. If you select anything but all three, error.

The way I handled this before today was with a php form. As you might have guessed the 4th drop down box is populated using php, and it works just fine. But the problem I was having was that every time you'd hit "Submit" the page would refresh. Sure you would have your link (or your error), but if you wanted to change the options just a little, you'd have to select all 4 all over.

So I decided to use more Javascript(/Ajax) to remove the page refresh. All i'm doing is creating a simple link, so taking out the page refresh shouldn't be too hard.

Well I've got all the things set up. I based my form off of this page, modifying things to fit my needs.

Things work. If I don't select all the options, I get a proper error. The problem is once I select the 4th drop down box, the one which is populated only after the other 3 are selected. When I select it, Firefox tells me it contains no value (or firebug does, firefox just does nothing). But in IE everything works just fine. The link gets created with out a problem.

MonthlyReportTesting.php-First is the page it's self. The one which the user sees.

<?php
include 'library/functions.php';

$db=opendb($dbhost, $dbuser, $dbpass, $dbname);
session_start(); 
$header="<script type=\"text/javascript\" src=\"library/xmlhttp.js\"></script>\n
	<script type=\"text/javascript\" src=\"library/monthlyReport.js\"></script>\n
	<script type=\"text/javascript\" src=\"library/util.js\"></script>\n
	<script type=\"text/javascript\" src=\"library/ajaxCaller.js\"></script>\n
";
HTMLheader($db,"Monthly Report",'10','Yes',$header);

?>

<div class="title"><a class="likeParent" href="./Admin.php">Monthly Report</a></div>
<div id="result">
</div>
<div id="resultWait">
<table>
	<tbody>
	<tr>
		<td>
		<div class="errorYellow"><input type=button value="Please wait..." disabled /></div>
		</td>
	</tr>
</tbody>
</table>
</div>

<form action="./MonthlyReport.php" method="post" name="form">
<table id="data">
<tbody>
<tr>
	<th>Year</th>
	<td><select name="Year" id="Year">
		<option value="2006" <?php if(date("Y")==2006)echo "SELECTED";?>>2006</option>
		<option value="2007" <?php if(date("Y")==2007)echo "SELECTED";?>>2007</option>
		<option value="2008" <?php if(date("Y")==2008)echo "SELECTED";?>>2008</option>
		<option value="2009" <?php if(date("Y")==2009)echo "SELECTED";?>>2009</option>
		<option value="2010" <?php if(date("Y")==2010)echo "SELECTED";?>>2010</option>
		<option value="2011" <?php if(date("Y")==2011)echo "SELECTED";?>>2011</option>
	</select></td>
</tr>
<tr>
	<th>Month</th>
	<?php /* Note: I am checking to see which month we are currently in, and selecting the previous month.
			So if I'm in february, january will be selected.
		     */
	?>
	<td><select name="Month" id="Month">
		<option value="01" <?php if(date("m")==02)echo "SELECTED";?>>January</option>
		<option value="02" <?php if(date("m")==03)echo "SELECTED";?>>February</option>
		<option value="03" <?php if(date("m")==04)echo "SELECTED";?>>March</option>
		<option value="04" <?php if(date("m")==05)echo "SELECTED";?>>April</option>
		<option value="05" <?php if(date("m")==06)echo "SELECTED";?>>May</option>
		<option value="06" <?php if(date("m")==07)echo "SELECTED";?>>June</option>
		<option value="07" <?php if(date("m")==08)echo "SELECTED";?>>July</option>
		<option value="08" <?php if(date("m")==09)echo "SELECTED";?>>August</option>
		<option value="09" <?php if(date("m")==10)echo "SELECTED";?>>September</option>
		<option value="10" <?php if(date("m")==11)echo "SELECTED";?>>October</option>
		<option value="11" <?php if(date("m")==12)echo "SELECTED";?>>November</option>
		<option value="12" <?php if(date("m")==01)echo "SELECTED";?>>December</option>
	</select></td>
</tr>
<tr>
	<th>Company</th>
	<td><select name="Company" onchange="FillBranches(this.value)" id="Company">
		<option value="Null" SELECTED>Please select a company</option>
		<?php
			$result=listCompanies($db);
			for($a=0; $a<$result->num_rows;$a++)
			{
				$row = $result->fetch_assoc();
				echo "<option value=\"".stripslashes($row['Abbreviation'])."\">".stripslashes($row['Name'])."</option>\n";
			}
		?>
	</select></td>
</tr>
<tr>
	<th>Branch</th>
	<td><span id="selectBranch"><select name="Branch" id="Branch">
		<option value="-1">First select a company</option>
		</select></span>
	</td>
</tr>
</tbody>
<tfoot>
<tr>
	<td colspan="2">
		<button type="button" id="createButton">Create Report</button>
	</td>
</tr>
</tfoot>
</table>
</form>	

<?php
HTMLfooter();
?>

FillMonthlyReport.php-This is the file which creates either the error or the link, and is passed back to MonthlyReportTesting.php

<?php
include './library/functions.php';

$db=opendb($dbhost, $dbuser, $dbpass, $dbname);

sleep(1);
if($_GET['Year']<=date("Y"))//Checks to make sure we don't select a year that hasn't happened yet
{
	if($_GET['Month']<=date("m")||$_GET['Year']<date("Y"))//Checks to see if the month selected has occured. If the year is one previous to the current year, then all months have occured.
	{
		if($_GET['Company']!="Null")
		{
			if($_GET['Branch']!="-1")
			{
				$y=$_GET['Year'];
				$m=$_GET['Month'];
				$b=$_GET['Branch'];
				$c=$_GET['Company'];
				$url="./CreateReport.php?year=$y&month=$m&company=$c&branch=$b";

				?>
					<table>
					<tbody>
						<tr>
							<td>
							<div class="errorGreen"><input type=button value="Click here for the report" onClick="javascript:popUp('<?php echo $url;?>')" /></div>
							</td>
						</tr>
					</tbody>
					</table>
				<?php

			}
			else
			{
				setError(113);//Please select a branch
			}
		}
		else
		{
			setError(112);//Please select a company
		}
	}
	else
	{
		setError(111);//No information for that month exists. Please select again
	}
}
else
{
	setError(110);//No information for that year exists. Please select again.
}


checkError($db);
?>

MonthlyReport.js

This contains the javascript which is loaded once the Create Report button is pressed.

window.onload = function() {
  $("result").style.display = "none";
  $("resultWait").style.display = "none";
  $("createButton").onclick = function() {
    submitSum();
  }
}

function submitSum() {
  $("resultWait").style.display = '';
  self.$("result").innerHTML = "";
  var definedFigures = {
    Year: $("Year").value,
    Month: $("Month").value,
    Branch: $("Branch").value,
Company: $("Company").value
  }
  ajaxCaller.get("fillMonthlyReport.php", definedFigures, onSumResponse, false, null);
}

function onSumResponse(text, headers, callingContext) {
  $("resultWait").style.display = "none";
  self.$("result").innerHTML = text;
  $("result").style.display='';
}

util.js-This file I got from the link above. I haven't modified it


var util = {

  shouldDebug: false,

  // Note: Will fail in pathological cases (where the members contain
  // strings similar to describe() result).
  membersEqual: function(array1, array2) {
    return util.describe(array1)==util.describe(array2);
  },

  describe: function(obj) {
    if (obj==null) { return null; }
    switch(typeof(obj)) {
      case 'object': {
        var message = "";
        for (key in obj) {
          message += ", [" + key + "]: [" + obj[key] + "]";
        }
        if (message.length > 0) {
          message = message.substring(2); // chomp initial ', '
        }
        return message;
      }
      default: return "" + obj;
    }
  },

  debug: function(message) {
      if (this.shouldDebug) {
        alert("AjaxJS Message:\n\n" + message);
      }
  },

  error: function(message) {
      if (this.shouldDebug) {
        alert("AjaxJS ERROR:\n\n" + message);
      }
  },

  trim: function(str) {
    return str.replace(/(^\s+|\s+$)/g,'');
  },

  strip: function(str) {
    return str.replace(/\s+/, "");
  }

}

function $() {

    var elements = new Array();

    for (var i = 0; i < arguments.length; i++) {

      var element = arguments[i];

      if (typeof element == 'string') {
        if (document.getElementById) {
          element = document.getElementById(element);
        } else if (document.all) {
          element = document.all[element];
        }
      }

      elements.push(element);

    }

    if (arguments.length == 1 && elements.length > 0) {
      return elements[0];
    } else {
      return elements;
    }
}

function $C(elType) {
  return document.createElement(elType);
}

// From prototype library. Try.these(f1, f2, f3);
var Try = {
  these: function() {
    var returnValue;
    for (var i = 0; i<arguments.length; i++) {
      var lambda = arguments[i];
      try {
        returnValue = lambda();
        break;
      } catch (e) {}
    }
    return returnValue;
  }
}

function getElementsByClassName(classname) {
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = document.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

function extractIFrameBody(iFrameEl) {

  var doc = null;
  if (iFrameEl.contentDocument) { // For NS6
    doc = iFrameEl.contentDocument; 
  } else if (iFrameEl.contentWindow) { // For IE5.5 and IE6
    doc = iFrameEl.contentWindow.document;
  } else if (iFrameEl.document) { // For IE5
    doc = iFrameEl.document;
  } else {
    alert("Error: could not find sumiFrame document");
    return null;
  }
  return doc.body;

}



/* function getElementsByClassName(needle) {



  var xpathResult = document.evaluate('//*[@class = needle]', document, null, 0, null);
  var outArray = new Array();
  while ((outArray[outArray.length] = xpathResult.iterateNext())) {
  }
  return outArray;
}
*/

/*
  function acceptNode(node) {
    if (node.hasAttribute("class")) {
      var c = " " + node.className + " ";
       if (c.indexOf(" " + needle + " ") != -1)
         return NodeFilter.FILTER_ACCEPT;
    }
    return NodeFilter.FILTER_SKIP;
  }

  var treeWalker = document.createTreeWalker(document.documentElement,
                                             NodeFilter.SHOW_ELEMENT,
                                             acceptNode,
                                             true);
  var outArray = new Array();
  if (treeWalker) {
    var node = treeWalker.nextNode();
    while (node) {
      outArray.push(node);
      node = treeWalker.nextNode();
    }
  }
  return outArray;
}

*/
///////////////////////////////////////////////////////////////////////////////
// Used for pattern-specific demos.
///////////////////////////////////////////////////////////////////////////////

var DELAY = 1000;
var steps = 0;
function andThen(action) {
  var delayTime = (++steps * DELAY);
  setTimeout(action, delayTime);
}

function log(message) {
  $("log").innerHTML += message + "<br/>";
}

function createXMLHttpRequest() {
  try { return new ActiveXObject("Msxml2.XMLHTTP");    } catch(e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
  try { return new XMLHttpRequest();                   } catch(e) {}
  alert("XMLHttpRequest not supported");
  return null;
}

ajaxCaller.js-Same goes for this file

var ajaxCaller = {

  shouldDebug: false,
  shouldEscapeVars: false,
  shouldMakeHeaderMap: true,

  calls : new Array(),
  pendingResponseCount : 0,

   /**************************************************************************
      PUBLIC METHODS
   *************************************************************************/

  getXML: function(url, callbackFunction) {
    this.get(url, null, callbackFunction, true, null);
  },

  getPlainText: function(url, callbackFunction) {
    this.get(url, null, callbackFunction, false, null);
  },

  postForPlainText: function(url, vars, callbackFunction) {
    this.postVars(url, vars, null, callbackFunction, false,
                    null, "POST", null, null, null);
  },

  postForXML: function(url, vars, callbackFunction) {
    this.postVars(url, vars, null, callbackFunction, true,
                    null, "POST", null, null, null);
  },

  get: function(url, urlVars, callbackFunction, expectingXML, callingContext) {
    this._callServer(url, urlVars, callbackFunction, expectingXML,
                    callingContext, "GET", null, null, null);
  },

  postVars:
    function(url, bodyVars, optionalURLVars, callbackFunction, expectingXML,
             callingContext) {
      this._callServer(url, optionalURLVars, callbackFunction, expectingXML,
                      callingContext, "POST", bodyVars, null, null);
  },

  postBody:
    function(url, optionalURLVars, callbackFunction, expectingXML,
             callingContext, bodyType, body) {
      this._callServer(url, optionalURLVars, callbackFunction, expectingXML,
                      callingContext, "POST", null, bodyType, body);
  },

  putBody:
    function(url, optionalURLVars, callbackFunction, expectingXML,
             callingContext, bodyType, body) {
      this._callServer(url, optionalURLVars, callbackFunction, expectingXML,
                      callingContext, "PUT", null, bodyType, body);
  },

  options:
    function(url, optionalURLVars, callbackFunction, expectingXML,
             callingContext, bodyType, body) {
      this._callServer(url, optionalURLVars, callbackFunction, expectingXML,
                      callingContext, "OPTIONS", null, bodyType, body);
  },

  trace:
    function(url, optionalURLVars, callbackFunction, expectingXML,
             callingContext, bodyType, body) {
      this._debug("trace");
      this._callServer(url, optionalURLVars, callbackFunction, expectingXML,
                      callingContext, "TRACE", null, bodyType, body);
  },

  deleteIt: function(url, urlVars, callbackFunction,
                     expectingXML, callingContext) {
    this._callServer(url, urlVars, callbackFunction, expectingXML,
                    callingContext, "DELETE", null, null, null);
  },

  head: function(url, urlVars, callbackFunction, expectingXML, callingContext)
  {
    this._callServer(url, urlVars, callbackFunction, expectingXML,
                    callingContext, "HEAD", null, null, null);
  },

  /**************************************************************************
     PRIVATE METHODS
  *************************************************************************/

  _callServer: function(url, urlVars, callbackFunction, expectingXML,
                       callingContext, requestMethod, bodyVars,
                       explicitBodyType, explicitBody) {

    if (urlVars==null) {
      urlVars = new Array();
    }

    this._debug("_callServer() called. About to request URL\n"
                + "call key: [" + this.calls.length + "]\n"
                + "url: [" + url + "]\n"
                + "callback function: [" + callbackFunction + "]\n"
                + "treat response as xml?: [" + expectingXML + "]\n"
                + "Request method?: [" + requestMethod + "]\n"
                + "calling context: [" + callingContext + "]\n"
                + "explicit body type: [" + explicitBodyType + "]\n"
                + "explicit body: [" + explicitBody + "]\n"
                + "urlVars: [" + util.describe(urlVars) + "]\n"
                + "bodyVars: [" + util.describe(bodyVars) + "]"
              );


    var xReq = this._createXMLHttpRequest();
    xReq.onreadystatechange = function() {
      ajaxCaller._onResponseStateChange(call);
    }

    var call = {xReq: xReq,
                callbackFunction: callbackFunction,
                expectingXML: expectingXML,
                callingContext: callingContext,
                url: url};

    if (urlVars!=null) {
      var urlVarsString = this._createHTTPVarSpec(urlVars);
      if (urlVarsString.length > 0) { // TODO check if appending with & instead
        url += "?" + urlVarsString;
      }
    }

    xReq.open(requestMethod, url, true);

    if (   requestMethod=="GET"
        || requestMethod=="HEAD"
        || requestMethod=="DELETE") {
      this._debug("Body-less request to URL " + url);
      xReq.send(null);
      return;
    }

    if (   requestMethod=="POST"
        || requestMethod=="PUT"
        || requestMethod=="OPTIONS"
        || requestMethod=="TRACE") {
      bodyType = null;
      body = null;
      if (explicitBodyType==null) { // It's a form
        bodyType = 'application/x-www-form-urlencoded; charset=UTF-8';
        body = this._createHTTPVarSpec(bodyVars);
      } else {
        bodyType = explicitBodyType;
        body = explicitBody;
      }
      this._debug("Content-Type: [" + bodyType + "]\nBody: [" + body + "].");
      xReq.setRequestHeader('Content-Type',  bodyType);
      xReq.send(body);
      return;
    }

    this._debug("ERROR: Unknown Request Method: " + requestMethod);


  },

  // The callback of xmlHttpRequest is a dynamically-generated function which
  // immediately calls this function.
  _onResponseStateChange: function(call) {

    xReq = call.xReq;

    if (xReq.readyState < 4) { //Still waiting
      return;
    }

    if (xReq.readyState == 4) { //Transmit to actual callback
      this._debug("Call " + util.describe(call)
                + " with context [" + call.callingContext+"]"
                + " to " + call.url + " has returned.");
      callbackFunction = call.callbackFunction;
      if (!callbackFunction) { // Maybe still loading, e.g. in another JS file
        setTimeout(function() {
          _onResponseStateChange(call);
        }, 100);
      }
      var content = call.expectingXML ? xReq.responseXML : xReq.responseText;
      responseHeaders = xReq.getAllResponseHeaders();
      headersForCaller = this.shouldMakeHeaderMap ?
        this._createHeaderMap(responseHeaders) : responseHeaders;
      callbackFunction(content, headersForCaller, call.callingContext);
    }

    call = null; // Technically the responsibility of GC
    this.pendingResponseCount--;

  },

  // Browser-agnostic factory function
  _createXMLHttpRequest: function() {
    if (window.XMLHttpRequest) {
      return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      return new ActiveXObject('Microsoft.XMLHTTP')
    } else {
      _error("Could not create XMLHttpRequest on this browser");
      return null;
    }
  },

  _createHTTPVarSpec: function(vars) {
      var varsString = "";
      for( key in vars ) {
        var value = vars[key];
        if (this.shouldEscapeVars) {
          escapePlusRE =  new RegExp("\\\+");
          value = value.replace(escapePlusRE, "%2B");
        }
        varsString += '&' + key + '=' + value;
      }
      if (varsString.length > 0) {
        varsString = varsString.substring(1); // chomp initial '&'
      }
      this._debug("Built var String: " + varsString)
      return varsString;
   },

  /* Creates associative array from header type to header */
  _createHeaderMap: function(headersText) {
    extractedHeaders = headersText.split("\n");
    delete extractedHeaders[extractedHeaders.length]; // Del blank line at end
    headerMap = new Array();
    for (i=0; i<extractedHeaders.length-2; i++) {
      head = extractedHeaders[i];
      fieldNameEnding = head.indexOf(":");
      field = head.substring(0, fieldNameEnding);
      value = head.substring(fieldNameEnding + 2, head.length);
      value = value.replace(/\s$/, "");
      headerMap[field] = value;
    }
    return headerMap;
  },

  _debug: function(message) {
      if (this.shouldDebug) {
        alert("AjaxJS Message:\n\n" + message);
      }
  },

  _error: function(message) {
      if (this.shouldDebug) {
        alert("AjaxJS ERROR:\n\n" + message);
      }
  }

};

Sorry for the length. But if anyone can help me understand why this is working in IE and not FireFox, I would greatly appreciate it.

clang · April 9, 2008

Ended up using this example. Now everything works great.

Sign In

[SOLVED] Form works in IE not FF

Recommended Posts

clang

Link to comment

Share on other sites

clang

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information