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

<div class="hr-line-dashed"></div>

<div class="form-group">

<label class="col-sm-2 control-label">Uniphar Password</label>

<div class="col-sm-10">

@Html.EditorFor(model => model.password1, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Uniphar Pharmacy Password", @required = "required" } })

<a href="@Url.Action("Enable1", "Accounts", new { id = Model.companyId })" class="btn btn-default" id="btnSubmit">On</a>

</div>

</div>

<div class="hr-line-dashed"></div>

<div class="form-group">

<label class="col-sm-2 control-label">United Drug Account Number</label>

<div class="col-sm-10">

@Html.EditorFor(model => model.accountNumber2, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter United Drug Pharmacy Account Number" } })

</div>

</div>

<div class="hr-line-dashed"></div>

<div class="form-group">

<label class="col-sm-2 control-label">United Drug Password</label>

<div class="col-sm-10">

@Html.EditorFor(model => model.password2, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter United Drug Pharmacy Password" } })

<a href="@Url.Action("Enable2", "Accounts", new { id = Model.companyId } )" class="btn btn-default" type="button">On</a>

</div>

</div>

<div class="hr-line-dashed"></div>

<div class="form-group">

<label class="col-sm-2 control-label">EuroDrug Account Number</label>

<div class="col-sm-10">

@Html.EditorFor(model => model.accountNumber4, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter EuroDrug Pharmacy Account Number" } })

</div>

</div>

When I am clicking

<a href="@Url.Action("Enable1", "Accounts", new { id = Model.companyId })" class="btn btn-default" id="btnSubmit">On</a>

 

it is reloading the page I want to restrict it. Any suggestions 

 

Answer 1

The code is jQuery, not plain JavaScript, so you need to use a wrapper around it,

<script>
$(document).ready(function(){
$('#btnSubmit').click(function(){
event.preventDefault();
//Publishthecontent
$.ajax({
url:'Accounts/Enable1/id',
data:{accountNumber1:'accountNumber1'},
success:function(data){
//Datapublished,serverrespondedas"data"
}
})
});
});
</script>

This code would work now and would attach the event handler to that button of yours. I would recommend learning a bit more on,https://api.jquery.com/category/events/.

Answer 2

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,

functionpublishData(){
event.preventDefault();

//Publishthecontent
$.ajax({
url:'where/to/post.aspx',
data:{data:object},
success:function(data){
//Datapublished,serverrespondedas"data"
}
});
}

This way, you will be able to publish the data and at the same time prevent the page from reloading.

Answer 3

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.

Answer 4

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){
//Datapublished,serverrespondedas"data"
}
})

This would use the ID of the current element (which is the hyperlink) and would send it to the server.

Answer 5

no it is posting but I don't know in my html i provided

<a href="@Url.Action("Enable1", "Accounts", new { id = Model.companyId })" class="btn btn-default" id="btnSubmit">On</a>

here id is equal to model.company id

but in

url:'Accounts/Enable1/id'

id is returning null to me rather than company id

Answer 6

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

Answer 7

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

Answer 8

Hi I am not sure I did in this way. Canyou tell me is it correct?

<script>

$('#btnSubmit').click(function(){

event.preventDefault();

//Publishthecontent

$.ajax({

url:'Accounts/Enable1/id',

data:{accountNumber1:'accountNumber1'},

success:function(data){

//Datapublished,serverrespondedas"data"

}

})

});

</script>

Answer 9

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

Answer 10

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,

functionpreventReload(){
event.preventDefault();
}

Then finally, attach this code to the HTML of your web application, like this,

<buttononclick="preventReload()">MyButton</button>

I didn't use your code of HTML, instead just gave an example of using this in your own application's HTML source code.