The close button within a Bootstrap modal window is experiencing a malfunction

My small JavaScript script is supposed to change the button text from "Subscribe" to "Close" after someone signs up for a newsletter. However, the functionality does not work as expected and the modal box closes instead.

Check out an example page here.

This is how my JavaScript script looks:

<script>
let $input = document.getElementById('mc-embedded-subscribe')
  $input.addEventListener('click', function (){
    this.value= "close"
    this.backgroundColor= "red"
  })
</script>

What could I be missing here?

View the Codepen here.

// Scripts related to MailChimp form
// Inserted scripts go here
 // CSS code specific to the MailChimp form
 // Inserted CSS code goes here 
<!DOCTYPE html>
<html lang="en">
<!-- HTML Structure for MailChimp Form -->

Answer №1

Here is a simple snippet of code that can provide a quick solution:

  1. We have included a check to verify if the success message is being displayed.
  2. A 1-second timeout has been implemented to change the close text and add the 'data-dismiss' attribute to the modal for popup closure.
let $input = document.getElementById('mc-embedded-subscribe');
$input.addEventListener('click', function (){
  setTimeout(function(){
    if(document.getElementById("mce-success-response").style.display !== "none") {
      document.getElementById('mc-embedded-subscribe').value= "close";
      document.getElementById('mc-embedded-subscribe').setAttribute('data-dismiss','modal');
    }
  },1000);
})

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='COUNTRY';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
<!-- Start mc_embed Script Signup -->
<script type='text/javascript' src='https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';
$.extend($.validator.messages, {
  required: "This field is required.",
  maxlength: $.validator.format("Enter at most {0} characters."),
  minlength: $.validator.format("Please enter at least {0} characters."),
  rangelength: $.validator.format("Enter between {0} and {1} characters."),
  email: "Please enter a valid email address.",
});}(jQuery));var $mcj = jQuery.noConflict(true);
</script>
<script>
let $input = document.getElementById('mc-embedded-subscribe')
  $input.addEventListener('click', function (){
  setTimeout(function(){
  if(document.getElementById("mce-success-response").style.display != "none") {
    document.getElementById('mc-embedded-subscribe').value= "close",
    document.getElementById('mc-embedded-subscribe').setAttribute('data-dismiss','modal')
    }},1000);

  })
</script>

Answer №2

Give this a shot...

<script>
  let $input = document.getElementById('mc-embedded-subscribe');
  $input.addEventListener('click', function (){
    this.setAttribute('style','display:none');
    document.querySelector('.clear').innerHTML = '<input type="button" value="Close" style="background-color:red" name="Close" id="mc-embedded-subscribe" class="button">';
  })
</script>

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

Are Stacked DIVs with Variable Height Top DIV Compatible with CSS?

I am currently experimenting with stacking two boxes on my mobile web application view using HTML/CSS. I prefer not to utilize JavaScript or hardcode values in this basic design. Specifics: The top box must have a dynamic height, with contents that ar ...

Vuetify: how to disable the color transition for v-icon

My menu includes both icon and text items, with hover color styled using the following CSS: .v-list-item:hover { background: #0091DA; } .v-list-item:hover .v-list-item__title, .v-list-item:hover .v-icon { color: white; } The problem is that the ...

Creating a separate CSS file for a CSS class that sets the width of a <div

I am looking to enhance a div element by incorporating a specific class from a separate CSS file. For example, my HTML file contains the following snippet: /* width 90% */ @media (min-width: 960px) { div.width90 { max-width: 90%; } } <div cl ...

Creating an overflow effect for sliders using only CSS

Is it feasible to develop a slider that extends beyond its parent elements and the body? The concept involves having content within a section housed in a container. The slider would be part of this section, with slides overflowing past the parent element ...

The CSS attribute for setting the background color of Shell in css/default.css does not produce any visible

Currently working my way through the book "Eclipse 4 Plug-in Development by Example Beginner's Guide", specifically on the section titled "Time for action – styling the UI with CSS". The guide instructs to edit the "css/default.css" file and add th ...

What is the best method to transfer a div from one container div to another using jQuery?

I need some assistance with moving a div from one container to another using jQuery's sortable API. I've included the code within the jQuery ready function, but it doesn't seem to be working as expected. Here is the snippet of code I have a ...

get an html hyperlink to download excel

I am attempting to download the excel file from my angular application, and in order to do so I have set up a subfolder named Files <p><a href="/Files/MyList.xlsx" download target="_self"> Click here to Download </a>&l ...

Problem with applying ng-class directive in AngularJS

I am currently developing an application using AngularJs and Bootstrap. My goal is to display the title of a 'scenario' with different styling based on its status, along with a specific icon. Initially, I attempted the following approach: <s ...

Tips on waiting for all pages to fully load before obtaining elements from them?

<div id="validationPages"> <div id="page1Div"></div> <div id="page2Div"></div> <div id="page3Div"></div> <div id="page4Div"></div> </div> <script type="text/javascript"> ...

Is it possible for an HTML number input's arrows to change in increments that are different from its designated step attribute?

Within my design, I have implemented an <input type="number" step="1"> element for selecting font size. However, in the context of working on a large canvas, adjusting the number by 1 is hardly noticeable. It would greatly enhance ...

Concealing certain options in a dropdown list with jQuery Chosen

My app has a unique feature where it displays different dropdown lists based on previous selections. Specifically, I have two lists - one for vehicle Makes and the other for Models. When a specific Make is chosen, like BMW or Audi, the next list will only ...

What is the best method to pass a JavaScript file array to a Node.js server?

Is it possible to transfer data from a Javascript file linked to an HTML page to a Node.js file on a post route without displaying it on the HTML page? If so, what is the best way to accomplish this? ...

Locate a nested HTML form within an Asp.net webpage

I am encountering an issue with a nested form on my asp.net page. This nested form contains a login/password field that needs to be passed to another application. I am attempting to submit the nested form using javascript, but I am struggling to get a refe ...

Difficulty in smoothly changing background image using JQuery

Update After some troubleshooting, I realized that the background image was indeed fading out. The issue was that the background image was being removed before the fade effect could be seen. By removing .css('background',''), I was abl ...

Buttons for concealment and revelation are unresponsive

I have the following code snippet for uploading an image, which is taken from a template utilizing bootstrap 2. <div class="span6"> <div class="control-group"> <label class="control-label">Imagen</label> <div cla ...

Display various JavaScript function outputs in an HTML table for convenient tracking

Thanks to a helpful user on this platform, I was able to capture data from a JavaScript function and display it in an html table. However, I now have another query. How can I execute the function multiple times during page load and record the results in ...

Issue with Displaying Background Image

When trying to set my background image on CDM using document.body.style={mainBg}, I am not getting the expected result. Additionally, the console statement below it is printing out an empty string. Can anyone assist me in identifying what mistake I might b ...

Tips for achieving printing with the "Fit sheet on one page" option in JavaScript

Is there a way to print a large table of data with 200 or 300 rows all on one page, similar to the Online MS Excel print option 'Fit Sheet on One Page'? I attempted the code below: var tble = document.createElement("table"); tble.id = "tble"; d ...

Can you explain the function of the "Normalize CSS" feature in Fiddle?

I recently came across this interesting fiddle: Demonstration of rounded corners It achieves the desired outcome, however, I noticed that it only works properly when the "Normalised CSS" checkbox is selected. When it's not checked (like in my code), ...

What could be causing the decreasing opacity of lines at the edge of my HTML5 canvas?

I have embarked on the journey of creating a bar graph using an HTML5 canvas. The process involves a series of lines drawn with the help of .moveTo(), .lineTo(), and .stroke(). Below is the code snippet I am using for this purpose. Although I am new to wo ...