1

HTML:

<a href="#" class="button" onclick="sendDetails(\'Edu\')">

JS:

function sendDetails(type) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
    names = $("#names" + type).val();
    Input = encodeURIComponent($("#Input" + type).val());
    ....

The link jumps to top of page. I tried to use event.preventDefault() to stop jumping to top of page. However, it works only in Chrome and not in IE and Firefox. How can I solve it?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
user1854007
  • 95
  • 1
  • 2
  • 8

3 Answers3

3

instead of "#" you can use javascript:; so there is no jumping, make sure to return false to disable the link-behavior

<a href="javascript:;" onclick="something();return false;">link</a>
FibreFoX
  • 2,858
  • 1
  • 19
  • 41
2

You can't only use the window.event to control an event. Try standardizing it like:

function sendDetails(e, type) {
    var evt = window.event || e;
    if (evt.preventDefault) {
        evt.preventDefault();
    } else {
        evt.returnValue = false;
    }
    // ...
}

And your HTML would have to be:

<a href="#" class="button" onclick="sendDetails(event, 'Edu');">ASDF</a>

One other non-jQuery solution is to just modify your HTML to be:

<a href="#" class="button" onclick="sendDetails(event, 'Edu'); return false;">ASDF</a>

in which case you wouldn't have to use anything dealing with event in your sendDetails function. The return false; will prevent the default behavior automatically. But note - if any exceptions occur in your sendDetails function, the return false; won't execute and will allow the default behavior. That's why I like using preventDefault - you can call it immediately in the function to immediately stop the behavior, then do what you need.

At the same time, if you're using jQuery, try binding the click event like this:

$(document).ready(function () {
    $(".button").on("click", function (e) {
        e.preventDefault();
        // Your sendDetails code (without the "event" stuff)
        // OR call sendDetails (and remove the "event" stuff in the sendDetails function)
    });
});

in which case your HTML would be:

<a href="#" class="button">ASDF</a>

Although it would be a lot easier to target the specific elements that this applies to, instead of using the .button selector I provided. I'm sure the "button" class applies to more than just these targeted <a>, but maybe I'm wrong :)

Using jQuery is nice in this situation because it already standardizes the event object in a way that you can just use that e variable I included in the click callback. I'm sure it does a little more than just window.event || e, so I'd prefer/suggest using jQuery for handling events.

Ian
  • 50,146
  • 13
  • 101
  • 111
  • 1
    Nice response, but I think one should have a habit of using – Gaurav Pandey Feb 18 '13 at 18:32
  • 1
    @gaurav Well, preventing the default behavior or returning false will prevent the `"#"` from actually happening. And anyways, that's a big debate ( http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 ). It depends. I would rather have `"#"` as the `href` because then if something bad does happen (which it shouldn't), then I can visually see it...that means there's something wrong with the code. If you are handling events correctly, it should be fine to have either. Also, I'm not sure what happens if Javascript's disabled and you use the `void` stuff – Ian Feb 18 '13 at 18:40
  • Ahh got you :) What you write matter less, what matters is how you handle it in a clean way – Gaurav Pandey Feb 18 '13 at 18:55
  • 2
    @gaurav: Even better: Use links for what they are intended, namely linking to other documents/parts of the document. Use buttons for user interaction. You can style any of those however you want anyway. – Felix Kling Feb 18 '13 at 19:04
  • @FelixKling Haha good point, I agree, although I am guilty for using links as buttons at times... – Ian Feb 18 '13 at 19:13
0

You are already using jQuery, just do it the jQuery way. jQuery wraps the event object and provides a normalized event object so you can just use the standard preventDefault, you don't need to fork depending on what the browser supports.

<button class="senddetail" data-type="edu">Education</button>
<button class="senddetail" data-type="com">Commercial</button>
<!-- why not just use a button instead of styling a link to look
     like a button? If it does need to be a link for some reason
     just change this back to an anchor tag, but keep the data
     attributes and change the class to "button senddetail" -->

<script>
    function sendDetails(type) {

    // Assuming names and input are not globals you need to declare
    // them or they will become implicit globals which can cause
    // all sorts of strange errors if other code uses them too
    var names, input;

    names = $("#names" + type).val();

    // you should only use capitalized variables for
    // Constructor functions, it's a convention in JS
    input = encodeURIComponent($("#Input" + type).val());

    //....
    }

  // just calling $ with a function inside of the invocation
  // is the same as using $(document).ready
  $(function () {
    // instead of using onClick, use jQuery to attach the
    // click event in a less intrusive way
    $('.senddetail').on('click', function (event) {
      // no matter what browser this runs in jQuery will
      // provide us a standard .preventDefault to use
      event.preventDefault();
      // jQuery sets 'this' to the DOM element that the event fired on,
      // wrapping it in another jQuery object will allow us to use the
      // .data method to grab the HMLM5 data attribute
      var type = $(this).data('type');
      sendDetails(type);
    });
  });
</script>
Useless Code
  • 12,123
  • 5
  • 35
  • 40
  • on("click", function(){...} is better since jQuery uses event-delegates and is suggested by them – FibreFoX Feb 18 '13 at 18:32
  • @FibreFoX Not true. `.click(function () {});` is the same thing as `.on("click", function () {});` - it's just a shortcut. Actual event delegation is achieved by using `on`, but with 3 parameters...and it's not really applicable to this situation. http://api.jquery.com/on/ – Ian Feb 18 '13 at 18:34
  • @Ian yes, its a shortcut, but imagine to export your methods to a plugin, than you can put "namespaces" into that eventnames on("click.yourNameSpace"). activating/deactivating becomes more easy, and btw: having 2 parameter (on) or just one (click) isn't really that much more code – FibreFoX Feb 18 '13 at 18:37
  • @FibreFoX I wasn't disagreeing with you that they should use `on` instead of `click`. I was disagreeing with you about the fact that `on` with two parameters uses event delegation...it doesn't; `on` with three parameters does. And it's just your opinion that `on` is "better". It's really not important for every situation. There's arguments for either side. – Ian Feb 18 '13 at 18:42
  • 1
    @FibreFoX Event delegation is great, but not necessary in all situations. The example in the question for instance showed a single "button", you don't need delegation for that. I do suspect that the actual implementation has more than one button in which case delegation might be appropriate. The provided code however does not provide enough context to know where to attach the delegation, attaching it to the body à la `.live()` would provide much worse performance that just attaching a few separate event handlers. – Useless Code Feb 18 '13 at 19:04