Using Javascript to retrieve form data from a separate file

I am struggling with my HTML and JavaScript files to collect data. Despite my efforts, the function is not executing properly.

Below is the code I have been working on:

HTML File :

<form class="form-newsletter">
      <div class="form-group">
        <span><input type="text" name="name" value="" class="input-type" placeholder="Enter Your Email"></span>
        <input type="submit" class="btn btn-yellow" value="SUBMIT" onclick="newsletterFormFunctions()"/>
       </div>
 </form>

JS File:

function newsletterFormFunctions() {
NewsletterConfig.email = '';
NewsletterConfig.name = 'Test';
console.log('Attempted here');

$('form.form-newsletter input[type="submit"]').click(function (evt) {
    validateForm();
});
function validateForm() {
    $('form.form-newsletter input[type="submit"]').prop('disabled', true);
    $('form.form-newsletter input[type="submit"]').val('LOADING');
    NewsletterConfig.email = $('form.form-newsletter input.input-type').val();
  }
}

Answer №1

It is advisable to place the event binding outside the 'newsletterFormFunctions' function, possibly in the document ready event handler.

function newsletterFormFunctions() {
  NewsletterConfig.email = '';
  NewsletterConfig.name = 'Test';
  console.log('Enter Here');
}
$(document).ready(function() {
  $('form.form-newsletter input[type="submit"]').click(function(evt) {
    validateForm();
  });

  function validateForm() {
    $('form.form-newsletter input[type="submit"]').prop('disabled', true);
    $('form.form-newsletter input[type="submit"]').val('LOADING');
    NewsletterConfig.email = $('form.form-newsletter input.input-type').val();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-newsletter">
  <div class="form-group">
    <span><input type="text" name="name" value="" class="input-type" placeholder="Enter your email"></span>
    <input type="submit" class="btn btn-yellow" value="SUBMIT" onclick="newsletterFormFunctions()" />
  </div>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...

Guide to developing a custom plugin for Nuxt.js

This is the content of my rpc.js plugin file: const { createBitcoinRpc } = require('@carnesen/bitcoin-rpc') const protocol = 'http' const rpcuser = 'root' const rpcpassword = 'toor' const host = '127.0.0.1&apo ...

"Troubleshooting: Issue with ng-click in AngularJS not triggering ng-show

I can't figure out why my ng-click isn't showing the ng-show message. I've tried searching for a solution but no luck. Here is my controller function: $scope.showLogoutMessage = function() { $scope.logoutmsg = true; }; This is my Logi ...

What could be causing the HTML <DATALIST> dropdown to display next to its input rather than below it?

I have an input linked to a datalist, and it's functioning correctly. However, when I initially open the dropdown, the option list appears next to (right of) the input. After entering a few characters to narrow down the list, it then shifts below the ...

Show the bottom left quarter of the image in an HTML display

Currently, I am still new to HTML coding and experimenting with displaying specific sections of an image. The current code I have is this: <img id="theImg" style="width:100%;" src="https://'myimage.jpg'" /> I'm struggling to figure o ...

The project runs smoothly on my local host, but encounters an issue during the build process

I am currently working on a Preact-CLI project that utilizes Preact-Router. Everything functions as expected when testing on localhost, but once the project is built and deployed to production, issues arise. One particular page within the project pulls co ...

What is a clever way to monitor the completion of a forEach loop using promises?

I'm new to promises and I'm attempting to use them for the first time. After the completion of the forEach loop, I want to call another function for additional processing. However, when using forEach, the function insertIDBEvents is only printed ...

Utilizing PHP Variables in Ajax Calls: Transferring Data between JS and PHP

I've been struggling to grasp how to pass information from PHP to JavaScript and vice versa. I've spent an entire night trying to figure this out and would really appreciate it if someone could help me understand how to send two variables to an a ...

Retrieve the selected date from the date picker widget

Welcome to my custom datepicker! Here is the HTML code: <div class="field-birthday field-return" id="birthday-edit" style="display:none;"> <div class="birthdaypicker"></div> <input class="hidden" name="birthday" type="hidden" ...

The Datejs library is experiencing issues following an upgrade to jQuery 3.x

I'm currently working on a node.js project that utilizes the Datejs library. However, after updating our local jQuery file from version 1.9.1 to 3.6.0, this library has stopped functioning properly. Here is a snippet of the code: var today = Date ...

The mobile menu toggle functionality is malfunctioning on actual mobile devices, however, it is operational when tested on various mobile sim

Recently, I noticed that on , the menu collapses into a hamburger icon for mobile. However, when tapping on it on my phone and other devices, nothing happens. Surprisingly, it works perfectly fine when clicking on it in mobile simulators within Google Chro ...

Utilizing AJAX to Load JSON File Compressed with GZIP

I utilized the gzip algorithm to compress a JSON file, following this method (source: java gzip can't keep original file's extension name) private static boolean compress(String inputFileName, String targetFileName){ boolean compressResu ...

Tips for correctly storing an async/await axios response in a variable

I am facing a challenge with the third-party API as it can only handle one query string at a time. To overcome this limitation, I am attempting to split multiple strings into an array, iterate through them, and make async/await axios calls to push each res ...

Issue: The data type 'void' cannot be assigned to the data type 'ReactNode'

I am encountering an issue while calling the function, this is just for practice so I have kept everything inside App.tsx. The structure of my class is as follows: enum Actor { None = '', } const initializeCard = () => { //some logic here ...

Embracing Blackberry WebWorks for Enhanced HTML5 Support

Can someone assist me with this question? I am wondering if my Blackberry Bold 9700 (5.0.0.469) is capable of supporting HTML5 for audio streams. Thank you in advance. ...

Summoning within a rigorous mode

I am facing an issue with my configuration object: jwtOptionsProvider.config({ tokenGetter: (store) => { return store.get('token'); }, whiteListedDomains: ['localhost'] }); In strict mode, I ...

Encountering issues with the Sequelize Model.prototype.(customFunction) feature malfunctioning

While attempting to define a customFunction within the Sequelize model, I encountered an error: TypeError: user.getJWT is not a function at User.create.then (/projects/test/a/app/controllers/UserController.js:22:29) Below is the code snippet from ...

req.body is not defined or contains no data

I am facing an issue with my controllers and routers. bookController.js is functioning perfectly, but when I try to use userControllers for registration and login logic, req.body always appears empty. I tried logging the form data using console.log, but it ...

the angular variable scope has not been defined

Currently, I am developing an angular controller that is configured to utilize the "controller as" syntax: angular.module('app', []).controller('ctrl1', ctrl1); ctrl1.$inject = ['$http', '$compile']; function ctrl ...

Accessing PHP variables in JavaScript

Hi there, I am new to all this. I am trying to figure out how to use a PHP variable in JavaScript. Here is a snippet of my code (popup.php): <?php $id_user = $this->session->userdata('id'); ?> <script type="text/javascript"> ...