How to submit a form through jQuery and get form values

Question

I am trying to submit a form through a modal but I am having issues as the page reloads on submit, I have prevented the default action but the page still reloads.
I don't know why this is giving me issues, can someone help?

HTML code:

<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
    <!--    Modal Area-->
    <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <div class="close text-secondary" data-dismiss="modal" aria-label="Close">
              <button type="button" class="close" aria-label="Close">
                <span aria-hidden="true">Close</span>
              </button>
            </div>
            <div class="text-secondary font-weight-normal info" id="info"></div>
        </div>
          
        <div class="modal-body">
          <div class="row">
               <div class="col-md-4 col-sm-4 col-3 profile">
                  <ul>
                      <li class="side-link"><a href="#" id="home" >Profile</a></li>
                      <li  class="side-link"><a href="#" id="design" >Account &amp; Security</a></li>
                      <li  class="side-link"><a href="#" id="account" >Notifications</a></li>
                      <li  class="side-link"><a href="#" id="about" >Help</a></li>
                      <li  class="side-link"><a href="#" id="logout" >Logout</a></li>
                  </ul>
              </div> 
              
              <div class="col-md-8 col-sm-8 col-9" id="home-box">
                  <img src="https://source.unsplash.com/random/200x200">
                  <a href="#">Edit</a>
                  <h4 class="text-secondary mt-2 text-sm">PROFILE INFO</h4>
                  <div class="mt-2">
                      <form method="POST" action="#" id="edit-form">
                          <div class="form-group">
                              <label>First name</label>
                              <input type="text" name="fname" id="fname" class="form-control"> 
                          </div>
                          <div class="form-group">
                              <label>Last name</label>
                              <input type="text" name="lname" id="lname" class="form-control"> 
                          </div>
                          <div class="mt-2">
                              <h4>Additional Info</h4>
                              <div class="form-group-inline">
                                  <label>Display name</label>
                                  <input type="text" name="dname" id="dname" class="form-control"> 
                              </div>
                              <div class="form-group">
                                  <label>Website</label>
                                  <input type="text" name="website" id="website" class="form-control"> 
                              </div>
                              <div class="form-group">
                                  <label>Bio </label>
                                  <textarea class="form-control" name="description" id="description" rows="4" cols="5" placeholder="Enter a short description about yourself"></textarea>
                              </div>
                          </div>
                          <input type="submit" id="save-btn" class="btn btn-primary" value="save value">
                      </form>
                  </div>
              </div>
              
              <div class="col-md-8" style="display: none;" id="design-box">
                  
              </div>
              
              <div class="col-md-8" id="account-box" style="display: none;">
                  <h3>Account Section</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dignissimos excepturi at, maiores nesciunt vel delectus consequuntur mollitia a exercitationem!</p>
              </div>
              
              <div class="col-md-8" id="about-box" style="display: none;">
                 
              </div>
              
           </div>
        </div>
          
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <!--  Modal Area End  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>
</html>

And Javascript

$(document).ready(()=>{
    $('#drop-down').click((e)=>{
        e.preventDefault()
    })
    var def = $('#home').text()
    $('#info').text(def)
    
    
    //Home functions
    $('#home').click((e)=>{
        e.preventDefault()
        $('#design-box').hide()
        $('#account-box').hide()
        $('#about-box').hide()
        $('#home-box').show()
        var infoDisplay = $('#home').text()
        $('#info').text(infoDisplay)
        $('#edit-form').submit((e)=>{
            e.preventDefault()
            console.log('form-submit',$('#edit-form').serializeArray())
        })
    })
    
    //Design functions
    $('#design').click((e)=>{
        e.preventDefault()
        $('#account-box').hide()
        $('#about-box').hide()
        $('#home-box').hide()
        $('#design-box').show()
        var infoDisplay = $('#design').text()
        $('#info').text(infoDisplay)
        console.log("show box")
    })
    
    //Account functions
    $('#account').click((e)=>{
        e.preventDefault()
        $('#design-box').hide()
        $('#home-box').hide()
        $('#about-box').hide()
        $('#account-box').show()
        var infoDisplay = $('#account').text()
        $('#info').text(infoDisplay)
    })
    
    //About function
    $('#about').click((e)=>{
        e.preventDefault()
        $('#design-box').hide()
        $('#home-box').hide()
        $('#account-box').hide()
        $('#about-box').show()
        var infoDisplay = $('#about').text()
        $('#info').text(infoDisplay)
    })
    
    // Logout functions
    $('#logout').click((e)=>{
        e.preventDefault()
        if(confirm('Are you sure you want to quit?')){
            
            console.log('redirects to home page')
        }else{
            console.log('clicked no')
        }
    })
})

if the system says the post contains mostly code and add more details, it's because your post is mostly code and you should add more details :) — corn on the cob, Nov 27 '20 at 13:03

score 0 · Answer 1 · answered Nov 27 '20 at 12:26

0

I made a jsfiddle to show you how to get a FormData object:

https://jsfiddle.net/ac81hk97/

$('form').on('submit', function(ev) {
  ev.preventDefault();
    const $form = $(this);
  const formData = new FormData($form[0]);
  
  const formObj = {};
  for (var key of formData.keys()) {
   console.log(key); 
   formObj[key] = formData.get(key);
  }
  
  const json = JSON.stringify(formObj);
  $('#json').text(json);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="222" action="">
  <input type="text" name="first_input">
  <input type="text" name="second_input">
  <button>submit</button>
</form>
<div id="json"></div>

If you look at this answer, you can see how to submit it using form.serialize()

answered Nov 27 '20 at 12:26

TKoL

10,782
1
26
50

the problem i have is with the form reload – Yhomi Nov 27 '20 at 12:30
`$('form').on('submit', function(ev) { ev.preventDefault();` – TKoL Nov 27 '20 at 12:49
The way you did it by applying it to the button click is wrong. Apply it to the form submit. – TKoL Nov 27 '20 at 12:49
The alternative is giving the button a `type="button"` attribute – TKoL Nov 27 '20 at 12:50
it didn't work, if use the alternate option the javascript, the button just gets clicked and none of the console log appears – Yhomi Nov 27 '20 at 13:39
Can you make a jsfiddle or something? – TKoL Nov 27 '20 at 14:45

How to submit a form through jQuery and get form values

1 Answers1