如果启用了Javascript，则使用onclick事件替换提交按钮

Question

Keeping with the idea of progressive implementation, I have a simple page refresh button on my page. Is there an elegant way to turn that button into an onclick="ajaxfunction()" event if javascript is enabled?

All I've come up with having two buttons, and hiding one with CSS -- which seems a bit clunky.

Note, I have the ajax call working, etc - I just want that $%@# button to switch over...

Answer 1

Attach an event listener to the submit button which listens to the click event and cancels the event. With prototype it would be something like this:

document.observe('dom:loaded', function(){
    $('mysubmitbuttonid').observe('click',function(event){
        new Ajax.Request(...);
        Event.stop(event);
        return false;
    });
});

Answer 2

Assuming you've a form with a button type of submit :

<button id="sbut" type="submit" ...>OK</button>

You can do this:

function chgButton () {
    var button = document.getElementById('sbut');
    button.type = 'button';
    button.addEventListener('click', ajaxfunction,false);
    return;
}

window.onload = function () {
    chgButton();
    return;
}