How to refresh a page on another page?

Question

I have 2 pages, and on the first page I called up another page (second page) via ajax. On the second page there is a form that submits via ajax and then reloads the page once. But when the second page is updated, my first page is also updated. But I do not want this. I would just reload my inner page. Is there a way to reload only the inner page? Here are my internal page codes:

$(document).ready(function() { $(document).on('click', '.MyForm button[type=submit]', function(e) { e.preventDefault() // To make sure the form is not submitted var $frm = $(this).closest('.MyForm'); console.log($frm.serialize()); $.ajax( $frm.attr('action'), { method: $frm.attr('method'), data: $frm.serialize(), success: function(data) { $(".error").html(data), window.location.reload();} } ); }); }); 

 .error{width:200px; height:50px;border:1px solid blue;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <form class="MyForm" method="post"> <input type="text" placeholder="name" value="Aynaz" name="a1" /> <select name="Avg"> <option value="1">1</option> <option value="2">2</option> </select> <button type="submit">Submit</button> <div class="error">Show form success here after page reload</div> </form> 

Answer 1

window.location.reload() always reloads the entire page. Use the load() function in the same way as you use it, primarily to load the inner page

  $.ajax( $frm.attr('action'), { method: $frm.attr('method'), data: $frm.serialize(), success: function(data) { $(".error").html(data); $('.div').html('').load('innerpage.htm');// reload the div } } ); 

Answer 2

Remove method = "post" from the form.

Answer 3

You can make the inner page in an <iframe> , and then you can only reload this section.