Announcement

Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Wednesday, April 30, 2014

How to trigger button click in MVC4?

How to trigger button click in MVC4?

This post will let you know to handle the click event of button when Enter Key is hit by the user.

A function keypressHandler() is created in which we need to check whether the key hit by the user is Enter Key or not. If it is, then get the focus on the login button and trigger the click event.

This keypressHandler() function should be called from the form whenever any key is pressed.

In the example code below, we have assumed the id of the form as 'loginForm'. You can replace it with your own form Id.


function keypressHandler(e){
if (e.which == 13) {
$(this).blur();
$('#Loginbutton').focus().click(); //give your submit button an ID
}
}

$('#loginForm').keypress(keypressHandler); //give your form an ID

How to prevent the functionality of browser back button?

Prevent the functionality of browser back button

In this post I will teach you how to prevent the functionality of browser back button.

Since, we have to prevent the back functionality of the browser, this can't be handled from the code-behind. This is the client functionality. So we need to so something at the client side.

So, we simply have to use javascript history object which is a part of the window object.

history object has 3 methods and 1 property.

history object methods:
  • forward()- loads the next URL in the history list. It won't work if the next page does not exist in the history list.
  • back()- loads the previous URL in the history list. It won't work if the previous page does not exist in the history list.
  • go()- loads the specific URL from the history list. It accepts either int parameter or string parameter.
history object property:
  • length- returns the number of URL in the history list.
I have created a javascript function where I have redirected the user to the current page using window.history.forward() method.


/*This is the function*/
function disableBackButton() {
window.history.forward()
}
/* call the function */
disableBackButton();

/* when the page loads again call the function */
window.onload=disableBackButton();

/* if the page is persisted than disable the back functionality */
window.onpageshow = function (evt) {
if (evt.persisted) disableBackButton()
}

/* do nothing on unload */
window.onunload = function () { void (0) }


NOTE: Place this code in the <script type=text/javascript></script> tag. The code should be placed on the page where the user see Log Out button.

Friday, March 21, 2014

How to prevent the default action of submit button?

This is my submit button with id as "btnSubmitModification" .

We need to prevent the default action of this submit button i.e., to prevent the
form from submission on click of this button.

<input type="submit" class="button" id="btnSubmitModification" value="Save"/>

Here is the code in script tag.
This is achieved using jquery.

We handle the click event of submit button and pass the parameter to the
event handler function as e.

This is parameter is than used to prevent the default action of submit button i.e., to
prevent the form from submission.

Just write e.preventDefault(); and you are done.

<script type="text/javascript">
    $('#btnSubmitModification').click(function (e) {
        if ($("#txtName").val() != "" && $("#txtName").val() != null) {
            // write your further code here.
            return true;
        }
        else {
            alert('Please enter name.');
            e.preventDefault();
        }
    });
</script>

Alternative way to do the same thing is as: Just write return false and don't pass any
argument to the function.

<script type="text/javascript">
    $('#btnSubmitModification').click(function () {
        if ($("#txtName").val() != "" && $("#txtName").val() != null) {
            // write your further code here.
            return true;
        }
        else {
            alert('Please enter name.');
            return false;
        }
    });
</script>