Strange Page Reload in Submit or Onclick

Question

I use only onsubmit even in that just refresh the grid that i have, But i don't know the reason for page reloading

Here's my Form Action

<form id="fff" onsubmit="return get_Search()">

Here is my Search Button

<li><a href="#" class="srch" onclick="get_Search()"></a></li>

My On Click Event

$j( "#PrsNo" ).keypress(function( event ) {
        if ( event.which == 13 ) {
        get_Search();
        }
    });

And this is my Fuction :

function get_Search()
{
    //  alert('enter');
    var PrsNo = $("#PrsNo").val();
    var PrsRequestedBy = $("#PrsRequestedBy ").val();
    var PrsDepartment = $("#PrsDepartment").val();
    var PrsTheme = $("#PrsTheme").val();
    var PrsMerchandiserName = $("#PrsMerchandiserName").val();
    var SentDate = $("#SentDate").val();
    var PrsStatus  = $("#PrsStatus").val();
    //  alert(PrsNo);
    $j('#flex1').flexOptions({newp:1, params:[{name:'searchtype', value: '1'},{name:'prsno', value: PrsNo},{name:'prsreqby',value:PrsRequestedBy},{name:'prsdepar',value:PrsDepartment},{name:'prstheme',value:PrsTheme},{name:'prsmername', value: PrsMerchandiserName},{name:'prssentdate', value: SentDate},{name:'pstatus',value:PrsStatus}]});
    $j("#flex1").flexReload();
}

But i dont' know the reason why my page is reloading when i press enter or click on the search icon.

What might be the reason, I shall provide my full code if required

Here is my Controller

Jai · Answer 1 · 2014-11-21T12:12:38.020

1

Add this:

function get_Search(ev)  // ev is event applied in the context of selector.
{
   ev.preventDefault();
   // other code
}

and in your markup you can pass the event as param in the function:

onsubmit="return get_Search(event)"
onclick="return get_Search(event)"

and

if ( event.which == 13 ) {
    get_Search(event);
}

edited Nov 21 '14 at 12:12

answered Nov 21 '14 at 12:05

Jai

74,255
12
74
103

OP would need to change the code that calls the function to pass the event object (currently no arguments are passed). – nnnnnn Nov 21 '14 at 12:09
1

Thanks a lot, i have used your code in another section. I would upvote if i have more rep – Biz Dev B Nov 21 '14 at 12:25

score 0 · Accepted Answer · answered Nov 21 '14 at 12:06

It reloads because on form submition the form's action get's triggered automatically. If you didn't set an action the action is an empty string which makes your page reload itself. You can prevent this by changing your onsubmit to this:

<form id="fff" onsubmit="event.preventDefault();return get_Search();">

score 0 · Answer 3 · answered Nov 21 '14 at 12:09

you have not supplied an the action attribute to your tag so the w3c standard defines a default value for this case. The redirect to the current page.

To supress this behaviour you will have to supply e.preventDefault() to the function you have bound the eventlistener to

like this:

function get_Search(event)
{ event.preventDefault() }

this will suppress the default behaviour of the distributed event and no redirect is going to happen

Hope this helped

score 0 · Answer 4 · answered Nov 21 '14 at 12:22

Form is submitted either through .submit() method or through submit button click. A normal <input type="submit" or <button> without any type is submit button.
Hitting enter key initiate implicit form submission. This will in turn fire 'onsubmit' handler. Note that this handler is executed in case if form is getting submitted out of user action and not by JavaScript method.

The form will not submitted if onsubmit handler (in this case get_Search()) returns false. In your case since there is no return statement(implicitely undefined) hence form would get submitted.
Also clicking on anchor does not trigger any onsubmit event. It will just trigger onclick event which will execute the handler.

Strange Page Reload in Submit or Onclick

4 Answers4