Operations before submit in latest version of Safai

Question

I have read lot of threads about the timing and the handling of events in javascript, but I haven't found the solution for my problem yet or at least I'm an idiot :(.

Here are the list of the references :

1. jQuery show() function is not executed in Safari if submit handler returns true
2. JavaScript commands not executed in order in Safari
3. Why is setTimeout(fn, 0) sometimes useful?
4. setTimeout with zero delay used often in web pages, why?

I have the latest version of OsX (Mountain Lion) and latest version of safari and the following code:

function handler(btn, form,content){
var submitHandler = function(){
    form.submit(function(e){
        return true;
    });
};

btn.click(function(e){
    form.children().hide();       //command1
    content.show();               //command2
    setTimeout(submitHandler,0);  //command3
});

}

I have created a JsFiddle example also to represent my problem: http://jsfiddle.net/nxjohny/t4s5W/1/ Unfortunately, I have to use the submit button with the name="submit" property. So there is no option to preventDefault the click event and after submit the form programaticaly. :(

The code will be executed when the user click on the button and the commands do what they have to do: command1 hide the children elements of the form. (Add style="display: hidden;" to the children elements. command2 will show the hidden part of the form.(Add style="display:block" to the corresponding element). After the event handler accept the form.submit and return true.

What i actually want with this code to Hide and Show the proper elements of the html page. The code will apply the style related parts on the page and after return with the submit without to Hide/Draw the proper Elements.

This code works on Chrome,Firefox in Linux/Windows/OsX And Safari in Windows, except Osx- Safari 6.X.X.

This code works well with Safari 5.X.X and OsX.

What should i add to the code to really hide and display the elements Before the submit?

Every comment would be welcome and grately appreciated!

Best Regards!

Answer 1

There is a way to submit the form using the magic of call()

function submitMyForm() {

    //reference to the form you want to submit
    var oldForm = document.getElementById("myForm");

    //How you would normally submit the form
    //oldForm.submit(); //Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function    

    //How you can submit the form with the "submit" naming conflict
    var newForm  = document.createElement('form');  //create a new form and leach off its submit
    newForm.submit.call(oldForm);  //will submit the form without the error above
}

---

Passing the submit Value to the server

function submitMyForm(oldForm, button) {

    var input = document.createElement("input");
    input.type = "hidden";
    input.name = "submit";
    input.value = button.value || "Submit";
    oldForm.removeChild(button);
    oldForm.appendChild(input);

    var newForm = document.createElement('form');
    newForm.submit.call(oldForm);
}


var frm = document.getElementById("myForm");
var btn = frm.submit;
submitMyForm(frm, btn);

JSFiddle