Why isn't the program recording user input in the console when the form is submitted?

Question

Why isn't the program recording user input in the console when the form is submitted?

Can someone please advise me on how to get the program to print the user's input values to the console when they click the "Sign up now" button?

javascript jquery html css web

Answer 1

Answer №1

The problem arises from the fact that button elements do not trigger a submit event.

Furthermore, it is advised to steer clear of the outdated on* event attributes. Instead, opt for unobtrusive event handlers that can be attached using addEventListener(), as demonstrated below:

function logOptions() {
  var s = document.getElementsByName('Interests')[0];
  var text = s.options[s.selectedIndex].text;
  console.log(text);
}

function logEmail() {
  console.log(document.getElementById('email').value);
}

document.getElementById('inputform').addEventListener('submit', function(e) {
  e.preventDefault();
  logOptions();
  logEmail();
});

<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>

<form id="inputform" method="get" action="confirmation.html">
  <input id="email" type="email" placeholder="Email Address" required>
  <button type="submit" id="validate">Sign up now</button>
  <select name="Interests" required>
    <option value="" disabled selected>Interested in..</option>
    <option value="option1">Marketing</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
  </select>
</form>

<svg>
  <rect width="40" height="3" style="fill: lightgreen" />
</svg>

Additionally, make a note of the inclusion of the preventDefault() method. This is utilized for testing purposes to display the result of the console.log() function. In your actual production code, feel free to remove this when you want the form submission to proceed as intended.

Answer 2

The problem arises from the fact that button elements do not trigger a submit event.

Furthermore, it is advised to steer clear of the outdated on* event attributes. Instead, opt for unobtrusive event handlers that can be attached using addEventListener(), as demonstrated below:

function logOptions() {
  var s = document.getElementsByName('Interests')[0];
  var text = s.options[s.selectedIndex].text;
  console.log(text);
}

function logEmail() {
  console.log(document.getElementById('email').value);
}

document.getElementById('inputform').addEventListener('submit', function(e) {
  e.preventDefault();
  logOptions();
  logEmail();
});

<h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
<h4>Subscribe for free marketing tips</h4>

<form id="inputform" method="get" action="confirmation.html">
  <input id="email" type="email" placeholder="Email Address" required>
  <button type="submit" id="validate">Sign up now</button>
  <select name="Interests" required>
    <option value="" disabled selected>Interested in..</option>
    <option value="option1">Marketing</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
  </select>
</form>

<svg>
  <rect width="40" height="3" style="fill: lightgreen" />
</svg>

Additionally, make a note of the inclusion of the preventDefault() method. This is utilized for testing purposes to display the result of the console.log() function. In your actual production code, feel free to remove this when you want the form submission to proceed as intended.

Why isn't the program recording user input in the console when the form is submitted?

Answer №1

Similar questions

There are three pop-up windows displayed on the screen. When each one is clicked, they open as intended, but the information inside does not

Unraveling the Mystery of jQuery AJAX Response: Where Have I Gone Astray?

Next.js encountering page not found error due to broken link URL

Previewing multiple images with multiple file inputs

Is there a way to retrieve the initial value from the second element within the JSON data?

Troubleshooting problem with Angular Click Outside Directive and unexpected extra click event issue

Changing background color during drag and drop in Angular 2: A step-by-step guide

Strange anomalies arising in frontend Apollo and GraphQL integration

Angular - creating a specialized input field for a unique MatDialogConfig configuration file

Placing elements from an array into a customized output

Learn how to dynamically add comments to HTML elements in AngularJS

Preventing Form Submission from Redirecting to the Top in an HTML Document with PHP

Tips for developing a nested array of objects using a JavaScript loop

The ultimate guide to loading multiple YAML files simultaneously in JavaScript

DropDownListFor with automatic postback feature

What causes the text field and checkbox to move downward as I enter text?

Lack of defined global array in JavaScript

Utilizing the hcSticky plugin for creating a scrolling effect on webpage content

JavaScript: Utilize MooTools to extract a string containing a specific class and then pass it through a parent function

Tips for efficiently managing imports in a React application that utilizes three.js without relying on the window object