Alternative to RegisterOnSubmitFunction(...);

Discussion in 'JavaScript' started by mvelazquez, Feb 27, 2014.

  1. #1
    First of all , greetings to all .

    I opened this topic to see if someone can support me in the following issue .

    I've been using for several years a system which I program processes, which I have no access to the code. On the client side allows me to create forms in which I can use javascript and the system adds the Submit button to the form, which I have no control to.

    Today I am migrating to a new version of the system and I have to develop some forms. A function widely used to perform calculations and also validate information was complex fields : RegisterOnSubmitFunction(...);


    This feature helped me at the time of executing the submit button, perform some function and return false if not validate anything. stopping the form prosesing.

    The problem is that in the new instance no longer uses buttons Input type, but the label <button>

    Before it was as follows :

    Reviewing the source code, the button was so

    <input type="submit" name="button" id="button" value="Submit" />
    Code (markup):
    and the code I entered was inserted into the body

    <body> ..
    
    //Here I was programming my form
    
    <SCRIPT type="text/javascript">
    
    function process () {
    .....
    }
    
    RegisterOnSubmitFunction ( process );
    
    < / SCRIPT >
    
    <body>
    Code (markup):
    But now the button is as follows:


    < div class = "x -btn x -btn -blue -button -small x -box- item x -toolbar -item x -btn -default -toolbar -small x - noicon x -btn - noicon x -btn -default- noicon -small- toolbar "style = " border -width: 1px ; border-color : rgb (209 , 209, 209 ) important , display : none ; "id =" button- 1391 ">
       <em id="button-1391-btnWrap">
          <button id="button-1391-btnEl" type="button" class="x-btn-center" hidefocus="true" role="button" AUTOCOMPLETE="off">
             <span id="button-1391-btnInnerEl" class="x-btn-inner" style=""> Submit< / span >
             <span id="button-1391-btnIconEl" class="x-btn-icon "> < / span >
          < / button>
       < / em >
    < / div >
    Code (markup):
    And when I try to use RegisterOnSubmitFunction not work

    An alternative method that comes to mind
     
    mvelazquez, Feb 27, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Mein gott, if I had that many DIV, SPAN, classes and inlined style around a BUTTON, I'd put a bullet in my head... NOT that you should be using button since it's a submit, and instead should be using input[submit] if you give a flying purple fish about it working when there's no .js

    as to your question, welcome to why I don't like off the shelf frameworks or libraries... Though I have to wonder, how does this "registerOnSubmitFunction" actually know what element to apply your 'process' function to? That seems to be the functionality part you are missing.

    If you want a simple workalike, this is typically what I use to add an event handler:
    function addHandlerById(targetId, event, handler) {
    	var e = document.getElementById(targetId);
    	if (e) {
    		if (e.addEventListener)
    			e.addEventListener(event, handler, false);
    		else
    			e.attachEvent('on' + event, handler);
    		else return false;
    		return e;
    	}
    	return false;
    }
    Code (markup):
    Nice as it returns the element being attached to, or false if it was unable to find the element or an attach method. To use it, well, let's say your form has the ID "form1391" (wild guess)

    addHandlerById('form1391', 'submit', function(e) {
    	e = e || window.event;
    	var t = e.target || e.srcElement;
    	// your code here
    });
    Code (markup):
    Attaching it to the FORM means you can have multiple submits and they all work.

    That said, do something about that disastrosly bloated and terrifying markup -- if the rest of the page is like that you're using ten to twenty times the code you should be. I mean, what the devil is that doing for ONE BUTTON that requires more than one wrapper, much less all those endless pointless garbage classes?!? That's 680 bytes doing the job of what I suspect would just be:

    
    <br />
    <input
    	type="submit"
    	class="submitButton"
    	value="Submit"
    />
    Code (markup):
    ... also the placement of spaces on that outer DIV is gibberish; did you do that on purpose to avoid smileys on these forums, or is that in the actual code?
     
    deathshadow, Feb 28, 2014 IP
  3. mvelazquez

    mvelazquez Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    The idea of Handler took me to see this and other options and found a feature that was very useful to me and I was able to solve the problem. I do not know if it is the best option but I will temporarily:

    Seeking all Span tags, and if the inside text is Submit, took the ID

    I had to use the "parent" because I realized that my code was within a iFame

    
    var inputs = parent.document.getElementsByTagName("span");
    
    for (var i = 0; i < inputs.length; i++) {
    
      tagBoton = inputs[i].id;
        if(tagBoton != "")
            if(parent.document.getElementById(tagBoton).textContent == "Submit")
                idBoton = parent.document.getElementById(tagBoton).id;
           
       
    }
    
    document.getElementById(idBoton).onclick=function(){procesar()};
    
    Code (markup):
     
    mvelazquez, Mar 2, 2014 IP