Struggling to implement validation in the Ajax form, still encountering issues with getting it to

Having previously posted here without success, the answers provided did not solve my issue.

I am encountering a problem with AJAX in a form where error or success messages are not displaying.

If anyone can identify what I might have missed, I would greatly appreciate it. Thank you.

HTML

<form id="newsletter" action="http://app.bronto.com/public/webform/process/" method="post">
                            <input type="hidden" name="fid" value="gmy3v1ej883x2lffibqv869a2e3j9" />
                            <input type="hidden" name="sid" value="37ea72cebcc05140e157208f6435c81b" />
                            <input type="hidden" name="delid" value="" />
                            <input type="hidden" name="subid" value="" />
                            <script type="text/javascript">
                            var fieldMaps = {};
                            </script>
                            <label for="nameField">Name:</label>
                            <input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />
                            <label for="emailField">Email:</label>
                            <input id="emailField" type="text" name="39821" value="" />
                            <input type="submit" value="Submit" />
                            <div id="newsletter-message" style="display:none;"></div>
</form>

JS

//ajax subscribe
$(document).ready(function(){
    $("#newsletter").submit(function(event) {
        event.preventDefault();
        alert("submitting");
        alert(data); //it doesn't alert here??
        console.log($("#newsletter").serialize());
        $.post($("#newsletter").attr("action"), $("#newsletter").serialize(), function(data){
            alert(data); //doesn't alert here either
        if(data == 'success'){
        $('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
            } else {
        $('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').css('visibility','visible');
    }
        });
        //Stop the normal POST
        return false;
    });
});

EDIT

Despite trying the following solution, the issue persists...

$("#newsletter").submit(function(event) {

  event.preventDefault();

  var $form = $( this ),
      ufname = $form.find( 'input[name="39829[66663]"]' ).val(),
      uemail = $form.find( 'input[name="39821"]' ).val(),
      url = $form.attr( 'action' );

  var posting = $.post( url, { name: ufname, email: uemail } );

  posting.done(function( data ) {
    $('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
  });
});

Answer №1

Understanding the difference between visibility and display is crucial in CSS.

If you set your display div to display:none;, attempting to make it visible with .css('visibility','visible'); will result in:

<div style="display: none; visibility: visible;" id="newsletter-message">...</div>

However, this element remains invisible due to the original display:none; property.

To rectify this issue, update your if statements as follows:

if(data == 'success'){
    $('#newsletter-message').html('You have been signed up.').removeClass('error').show();
} else {
    $('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').show();
}

For more information on the .show() jQuery function, refer to the documentation here: http://api.jquery.com/show/

Answer №2

One small observation I made is that you have two id attributes for the name field, which can render your input invalid and potentially cause issues.

<input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />

Additionally, I recommend following @Thierry's advice and avoiding the use of numbers in the name field whenever possible.

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

Is it possible to output the value of history.go(-1) using a print function?

Currently, I'm working on enhancing a Vue application. My goal is to retrieve the value of the previously visited page using history.go(-1) and then use that value to assign certain values to a variable. This is what I have in mind: <script> ...

Retrieving the attributes of a JSON object based on their names

I'm currently working on storing video information using JSON. I've managed to successfully read the JSON file, but I'm facing some challenges when trying to access the properties of the object. Specifically, I'm struggling with accessi ...

Restrict the height of posts created in the summernote editor

My goal is to create a structured page application using summernote. When using summernote, a div with contenteditable=true is appended to the body to allow users to add content. However, I want to set a fixed height for this div so that users can only ent ...

Struggling to efficiently handle imported JSON data using VUE.JS JavaScript?

Struggling to extract specific information from JSON data that I need to import. Here is the sample data I'm working with: I am trying to extract details like the name, description, and professor for each entry. This is how I'm importing the d ...

React is failing to display identical values for each item being mapped in the same sequence

I have implemented some standard mapping logic. {MEMBERSHIPS.map((mItem, index) => ( <TableCell className="text-uppercase text-center" colSpan={2} padding="dense" ...

Tips for automatically incorporating animation upon page initialization

I'm looking to add an automatic image effect when the page is loaded. I currently have this code in my js file: $(window).ready(function(){ $(pin).click(function(){ $("#pin01").show().animate({left: '650px'}); }) }); Here is the HTML wit ...

Setting up of imagemagick node module using linuxbrew

Having trouble installing imagemagick-native as it's showing an error. Tried using the following command to install: npm install imagemaick-native --save > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c45414d ...

The system is unable to locate a compatible object with the identifier '[object Object]' of type 'object'. NgFor is limited to binding with iterables like Arrays, not JSON data

Working with JSON data data:[ { assets:[[tool_order_id: "38",order_status_id: "10"]], order_info:[id: "1", order_type: "6",check: "1", current_Stage_id: "29"] }, { assets:[tool_order_ ...

Gallery Pagination using JQuery is not working properly

I am experimenting with the jquery easy paginate plugin on a separate page of my Blogspot. The images are displaying properly, but the pagination and CSS are not showing up. I need to adjust my CSS to make this jQuery pagination work correctly. Can someone ...

Is there a way to receive notifications on an Android device when the real-time data updates through Firebase Cloud Messaging (FC

I am attempting to implement push notifications in an Android device using Firebase Realtime Database. For example, if an installed app is killed or running in the background, and a user posts a message in a group (resulting in a new child being added in t ...

Exploring the dynamics of parent and child components in Angular

I'm currently working on an Angular2 project and I've hit a roadblock with the parent/child component interaction. My goal is to have a "Producer" entity that can have multiple "Products". Ultimately, I aim to retrieve lists of products associat ...

The issue here is that "onreadystatechange" in JS Ajax is not defined, even

For the past day, I've been struggling with this issue and going in circles. Any help would be much appreciated :-) Synopsis I'm facing a challenge with asynchronous AJAX calls to CGI using resolver and FQDN variables to obtain DNS resolution ...

What could be causing IE11 to cut off my JavaScript file prematurely?

Edit: I believe I have resolved the issue, and it seems to be more related to Angular than I initially thought. The problem was caused by a fat arrow in the script, which was not easily visible due to code minification. This script is a global script that ...

Converting CSV into an Array of Hash Tables

Currently, I am working on parsing a CSV file and creating an array of hashes. While I initially implemented this using my own code, I feel that it may not be the most efficient solution. My aim is to utilize the CSV-Parser library, but so far, I have only ...

Creating a touch-like scrolling experience with CSS and the mouse

Is there a way to incorporate mouse scroll functionality in my Angular app similar to the scrolling feature on touch screen devices where you swipe left or right to navigate? I'm interested in implementing a scrolling technique that allows users to cl ...

jQuery: How can I add ajax content dynamically? Trigger?

Currently, I am developing the frontend of a web application that heavily relies on AJAX functionality, such as loading comments. All AJAX requests are being handled through jQuery functions. I am curious if there is a way for me to detect these insertion ...

Unable to view flash elements in HTML using Django framework

Apologies for any errors in my English, I will do my best to explain clearly. I am new to working with Django and I have a html page with flash content called map.html. I would like to include this page into another page called soporte.html (which extends ...

Why does my value always revert to 0 whenever I switch screens while utilizing async storage?

Utilizing a stack Navigator, my primary screen is tracker.js, and the secondary one is macros.js. In macros.js, I have the ability to manually input nutritional macros (calories, Fats, Carbs, Protein) and add them to my UsedDailyCalories. However, when I ...

Steer clear of specifying product type when using AJAX to update cart count in Shopify

I have a unique scenario in my Shopify store where I need to update the cart count using Ajax, but exclude a specific product type called 'mw_product_option'. I found a workaround to exclude this product type from the count on a regular page refr ...

Leveraging parse with Angular.js instead of Backbone

I have experience with Angular.js but I am new to Backbone.js. Parse.com supports Backbone.js natively, so I'm considering learning it for easier implementation with Parse. Have any of you integrated Parse with Angular before? Is it worth the extra ef ...