#1
  1. Moderator
    ASP Super Hero (2500 - 2999 posts)

    Join Date
    Dec 2006
    Location
    West London, UK
    Posts
    2,715
    Rep Power
    934

    HTML & JavaScript <fieldset> Stops javascript function working


    Hi All

    I have a curious question, i have a form on a page that uses fieldset's which seems to be stopping a call to a javascript function.

    This is the form as i want it...
    HTML Code:
    <form class="sheet" name="comForm" action="response_normal.asp" method="post" onsubmit="xmlhttpPost('response_form_ajax.asp', 'comForm', 'commentsDiv', '<img src=\'pleasewait.gif\'>'); return false;">
    	<fieldset>
    		<legend>Add Comments</legend>
     
    		<label for="first_name">Name</label>
    		<input type="text" name="name" id="name" size="20" value="Ian" /><br />
     
    		<label for="email">E-Mail</label>
    		<input type="text" name="email" id="email" value="ian@ian-c.co.uk" /><br />
     
    		<label for="comment">Comment</label>
    		<textarea rows="8" cols="auto" name="comment" id="comment">Hi, Great code love your work.</textarea>
     
    		<input type="hidden" name="date" id="date" value="<% =Now()%>" /><br />
    		<button type="submit" id="btn" name="btn" value="send">Add Comment</button>
    		<button type="reset" id="btnReset" name="btnReset">Reset Form</button>
    	</fieldset>
    </form>


    And this form works...
    HTML Code:
    <form class="sheet" name="MyForm" action="response_normal.asp" method="post" onsubmit="xmlhttpPost('response_form_ajax.asp', 'MyForm', 'MyResult', '<img src=\'pleasewait.gif\'>'); return false;">
    	<input name="name" type="text" style="width: 258px" />
    	<br />
    	<input name="email" type="text" style="width: 255px" />
    	<br />
    	<label>
    	<textarea name="comment" id="textarea" cols="45" rows="5"></textarea>
    	</label>
    	<input type="hidden" name="date" value="<%=Now()%>" />
    	<br />
    	<input name="btn" type="submit" value="Send" />
    </form>


    Without the fieldset the second form works as i want it to, can anyone say why the fieldset stops the first form from working?

    It's the onsubmit that dont seem to work, it always call the response_normal.asp page, wich i actually don't want it to.

    I am really stumped by this one, and the layout of the page is CSS which is why the fieldset is there as it seems to control the layout.

    Regards
    Ian
    Last edited by icoombs; July 30th, 2009 at 10:29 AM.
  2. #2
  3. Moderator
    ASP Super Hero (2500 - 2999 posts)

    Join Date
    Dec 2006
    Location
    West London, UK
    Posts
    2,715
    Rep Power
    934
    Hi Again,

    Just an update not a solution.

    After a day or so (including a very Late Night) of research i have found another post related to "JavaScript cannot handle elements inside fieldset tags" although it has not really helped as i have little knowledge of javascript.

    The post i found refers to using this.getElementsByTagName in place of this.formElement.elements in there code but i cant see how i can replicate this in the functions i am using.

    Could you please look over the functions below and suggest anything that might help solve this issue.

    javascript Code:
    function xmlhttpPost(strURL,formname,responsediv,responsems  g) {
        var xmlHttpReq = false;
        var self = this;
        if (window.XMLHttpRequest) {
            self.xmlHttpReq = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        self.xmlHttpReq.open('POST', strURL, true);
        self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        self.xmlHttpReq.onreadystatechange = function() {
            if (self.xmlHttpReq.readyState == 4) {
                updatepage(self.xmlHttpReq.responseText,responsedi  v);
            }
    		else{
    			updatepage(responsemsg,responsediv);
     
    		}
        }
        self.xmlHttpReq.send(getquerystring(formname));
    }
     
    function getquerystring(formname) {
        var form = document.forms[formname];
    	var qstr = "";
     
        function GetElemValue(name, value) {
            qstr += (qstr.length > 0 ? "&" : "")
                + escape(name).replace(/\+/g, "%2B") + "="
                + escape(value ? value : "").replace(/\+/g, "%2B");
        }
     
    	var elemArray = form.elements;
        for (var i = 0; i < elemArray.length; i++) {
            var element = elemArray[i];
            var elemType = element.type.toUpperCase();
            var elemName = element.name;
            if (elemName) {
                if (elemType == "TEXT"
                        || elemType == "TEXTAREA"
                        || elemType == "PASSWORD"
    					|| elemType == "BUTTON"
    					|| elemType == "RESET"
    					|| elemType == "SUBMIT"
    					|| elemType == "FILE"
    					|| elemType == "IMAGE"
                        || elemType == "HIDDEN")
                    GetElemValue(elemName, element.value);
                else if (elemType == "CHECKBOX" && element.checked)
                    GetElemValue(elemName, 
                        element.value ? element.value : "On");
                else if (elemType == "RADIO" && element.checked)
                    GetElemValue(elemName, element.value);
                else if (elemType.indexOf("SELECT") != -1)
                    for (var j = 0; j < element.options.length; j++) {
                        var option = element.options[j];
                        if (option.selected)
                            GetElemValue(elemName,
                                option.value ? option.value : option.text);
                    }
            }
        }
        return qstr;
    }
    function updatepage(str,responsediv){
        document.getElementById(responsediv).innerHTML = str;
    }
     
    function sendmessage(mess){
    	alert(mess);
    }


    I think the changes need to be made somewhere in "function getquerystring(formname)" starting at line 24 but my very limited knowledge of Javascript gives up the ghost at that point.

    The other option is to change from 'Post' to 'Get' with the form and use querystring rather than the form collection, as this is an AJAX system so a visible querystring is not an issue. all i need to achieve is the submission of the form using AJAX.

    Just to clarify: the form is to allow site visitors to leave comments, the form layout as in the original post are CSS controlled and the submission method needs to be AJAX so the user stays on the main page. Any suggestions for achieving this would be welcome as long as it works i don't really care how it works.

    So if you have any ideas on fixing the original or changing the method to 'get' and making this work, either will do, i would much appreciate it.

    Regards
    Ian
  4. #3
  5. Moderator
    ASP Super Hero (2500 - 2999 posts)

    Join Date
    Dec 2006
    Location
    West London, UK
    Posts
    2,715
    Rep Power
    934
    Change of tack:

    I have started playing around and decided to try and pass the form elements via a parameter in the function which i now have working with...

    HTML Code:
    <form class="sheet" name="comForm" action="response_normal.asp" method="post" onsubmit="callAJAX('commentsDiv', 'response_form_ajax.asp', '&name='+document.comForm.name.value+'&email='+doc  ument.comForm.email.value+'&com='document.comForm.  comment.value); return false;">


    All i need to do now is preserve line breaks from a textarea the comform.comment part of the above line.

    Can anyone tell me how i would get it to pass the textarea.value complete with line breaks <br /> which are probably chr(13).

    Many thanks
    Ian

    Edit: The function passes to an ASP page where it will be written to an XML file if this makes any difference.
    Last edited by icoombs; August 1st, 2009 at 11:46 AM.
  6. #4
  7. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,135
    Rep Power
    2925
    using the JavaScript function "escape" should work fine:
    Code:
    onsubmit="callAJAX('commentsDiv', 'response_form_ajax.asp', '&name=' + escape(document.comForm.name.value) + '&email=' + escape(document.comForm.email.value) + '&com=' + escape(document.comForm.comment.value); return false;"
    this function is doing the same thing as Server.UrlEncode in server side ASP.
  8. #5
  9. Moderator
    ASP Super Hero (2500 - 2999 posts)

    Join Date
    Dec 2006
    Location
    West London, UK
    Posts
    2,715
    Rep Power
    934
    Thanks for that Shad, i had tried escape but i must have got the syntax wrong somewhere. It works now so immediate panic over.

    I would still like to sort the issue with the original xmlhttpPost function as there is always the issue of length of query strings, If someone enters loads of text in the comment field it may just make the query string too long, so it would be nice to get back to the form collection but i just cant work out why when using javascript you don't seem to be able to use fieldset in the form.

    Cheers

    Ian
  10. #6
  11. Moderator From Beyond
    ASP Mastermind (5000+ posts)

    Join Date
    Sep 2004
    Location
    Israel
    Posts
    31,135
    Rep Power
    2925
    you can always use document.getElementById instead of using the form collection..
    this is pretty bullet-proof, as long as you have such element anywhere in the
    document, it will find it.

Similar Threads

  1. Replies: 1
    Last Post: February 8th, 2005, 02:58 PM
  2. calling javascript function of one document from another document
    By hithere in forum HTML, JavaScript And CSS Help
    Replies: 1
    Last Post: December 9th, 2004, 09:51 AM
  3. HTML Email
    By haloscorned in forum ASP Development
    Replies: 9
    Last Post: November 25th, 2004, 08:21 AM
  4. not returning records when it should
    By aliaga61 in forum ASP Development
    Replies: 1
    Last Post: January 16th, 2004, 08:44 AM
  5. Replies: 1
    Last Post: August 4th, 2003, 03:43 PM

IMN logo majestic logo threadwatch logo seochat tools logo