Not to reload a page on button click

Question

Hi I have a view in mvc and I want that my page should not reload. I tried everything it is reloading again and again. May I know how can I stop it. I am attaching my code. this is the view Uniphar Password @Html.EditorFor(model => model.password1 new { htmlAttributes = new { @class = form-control @placeholder = Enter Uniphar Pharmacy Password @required = required } }) On United Drug Account Number @Html.EditorFor(model => model.accountNumber2 new { htmlAttributes = new { @class = form-control @placeholder = Enter United Drug Pharmacy Account Number } }) United Drug Password @Html.EditorFor(model => model.password2 new { htmlAttributes = new { @class = form-control @placeholder = Enter United Drug Pharmacy Password } }) On EuroDrug Account Number @Html.EditorFor(model => model.accountNumber4 new { htmlAttributes = new { @class = form-control @placeholder = Enter EuroDrug Pharmacy Account Number } }) When I am clicking On it is reloading the page I want to restrict it. Any suggestions

Afzaal Ahmad Zeeshan · Answer

The code is jQuery not plain JavaScript so you need to use a wrapper around it $(document).ready( function (){ $( '#btnSubmit' ).click( function (){ event.preventDefault(); //Publishthecontent $.ajax({ url: 'Accounts/Enable1/id'  data:{accountNumber1: 'accountNumber1' } success: function (data){ //Datapublishedserverrespondedasdata } }) }); }); This code would work now and would attach the event handler to that button of yours. I would recommend learning a bit more onhttps://api.jquery.com/category/events/.

Afzaal Ahmad Zeeshan · Answer

Write the code to save the data after this line of event.preventDefault(); .The rest of the code will be executed and the data will be saved but the page won't reload. If you wanted to use the Ajax for example you will do the following trick function publishData(){ event.preventDefault(); //Publishthecontent $.ajax({ url: 'where/to/post.aspx'  data:{data:object} success: function (data){ //Datapublishedserverrespondedasdata } }); } This way you will be able to publish the data and at the same time prevent the page from reloading.

Gunjan Manan · Answer

Actually the id in the form is coming null when we are using this ajax format and when I am removing it it is giving me right id. I don't know why using ajax it is giving null id to whole form.

Afzaal Ahmad Zeeshan · Answer

Although this is a very bad coding practice but you can do the following to get the ID from your HTML $.ajax({ //GetthevalueofIDfromtheelement url: 'Accounts/Enable1/' +$( this ).attr( 'id' ) data:{accountNumber1: 'accountNumber1' } success: function (data){ //Datapublishedserverrespondedasdata } }) This would use the ID of the current element (which is the hyperlink) and would send it to the server.

Gunjan Manan · Answer

no it is posting but I don't know in my html i provided On here id is equal to model.company id but in url: 'Accounts/Enable1/id' id is returning null to me rather than company id

Afzaal Ahmad Zeeshan · Answer

Would you share the error that comes up? Because it is hard to say what goes wrong.

Gunjan Manan · Answer

I did the same but it is not working it is stopping button to reload form but it is not posting data

Gunjan Manan · Answer

Hi I am not sure I did in this way. Canyou tell me is it correct? $('#btnSubmit').click(function(){ event.preventDefault(); //Publishthecontent $.ajax({ url:'Accounts/Enable1/id' data:{accountNumber1:'accountNumber1'} success:function(data){ //Datapublishedserverrespondedasdata } }) });

Gunjan Manan · Answer

Hi I can stop the action with it but I want data to be posted also after this button click

Afzaal Ahmad Zeeshan · Answer

There are many methods to use in JavaScript you can write the following code as the click handler $( '#btnId' ).click( function (){ event.preventDefault(); }); This will remove the page refresh from your page. Otherwise you can remove the button from the form which causes it to load the page also POST-ing the data to the servers. Also the code above is jQuery for JavaScript code use this function preventReload(){ event.preventDefault(); } Then finally attach this code to the HTML of your web application like this preventReload() >MyButton I didn't use your code of HTML instead just gave an example of using this in your own application's HTML source code.