title: Update Element Without Refresh the Page
body: <p>I created the page that can be saved the multiple locations using laravel, but now i need to edit and update location data and display it in the same page without refreshing the page. this is my html form</p>
  <pre><code>&lt;form action=&quot;&quot; method=&quot;post&quot; id=&quot;edit_form&quot;&gt;
                      &lt;input type=&quot;hidden&quot; name=&quot;address_id&quot; value=&quot;&quot;&gt;
                      &lt;div id=&quot;pac-container&quot;&gt;
                          &lt;div class=&quot;mt-7 flex border border-green-500 py-3 rounded-xl px-5&quot;&gt;
                              &lt;input type=&quot;location&quot; id=&quot;edit-pac-input&quot; name=&quot;address&quot; placeholder=&quot;Edit Location Name&quot; autofocus class=&quot;w-full text-base&quot;&gt;
                          &lt;/div&gt;
                          &lt;input type=&quot;hidden&quot; readonly class=&quot;form-control mt-2&quot; name=&quot;lat&quot; value=&quot;{{22.3039}}&quot;&gt;
                          &lt;input type=&quot;hidden&quot; readonly class=&quot;form-control mt-2&quot; name=&quot;lang&quot; value=&quot;{{70.8022}}&quot;&gt;
                      &lt;/div&gt;
                      &lt;div id=&quot;edit-map&quot; class=&quot;mt-5 cartMap&quot;&gt;&lt;/div&gt;
  
                  &lt;div class=&quot;mt-4 flex&quot;&gt;
                      &lt;label for=&quot;&quot;&gt;
                          {{__('Set Location Type')}}
                      &lt;/label&gt;
                      &lt;div class=&quot;selectgroup selectgroup-pills ml-10&quot;&gt;
                          &lt;label class=&quot;selectgroup-item cursor-pointer&quot;&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;location_type&quot; value=&quot;home&quot; class=&quot;selectgroup-input&quot; checked=&quot;&quot;&gt;
                              &lt;span class=&quot;selectgroup-button selectgroup-button-icon&quot;&gt;{{__('HOME')}}&lt;/span&gt;
                          &lt;/label&gt;
                          &lt;label class=&quot;selectgroup-item cursor-pointer&quot;&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;location_type&quot; value=&quot;office&quot; class=&quot;selectgroup-input&quot;&gt;
                              &lt;span class=&quot;selectgroup-button selectgroup-button-icon&quot;&gt;{{__('OFFICE')}}&lt;/span&gt;
                          &lt;/label&gt;
                          &lt;label class=&quot;selectgroup-item cursor-pointer&quot;&gt;
                              &lt;input type=&quot;radio&quot; name=&quot;location_type&quot; value=&quot;other&quot; class=&quot;selectgroup-input&quot;&gt;
                              &lt;span class=&quot;selectgroup-button selectgroup-button-icon&quot;&gt;{{__('OTHERS')}}&lt;/span&gt;
                          &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;w-full text-right mt-3&quot;&gt;
                      &lt;button type=&quot;button&quot; onclick=&quot;updateAddress()&quot; class=&quot;md:bg-green-500 text-center md:w-auto md:h-auto md:font-bold rounded-full md:hover:bg-green-600 md:text-white text-sm p-2&quot;&gt;{{__('Edit Address')}}&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  <p>this is the jquery function</p>
  <pre class="lang-js prettyprint-override"><code>function updateAddress()
  {
          var formData = new FormData($('#edit_form')[0]);
          $.ajax({
              headers:
              {
                  'X-CSRF-TOKEN': $('meta[name=&quot;csrf-token&quot;]').attr('content')
              },
              type: &quot;POST&quot;,
              url:base_url+'/update_address',
              data:formData,
              cache:false,
              contentType:false,
              processData:false,
              success: function(result) {
                  if (result.success == true) {
                  
                  Swal.fire({
                      icon: 'success',
                      title: 'Success',
                      text: 'Address Updated Successfully!'
                  })
                  
                  
              }
              else{
              }
          },
          error: function (err) {
              console.log('err', err)
              Swal.fire({
                  icon: 'error',
                  title: 'Oops...',
                  text: 'This record is connect with another data!'
              });
          }
      });
  }
  </code></pre>
  <p>Edit Location Page:
  <a href="https://i.stack.imgur.com/YhiP8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YhiP8.png" alt="enter image description here" /></a></p>
  <p>I need to update and display this data without page refreshing. How to do that?</p>