Activate the dialog box exclusively after data has been submitted via the submit button on a form

My goal is to create a data saving functionality with a next button. After filling out the form, clicking on the next button triggers a popup dialog asking, "Do you want to submit your data?"

To achieve this, I included the following code in my submit button:

 <?php echo $this->Form->submit('Next', array('class' => 'btn btn-primary','id'=>'movesubmitbtn'));?>

This is the CakePHP submit button.

Additionally, here is my JavaScript code:

         <script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
         // Interrupt the submit function
    $('#movesubmitbtn').click(function(){
        if(confirm('This is your final submission of the data. Do you want to continue?')) { 
            return true;
        }
        else { 
            return false;
        }
    });
           movesubmitbtn
          });

        </script>

I am seeking assistance on how to add a disable property so that the popup only appears when there is data present. Please help me with this.

Answer №1

Check out this solution:

<button id="submitBtn" type="submit" disabled="disabled">Submit</button>
    <textarea id="textBox" rows="10" onblur="if(this.value == ''){document.getElementById('submitBtn').disabled = true;} else {document.getElementById('submitBtn').disabled = false;}"></textarea>

Alternatively, you can use a simpler approach:

<button id="submitBtn" type="submit" disabled="disabled">Submit</button>
    <textarea id="textBox" rows="10" onblur="document.getElementById('submitBtn').disabled = (this.value == '');"></textarea>

Answer №2

When utilizing jQuery:

$('form').on('change', function(){
    // This function will be executed each time there is a 'change' in the form
    // For example, whenever a user modifies an input field
    // It checks if all required inputs have a value
    if('' == $('#inputA').val() || '' == $('#inputB').val()){
        $('#movesubmitbtn').disabled = true;
    } else {
        $('#movesubmitbtn').disabled = false;
    }
});

It's also recommended to include this code within the 'submit' event of the form rather than on the 'click' event of the button. By doing so, you can prevent the form from being submitted when the user presses the 'enter' key inside a text field.

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

What is the best method for converting a string picture URL into an image and showcasing it in an image tag?

I have a URL for an image that looks like this: C:\inetpub\MaujApp\OMSAPI\ManualReceivingImages\WhatsApp Image 2021-03-24 at 12.07.41 PM.jpeg My goal is to convert the original image and display it to the user using jQuery. I woul ...

Unravel JSON using JavaScript on the web

I encountered an issue while running this code and trying to decode it: var data = JSON.parse({"forms":[{"url":"example.com/example","name":"example"}]}) document.getElementById("name").innerHTML=data.forms.name Instead of the expected value, the returne ...

What steps can I take to make sure the JavaScript runs and updates the images correctly?

Trying to adjust image sizes with JavaScript. Followed a jsfiddle example, but it's not working on the page. Seems like the script is misplaced. How can I fix this? <!DOCTYPE html> <html> <head> <meta http-equiv="cont ...

Utilizing Mongoose Schema across various endpoints in an Express application

As a newcomer to Node.js, I am using Mongoose and Express for my project. Within the routes/index.js file, I have defined a userDataSchema as follows: var Schema = mongoose.Schema; var userDataSchema = new Schema({ username: String, username_lower: ...

Challenges with character encoding in NextJS

I am currently dealing with a line of code that creates a dynamic route. <Link href={`/bundeslander/${urlName}`} ><div className=" text-blue-400">{state.name}</div></Link> The variable urlName is generated by fetching dat ...

Balancing heights with jQuery

Is there a way to set the height of an h3 element based on the tallest version of its siblings, but only for certain elements? I have a list where CSS organizes items into rows of 3. The last li element in each row has the class "endRow". I want to find t ...

Challenge encountered in posting a variable generated through ajax

Embarking on my first attempt at utilizing ajax has been quite challenging. Essentially, when an option is selected from the initial field, javascript and xml trigger a php script that generates the next dropdown menu based on information fetched from an S ...

What causes the variable to be undefined in the method but not in the constructor in Typescript?

I am currently working on an application using AngularJS 1.4.9 with Typescript. In one of my controllers, I have injected the testManagementService service. The issue I'm facing is that while the testManagementService variable is defined as an object ...

Cross-site JSON communication without JSONP

I have a device connected to my local network that I can access using its IP address in order to retrieve JSON data. While developing a web-based application, I encountered an issue where the app couldn't access the local JSON data due to cross-domai ...

Submitting an extremely large string to an Express server using JS

How can a large String be efficiently sent to a Node.js Express server? On my webpage, I am using Codemirror to load files from an Express server into the editor. However, what is the most effective method for sending "the file" (which is actually a bi ...

How can I include a close/ok button at the bottom of a bootstrap multiselect component?

Currently, I am utilizing the Bootstrap multiselect tool to filter query outcomes on a specific page. After selecting one or multiple options, my goal is to have a "close" or "OK" button visible at the bottom of the selection list. Upon clicking this butto ...

How Angular JS alters scope when used in a function

I am currently working on a controller that manages the clicks of buttons in a navigation bar. I am trying to find a way to update the value of '$scope.active' with each click event. Below is my previous code which is functional, where the values ...

Is there a way to tally up the overall count of digits in a number using TypeScript?

Creating a number variable named temp in TypeScript: temp: number = 0.123; Is there a way to determine the total count of digits in a number (in this case, it's 3)? ...

Struggling to get my JavaScript function for calculating one rep max to work, need some help figuring out the issue

I have been working on a one rep max calculator using the Epley Formula. However, when I try to call the function, it returns as undefined. I have utilized the parameters weight and reps, both of which are parsed as integers, believing that they would be e ...

Understanding the separation and communication techniques in Vue.js components

I recently developed a small vuejs application and I find myself getting confused with the functioning of components. Here is the code snippet that I have been working on: <div id="app"> <div v-if="loggedIn"> <nav> <r ...

How can one get rid of a sudden strong beginning?

Recently, I delved into the world of CSS animation and encountered a frustrating issue. I've tried numerous methods and workarounds to achieve a smoothly looping animation without interruptions. Despite my efforts, I have not been able to replicate th ...

Having trouble making changes to MUI TextFields once they've been filled in with data from an

My goal is to make MUI TextFields editable even after they have been filled with data from an API. The TextFields are getting populated successfully. I attempted using an onChange function, but it only allowed one additional character to be entered befor ...

Tips for saving and accessing the value of an md-select ng-model in an AngularJS dialog?

Currently, I am utilizing a template to populate an md-dialog box: The procedure for displaying the dialog: $scope.showDialog = function(element) { var parentEl = angular.element(document.body); $mdDialog.show({ template: element, scope: $scope, pr ...

Converting to alphanumeric characters using JavaScript

Is there a way to efficiently encode a random string into an alphanumeric-only string in JavaScript / NodeJS while still being able to decode it back to the original input? Any suggestion on the best approach for this would be greatly appreciated! ...

What is the best way for Cucumber to move on to the next annotation only after ensuring all async requests from the previous one have finished processing?

I am looking to set up a basic test using Selenium and Cucumber for logging into my web application and confirming that the main page is displayed correctly. Currently, all three tests are returning true even before the page is fully loaded. The issue ar ...