Question 10729 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Print all values, options, checked checkbox & radio in Console – Jquery

I have a question.
How to print/display in console all inputs values, selected options, checked checkbox & radio from form on submit?

searched on stackoverflow but couldn’t find a solution.

Tags:

2

Answers


  1. 0

    You can do it like this:

    $(document).ready(function() {
  $("#myForm").submit(function(event) {
    event.preventDefault();
    $(this).find(":input").each(function() {
      var inputType = $(this).attr("type");
      var inputName = $(this).attr("name");
      var inputValue = $(this).val();
      if (inputType === "checkbox" || inputType === "radio") {
        inputValue = $(this).is(":checked") ? "Yes" : "No";
      }
      console.log(inputName + ": " + inputValue);
    });
  });
});

    This will "detect" all :input elements and will write out different information based on the type,name and value

    Demo

    $(document).ready(function() {
  $("#myForm").submit(function(event) {
    event.preventDefault();
    $(this).find(":input").each(function() {
      var inputType = $(this).attr("type");
      var inputName = $(this).attr("name");
      var inputValue = $(this).val();
      if (inputType === "checkbox" || inputType === "radio") {
        inputValue = $(this).is(":checked") ? "Yes" : "No";
      }
      console.log(inputName + ": " + inputValue);
    });
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age"><br><br>

  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select><br><br>

  <label for="newsletter">Subscribe to newsletter:</label>
  <input type="checkbox" id="newsletter" name="newsletter" value="yes"><br><br>

  <input type="submit" value="Submit">
</form>
    Login or Signup to reply.
  2. 0

    Assuming you’re submitting the form via AJAX, and that your form is not causing the page to reload, one way of doing it (apart from what @CarstenLøvboAndersen suggests) could be:

    $("<your_form_identifier>").on("submit",function() {
    var ser = $(this).serialize();
    var serArr = $(this).serializeArray();

    console.log(ser);
    console.log(serArr);
});

    where <your_form_identifier> is the way you… Well, identify the form (ID, class, some other selector).

    If you don’t care about the actual type of the element, and you don’t want that shown in the console, this suggestion will log:

    • $(this).serialize() – a string, in the form of name=value&name2=value2... for all of the form elements which are submitted (checked checkboxes, checked radiobuttons, etc)
    • $(this).serializeArray() – similar as the first, but as an array, instead of a string

    If you’re not using AJAX to submit your form, and are in fact reloading the page, then this suggestion (and the one by @CarstenLøvboAndersen) won’t enable you to see what is being submitted, unless you interrupt the submission with something like e.preventDefault().

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search