I want my submit button to console.log all the values input by the user in an array

Question

Example html:

<form id="app-form">
    <label for="firstname" class="standard-label">
      First Name
      <input name="firstname" id="firstname" type="text">
     </label>    
     <label for="lastname" class="standard-label">
       Last Name
       <input name="lastname" id="lastname" type="text">
     </label>
     <input id="submit-app" type="submit" name="submit" value="Submit" onclick="logValues()">
</form>

I want clicking the submit button to call the logValues function which is below.

JavaScript / jQuery

function logValues() {
    console.log($('app-form').serializeArray());
  }

I want this to log an array of the updated key:values into the console when the user has completed the form.

Currently I can call the function manually and it will log an empty array, because no input has been recorded but clicking the submit button does nothing.

`'app-form'` is the buggy selector here. You need to use ID selector -- `'#app-form'`. Also, the submit button refreshes the page if you don't prevent it, so even if something is logged, you may not be able to see it. — 31piy, Nov 22 '18 at 11:16

Lis · Accepted Answer · 2019-02-12T12:36:35.277

The correct approach to do this (Javascript/jQuery):

$('#app-form').on('submit', function(){
    var arr = $(this).serializeArray();
    console.log(arr);
    return false; //      /<-- Only, if you don't want the form to be submitted after above commands
});

What can be surprising, your code did actually work. The problem was that right after handling the click event, the form was being submitted, so the page was refreshed - you didn't have the time to notice the console log. Please notice, that instead of click, my solution handles the submit event - that is because then you can return boolean false from this function, which will stop any further actions (submitting the form, in this case).

Learn more about how it works (and why e.preventDefault() is not a better solution) in this answer.

Thanks a lot, that worked and thanks for explaining your code as well!. — Alexander Ross Thompson, Nov 22 '18 at 11:37

score 0 · Answer 2 · edited Feb 12 '19 at 12:48

0

use

function logValues() {
    console.log($('#app-form').serializeArray());
}

:)

edited Feb 12 '19 at 12:48

ascripter

5,665
12
45
68

answered Nov 22 '18 at 11:17

shakogele

409
4
14

https://meta.stackoverflow.com/questions/366135/should-you-answer-questions-where-the-cause-of-the-problem-is-a-typo – 31piy Nov 22 '18 at 11:23
:) really? dont new that:) – shakogele Nov 22 '18 at 11:28

score 0 · Answer 3 · answered Nov 22 '18 at 11:18

Your error is most likely a typo.

For jQuery you have to specify an ID by prefixing the ID name with a "#".

However, you can rewrite the function to prevent the default, so that the page doesn't refresh on form submit.

  $(document).on('submit',function(event){
   event.preventDefault();
   console.log($('#app-form').serializeArray());
});

Marius · Answer 4 · 2018-11-22T11:27:16.170

0

The below code might be better to use.

$("#app-form").submit(function( event ) {
  console.log( $( this ).serializeArray() );
  event.preventDefault();
});

event.preventDefault(); will make sure your page does not reload after the submit

As from https://api.jquery.com/serializeArray/

Update your HTML: (Close the element with />)

<input id="submit-app" type="submit" name="submit" value="Submit" />

edited Nov 22 '18 at 11:27

answered Nov 22 '18 at 11:22

Marius

1,420
1
11
19

`input` is a self-closing tag. `/>` isn't required; `>` is sufficient. – 31piy Nov 22 '18 at 11:24
It's just neater. – Marius Nov 22 '18 at 11:24

Max Kurtz · Answer 5 · 2020-11-19T19:56:25.337

-2

Once you press Submit button, you page reloads. So you don't see the console.log output - it goes erased. Go to developer mode settings and set "Preserve log". So you will be able to see you console.log output.

edited Nov 19 '20 at 19:56

answered Nov 22 '18 at 11:24

Max Kurtz

448
5
17

I want my submit button to console.log all the values input by the user in an array

5 Answers5