0

I have an Html template with a form inside of it.

<form id="my_form" method="post" action="/register/">
<input id="cemail" name="email" size="25" class="textbox required email" style="width: 250px"> <br><br>
<input id="csubmit" type="submit" onclick="Clicked();" value="Send" />

I also have a Jquery code for test if the e-mail introduced is correct:

<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script>
    function Clicked() {
        $("#my_form").validate().form();
        value = $("#cemail").val();
        alert("ufffff");
        $.get("/exists/", {email: value}, function(data) {
            $('#text')[0].innerHTML=data;   
        });
    }
</script>

Until here everything is ok. My problem appears when I execute the program. Always the action="/register" is launched, and I don't want that it occurs. I would like that:

If jquery is desactivated on the client browser, execute the action that the form has. In case that jquery is activated on the client browser, just execute the "Clicked()" function and not the form's action ("/register/" --> calls django function)

Does anyone help me to do that? Is it possible?

Raulsc
  • 75
  • 2
  • 12
  • possible duplicate of http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled – Ankit Jaiswal Feb 26 '13 at 07:14
  • 1
    You can just do `onclick="Clicked(); return false;"` -- but a better approach would be to move your bindings and subsequent functions to an external JS. – ahren Feb 26 '13 at 07:18
  • @ahren I did it, but the form action is still launching. If I set return false I don't want that the action of the form will be launched – Raulsc Feb 26 '13 at 07:44
  • @ahren I had a little mistake. It works doing onclick="Clicked(); return false;" Thanks a lot. – Raulsc Feb 26 '13 at 07:52

1 Answers1

0

You need to return false from your Clicked function.

Return false from an event handler in JavaScript tells the browser not to execute the default action associated with that element (a link, or a button).

If you want to be super-duper correct, you should actually attach yourself to your form's submit action and return false there. This will allow a user to hit the return key to submit your form, but stop the browser from doing a POST:

$('#my_form').submit(function(){
    $("#my_form").validate().form();
    value = $("#cemail").val();
    alert("ufffff");
    $.get("/exists/", {email: value}, function(data) {
        $('#text')[0].innerHTML=data;   
    });
    return false;
});

If JavaScript is disabled, the browser will execute the default action for the form normally.

Jack Shedd
  • 3,501
  • 20
  • 27
  • Sheed my problem is that the button doesn't do anything. The form is the object that execute the default action. So, it is possible to do the same that you said (return false) but specifying the form instead of the element that "launched" the Clicked function? – Raulsc Feb 26 '13 at 07:37
  • @Shedd it works if I set `code´onclick="Clicked(); return false;" – Raulsc Feb 26 '13 at 07:53
  • It's actually probably working without that return false; it's just happening WHILE the browser is also doing the POST. But yeah, just adding return false to your onclick would do the same thing as returning false from the Clicked function. – Jack Shedd Feb 26 '13 at 08:10