Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to trace why submit being called

    I have a form. I am not clicking on the submit button. I am not calling form.submit. Yet the onsubmit event handler is being invoked. I have tested the code on both Firefox and Chromium and it works the same way. Clearly I am doing something which is causing the form to be submitted, but I cannot for the life of me figure out what I changed since it worked properly that would cause this.

    The code is extremely elaborate because this is a significant application. The area that is failing is initiated by changing the value of an <input type='text'> element whose value needs to be validated against a MySQL database by using AJAX. The new value is sent to the server which returns the result of SELECT * FROM tblLR WHERE Location REGEXP '^value', in other words all locations that start with the supplied value. If no locations match an alert explains that, and the user is supposed to be given the opportunity to change the value and repeat the process. If only one location matches the input field value is supposed to be set to the full location value from the database. If multiple locations match then a <select> is inserted into the form to provide a means to choose the value. This worked up until today.

    The nature of the last change to the code was to support replacing <button name='xxx'> with <button id='xxx'>. So in the javascript all references to buttons changed from document.formname.xxx to document.getElementById('xxx'). Using alerts I have traced through the code and everything is working as it did before: the form is modified exactly as it has always been modified as a result of the AJAX response. I can see that by putting an alert at the beginning of the onsubmit handler. But I cannot figure out why the onsubmit handler is being called, since all that the user has done is modify the value of the <input type='text'> field.

    Code:
    /************************************************************************
     *  locationChanged							*
     *									*
     *  Take action when the user changes a field containing a location	*
     *  name to implement assists such as converting to upper case,		*
     *  expanding abbreviations, and completing short form names.		*
     *  This is the onchange method of any input text field that contains	*
     *  location text that is to be mapped to a reference to a		*
     *  LegacyLocation.							*
     *									*
     *  Input:								*
     *	this		an instance of <input type='text'>		*
     ************************************************************************/
    function locationChanged()
    {
        var	form	= this.form;
        if (!form)
        {
    	alert('CommonForm: locationChanged: unable to get form, element is type ' +
    		typeof(this));
    	return;
        }
    
        var	name	= this.name;
        alert('CommonForm: locationChanged: this-><' + this.nodeName +
    	" name='" + this.name + "' value='" + this.value + "'>");
    
        if (name.substring(0,13) == "EventLocation")
        {		// special case for EventLocation input fields
    	ider		= name.substring(13);
    
    	// notify the script updateIndividXml.php that
    	// this event has been changed
    	form.elements["EventChanged" + ider].value	= "1";
        }		// special case for EventLocation input fields
     
        // trim off leading and trailing spaces
        this.value	= this.value.trim();
    
        // if the form has a button named Submit, enable it just in case
        // it was previously disabled
        var	submitButton	= document.getElementById('Submit');
        if (submitButton)
    	submitButton.disabled	= false;
    
        // capitalize words in value if presentation style requires it
        var textTransform	= "";
        if (this.currentStyle)		// try IE API
    	textTransform	= this.currentStyle.textTransform;
        else
        if (window.getComputedStyle)	// W3C API
    	textTransform	= window.getComputedStyle(this, null).textTransform;
        if (textTransform == "capitalize")
    	capitalize(this);
    
        // expand abbreviations
        if (this.abbrTbl)
    	expAbbr(this,
    		this.abbrTbl);
        else
        if (this.value == '[')
    	this.value	= '[Blank]';
    
        // if possible display a loading indicator to the user so he/she is
        // aware that the location lookup is being performed
        if (this.value.length != 0 &&
    	this.value != '[Blank]');
        {		// search only for non-blank location
    	popupLoading(this);
    	alert("Common.js: locationChanged: send Ajax post request: getLocationXml.php?name=" +
    				encodeURIComponent(this.value) +
    				"&form=" + this.form.name +
    				"&field=" + this.name);
    	// get an XML file containing location information from the database
    	HTTP.getXML("getLocationXml.php?name=" +
    				encodeURIComponent(this.value) +
    				"&form=" + this.form.name +
    				"&field=" + this.name,
    		    gotLocationXml,
    		    noLocationXml);
        }		// search only for non-blank location
    }		// locationChanged
    
    /************************************************************************
     *  gotLocationXml							*
     *									*
     *  This method is called when the XML document representing		*
     *  the location or locations is retrieved from the database.		*
     *									*
     *  Input:								*
     *	XML document with response, for example				*
     *									*
     *	<locations count="1" name="Caradoc" form="formname"		*
     *		field="fieldname">					*
     *	  <cmd>SELECT * FROM tblLR WHERE Location='Caradoc' ....</cmd>	*
     *	  <location idlr="17">						*
     *	    <idlr>17</idlr>						*
     *	    <fsplaceid/>						*
     *	    <preposition/>						*
     *	    <location>Caradoc, Middlesex, ON, CA</location>		*
     *	    <sortedlocation>Caradoc, Middlesex, ON, CA</sortedlocation>	*
     *	    <shortname>Caradoc</shortname>				*
     *	    ...								*
     *	  </location>							*
     *	</locations>							*
     ************************************************************************/
    function gotLocationXml(xmlDoc)
    {
        alert("Common.js: gotLocationXml:");
        var	topXml	= xmlDoc.documentElement;
        if (topXml && typeof(topXml) == "object" && topXml.nodeName == 'locations')
        {			// valid response
    	var count	= 0;
    	var field	= '';		// initiating field name
    	var formname	= '';		// form containing field
    	var name	= '';		// search argument
    	var attrs	= '';		// for generating alert message
    	for(var i = 0; i < topXml.attributes.length; i++)
    	{
    	    attrs	+= topXml.attributes[i].name + "='" + 
    			   topXml.attributes[i].value + "', ";
    	    switch(topXml.attributes[i].name)
    	    {
    		case 'count':
    		{	// number of matches
    		    count	= parseInt(topXml.attributes[i].value);
    		    break;
    		}	// count
    
    		case 'name':
    		{	// search argument
    		    name	= topXml.attributes[i].value;
    		    break;
    		}	// search argument
    
    		case 'field':
    		{	// name of field initiating search
    		    field	= topXml.attributes[i].value;
    		    break;
    		}	// field
    
    		case 'form':
    		{	// form name containing field
    		    formname	= topXml.attributes[i].value;
    		    break;
    		}	// form name
    	    }		// act on specific attributes
    	}		// loop through attributes
    
    	// locate the form containing the element that initiated the request
    	var	form	= document.forms[formname];
    	if (form === undefined)
    	{		// form not found
    	    alert("Common.js: gotLocationXml: form name='" + formname +
    			"' not found");
    	    return;
    	}		// form not found
    
    	// locate the element that initiated the request
    	var	element	= form.elements[field];
    	if (element === undefined)
    	{		// element not found
    	    alert("Common.js: gotLocationXml: element name='" + field +
    			"' not found in form");
    	    return;
    	}		// element not found
    
    	// if there is exactly one location matching the request then
    	// replace the text value of the element with the full location
    	// name from the database
    	if (count == 1)
    	{		// exactly one matching entry
    	    for(var j = 0; j < topXml.childNodes.length; j++)
    	    {		// loop through children of top node
    		var child	= topXml.childNodes[j];
    		if (child.nodeType == 1 && child.nodeName == 'location')
    		{	// <location> element representing record
    		    for(var k = 0; k < child.childNodes.length; k++)
    		    {		// loop through children of <location> record
    			// each elt represents a field in the database record
    			// or possibly text for presentation purposes
    			var elt	= child.childNodes[k];
    			if (elt.nodeType == 1 && elt.nodeName == 'location')
    			{	// location field
    			    element.value	= getText(elt).trim();
    			    break;	// stop searching
    			}	// location field
    		    }		// loop through children of <location> record
    		    break;	// only look at first <location> record
    		}	// <location> element representing record
    	    }		// loop through children of top node
    	}		// exactly one matching location
    	else
    	if (count == 0)
    	{		// no matching entries
    	    var	msgDiv	= document.getElementById('msgDiv');
    	    if (msgDiv)
    	    {		// have popup <div> to display message in
    		parms	= {"template"	: "",
    			   "name"	: name};
    try {
    		displayDialog(msgDiv,
    			      'NewLocationMsg$template',
    			      parms,
    			      element,		// position
    			      null,		// button closes dialog
    			      false);		// default show on open
    } catch (e) { alert("Common.js: display NewLocationMsg dialog failed: " +
    		e.message); }
    	    }		// have popup <div> to display message in
    	    else
    		alert("Note: '" + name +
    			"' is a previously undefined location.");
    	}		// no matching entries
    	else
    	{		// multiple matching entries
    	    // present selection list for choice
    	    var	select		= document.createElement('select');
    	    select.onchange	= locationChosen;
    	    select.setAttribute("for", element.name);
    		
    	    // create option element under select
    	    var	option	= new Option("[choose a location]", idlr, false, false);
    	    // IE does not create option element correctly
    	    option.innerHTML	= "[choose a location]";
    	    option.value	= -1;	
    	    select.appendChild(option);
    
    	    for(var j = 0; j < topXml.childNodes.length; j++)
    	    {		// loop through children of top node
    		var child	= topXml.childNodes[j];
    		if (child.nodeType == 1 && child.nodeName == 'location')
    		{	// <location> element representing record
    		    var	idlr	= 0;
    		    var	locname	= "";
    
    		    for(var k = 0; k < child.childNodes.length; k++)
    		    {		// loop through children of <location> record
    			// each elt represents a field in the database record
    			// or possibly text for presentation purposes
    			var elt	= child.childNodes[k];
    			if (elt.nodeType == 1)
    			{	// element (tag) node
    			    if (elt.nodeName == 'idlr')
    			    {	// numeric key field
    				idlr	= parseInt(getText(elt).trim());
    			    }	// numeric key field
    			    else
    			    if (elt.nodeName == 'location')
    			    {	// location name field
    				locname	= getText(elt).trim();
    			    }	// location name field
    			}	// element (tag) node
    		    }		// loop through children of <location> record
    		
    		    // create option element under select
    		    var	option	= new Option(locname, idlr, false, false);
    		    // IE does not create option element correctly
    		    option.innerHTML	= locname;
    		    option.value	= idlr;	
    		    select.appendChild(option);
    		}	// <location> element representing record
    	    }		// loop through children of top node
    		
    	    // create option element under select
    	    var	option	= new Option("[cancel]", -2, false, false);
    	    // IE does not create option element correctly
    	    option.innerHTML	= "[cancel]";
    	    option.value	= -2;
    
    	    // display the selection list to the user by inserting it
    	    // into the same cell as the input field	
    	    select.appendChild(option);
    
    	    // select has been constructed with an option for eaching
    	    // matching location
    	    var	cell	= element.parentNode;
    	    cell.appendChild(select);
    	}		// multiple matching entries
        }			// valid response
        else
        {
    	if (topXml && typeof(topXml) == "object")
    	    alert("Common.js: gotLocationXml: " + tagToString(topXml));
    	else
    	    alert("Common.js: gotLocationXml: '" + xmlDoc + "'");
        }
    
        hideLoading();	// hide the "loading" indicator
    }		// gotLocationXml
    
    /************************************************************************
     *  noLocationXml							*
     *									*
     *  This method is called if there is no response			*
     *  file.								*
     ************************************************************************/
    function noLocationXml()
    {
        alert("Common.js: noLocationXml error");
    }		// noLocationXml

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Try not calling locationChanged() when the text field is changed and see if onsubmit is still triggered when the text field changes. And also it's easier and better to debug using Firebug or Chrome dev tools than using alerts. Set breakpoints and trace where the execution goes.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Also, what does your <HTML> form tag look like?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •