title: how to make the next and previous buttons without refreshing with jquery
body: <p>Right now I have a problem when the next button is clicked then the website will reload and it really depends on the available network. I tried to make the next and previous buttons when clicked without refreshing the website. but I have a problem, please solve it.</p>
  <p>Could anyone please take a look and help me figure out where I'm going wrong ?</p>
  <p>this mycode</p>
  <p>VIEW`</p>
  <pre><code>&lt;form id=&quot;form-jawab&quot; action=&quot;&quot; method=&quot;post&quot;&gt;
  
  
  &lt;section id=&quot;latihan&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row wrap&quot;&gt;
  
      &lt;div class=&quot;col-lg-6 col-md-12&quot; id=&quot;start&quot;&gt;
        &lt;div class=&quot;card soal&quot;&gt;
          &lt;div class=&quot;card-header&quot;&gt;Soal&lt;/div&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;div class=&quot;wrap-soal&quot;&gt;
              &lt;p class=&quot;nomor&quot; id=&quot;nomor&quot;&gt;No.&lt;?php echo $this-&gt;uri-&gt;segment(4); ?&gt;&lt;/p&gt;
              &lt;p class=&quot;description-soal&quot; id=&quot;pertanyaan&quot;&gt;&lt;?php echo $soal-&gt;pertanyaan ?&gt;&lt;/p&gt;
              &lt;input type=&quot;hidden&quot; name=&quot;id_soal&quot; id=&quot;id_soal&quot; value=&quot;&lt;?php echo $soal-&gt;id_soal ?&gt;&quot;&gt;
              &lt;input type=&quot;hidden&quot; name=&quot;kode_mulai&quot; value=&quot;&lt;?php echo $detail-&gt;kode_mulai ?&gt;&quot;&gt;
           
  
              &lt;label for=&quot;radio1&quot; id=&quot;jawaban_a&quot; class=&quot;container&quot;&gt;
                A. &lt;?php echo $soal-&gt;jawaban_a ?&gt;
                &lt;input type=&quot;radio&quot; name=&quot;jawaban&quot; id=&quot;radio1&quot; value=&quot;A&quot; &lt;?php if ($list_soal[$this-&gt;uri-&gt;segment(4)]['jawaban'] == 'A') : ?&gt; checked &lt;?php endif ?&gt; /&gt;
                &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
              &lt;/label&gt;
            
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
      &lt;div class=&quot;col-lg-3 col-md-12&quot;&gt;
        &lt;div class=&quot;card&quot;&gt;
          &lt;div class=&quot;card-header&quot;&gt;Navigasi Soal&lt;/div&gt;
          &lt;div class=&quot;card-body&quot;&gt;
            &lt;div class=&quot;row navigasi&quot;&gt;
              &lt;div class=&quot;col-4&quot;&gt;
                &lt;?php if ($list_soal[$this-&gt;uri-&gt;segment(4)]['no_soal'] - 1 != 0) : ?&gt;
                  &lt;button class=&quot;indikator&quot; data-id=&quot;&lt;?php echo $list_soal[$this-&gt;uri-&gt;segment(4)]['id_soal'] ?&gt;&quot; data-no=&quot;&lt;?php echo $list_soal[$this-&gt;uri-&gt;segment(4)]['no_soal'] - 1 ?&gt;&quot; style=&quot;background: none; border: 0;cursor: pointer;&quot;&gt;&lt;i class=&quot;fa fa-backward&quot;&gt;&lt;/i&gt; &lt;br&gt;Prev&lt;/button&gt;
                &lt;?php endif ?&gt;
              &lt;/div&gt;
             
              &lt;div class=&quot;col-4&quot;&gt;
                &lt;?php if ($list_soal[$this-&gt;uri-&gt;segment(4)]['no_soal'] + 1 &lt;= $penyelesaian['total']) : ?&gt;
                  &lt;button class=&quot;indikator&quot; id=&quot;next_button&quot; data-id = &quot;&lt;?php echo $list_soal[$this-&gt;uri-&gt;segment(4)]['id_soal'] ?&gt;&quot; data-no = &quot;&lt;?php echo $list_soal[$this-&gt;uri-&gt;segment(4)]['no_soal'] + 1 ?&gt;&quot; style=&quot;background: none; border: 0;cursor: pointer;&quot;&gt; &lt;i class=&quot;fa fa-forward&quot;&gt;&lt;/i&gt; &lt;br&gt;Next&lt;/a&gt;
                  &lt;?php endif ?&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;/form&gt;
  </code></pre>
  <p>Jquery code</p>
  <pre><code>&lt;script type='text/javascript'&gt;
  $(&quot;.indikator&quot;).click(function() {
  let id = $(this).attr('data-id');
  let no = $(this).attr('data-no');
  let url = '&lt;?php echo base_url() . 'jawab/soal/' . $detail-&gt;kode_mulai . '/' ?&gt;';
  $(&quot;#form-jawab&quot;).attr(&quot;action&quot;, url + no);
  console.log(url + no);
  });&lt;/script&gt;
  </code></pre>
  <p>if the next or previous button is clicked then the website will reload. how to do it if the next or previous button is clicked without reloading the website and the data appears.</p>
  <p>please help me guys</p>