Prevent page reload when submit

Question

My form :

<form method="get"  id="myform">
   <div id="Exam" class="sel_1" style="display:none; margin-left: 15%; margin-top: -60px;">
      <select  name='field' class='field' id="field">
         <option value="">Select Field</option>
         <option value='All'>All</option>  
         <option value='engineering'>Engineering</option>  
         <option value='law'>LAW</option>  
         <option value='medical'>Medical</option>  
         <option value='management'>Management</option>  
         <option value='pharmacy'>Pharmacy</option>
         <option value='hotel management'>Hotel Management</option>
         <option value='mass communication'>Mass Communication</option>
         <option value='agriculture'>Agriculture</option>
         <option value='architecture'>Architecture</option>
         <option value='education'>Education</option>
         <option value='paramedical'>Paramedical</option>
         <option value='design'>Design</option>
         <option value='commerce'>Commerce</option>
         <option value='film/tV/media'>Film /TV/ Media</option>
         <option value='General'>General</option>
      </select>

     <select name="exams" id="exams" style="width: 17%;">
         <option value="">Select Exam</option>
     </select>
     <button type="submit"  name="submit" id="submit" >
         <i class="fa fa-search" style="color:red"></i>
     </button>
  </div>
</form>

In this case when I click on button page reload again. I had already use

<form method="get" id="myform" onsubmit="return false">

but using this functionality button are not working is there any other method to remove this problem please help me.

Thank You

You've to use ajax request. – Zakaria Acharki Feb 08 '17 at 12:25 — Zakaria Acharki, Feb 08 '17 at 12:25
If you don't want the page to reload have a look at Ajax – Masivuye Cokile Feb 08 '17 at 12:26 — Masivuye Cokile, Feb 08 '17 at 12:26

score 2 · Answer 1 · answered Feb 08 '17 at 12:27

2

Try this.

$('#myform').submit( function(e) {
  e.preventDefault();
  return false;
  //Use ajax for submit
});

Remember to put this code inside a ready function.

answered Feb 08 '17 at 12:27

Roy Bogado

4,299
1
15
31

score 0 · Answer 2 · answered Feb 08 '17 at 12:27

Try to submit your for using ajax request :

$('#myform').on('submit', function(){
     e.preventDefault();

     $.get('url', { $(this).serialize() }, function(server_response){
          //success callback
     })
})

Or also :

$('#myform').on('submit', function(){
     e.preventDefault();

     $.ajax({
        method: "GET",
        url: "url.php",
        data: $(this).serialize()
    })
    .done(function( msg ) {
        alert( "Seuccess" );
    });
})

Hope this helps.

Prevent page reload when submit

2 Answers2

Linked