What steps are needed to enable a button once a file has been uploaded and the terms and conditions have been agreed to

On my webpage, users need to upload a list of people and agree to terms and conditions before they can click on the pay button. How can I disable the button until they have uploaded the file and checked the terms and conditions checkbox?

    // Function to convert uploaded file to JSON
    $(document).ready(function(){
          $("#employeelist").change(function(evt){
             window.selectedFile = evt.target.files[0];
             convertToExcel(); return false;
          });
    });

    <!-- File Upload -->
    <input type="file" id="employeelist" name="employeelist" autofocus autocomplete="off" accept=".csv, .xls, .xlsx" /> 


    <!-- Terms and Conditions Checkbox -->
    <input type="checkbox" name="termsNcon" value="termsNcon" id="termsNcon" /> I have read and agree to the Terms and Conditions and Privacy Policy

    <!-- Pay Button -->            
    <button id="stripe-button" disabled> > Continue to Pay </button>

I want to only enable the >Continue to Pay button once a file has been uploaded and the Terms and Conditions checkbox is checked.

javascripthtmlcss

Answer №1

Give this a try.

$(document).ready(function(){
  $("#employeelist").change(function(evt){
    window.selectedFile = evt.target.files[0];
    var terms = $('#termsNcon').is(":checked");
    if(window.selectedFile && terms){
      $('#stripe-button').prop("disabled", false);
    } else {
      $('#stripe-button').prop("disabled", true);
    }
    //executeFunction(); 
    return false;
  });
  
  $('#termsNcon').change(function(){
    var terms = $('#termsNcon').is(":checked");
    if(window.selectedFile && terms){
      $('#stripe-button').prop("disabled", false);
    } else {
      $('#stripe-button').prop("disabled", true);
    }
    //executeFunction(); 
    return false;
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//File
<input type="file" id="employeelist" name="employeelist" autofocus autocomplete="off" accept=".csv, .xls, .xlsx" /> 


//CheckBox
<input type="checkbox" name="termsNcon" value="termsNcon" id="termsNcon" /> I have read and agree to the Terms and Conditions and Privacy Policy

//button            
<button id="stripe-button" disabled>Continue to Pay</button>

Answer №2

$(document).on("change","#checkbox",function(){
if($(this).is(":checked")) {
$("#button").prop("disabled",false);
}
else{
$("#button").prop("disabled",true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="checkbox" type="checkbox" />
<input id="button" type="button" disabled="true" value="submit" />

Answer №3

Follow these steps to achieve the desired result:

// locate elements
var fileCtrl = $("#employeelist");
var termsCtrl = $("#termsNcon");
var btn = $("#stripe-button");

function checkValidation() {
if(fileCtrl.val() && termsCtrl.prop("checked")) {
  btn.attr("disabled", false);
  }
  else {
  btn.attr("disabled", true);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="employeelist" name="employeelist" autofocus autocomplete="off" accept=".csv, .xls, .xlsx" onchange="checkValidation()" /> 
<br />
<input type="checkbox" name="termsNcon" id="termsNcon" onchange="checkValidation()" /> <label for="termsNcon">I have read and agree to the Terms and Conditions and Privacy Policy</label>
<br />
<button id="stripe-button" disabled>Continue to Pay</button>

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

Error: Linux version 4.4.0-43-generic

After attempting to install npm with nodejs, I encountered an error that I can't seem to resolve. Despite my efforts and even trying linuxbrew, the issue persists. Any advice on how to overcome this obstacle? npm ERR! Linux 4.4.0-43-generic npm ERR! ...

javascriptnode.js

The placement of an element is determined by its size and proportions

I'm experiencing some issues with avatars on my website. When the avatar size is set to 35x35 pixels, everything works fine. However, problems arise when the dimensions exceed 35x35 pixels. I suspect that the problem is related to the "position: abso ...

csslayoutcss-position

Performing calculations on PHP and MySQL data within an HTML table, enabling precise percentage

Here's the code I'm currently working with: <td> <?php echo $row['feild1'] + $row['feild2'] + $row['feild3'] + $row['feild4'] + $row['feild5'] + $row['feild6'] + $row[' ...

phphtmlmysql

Using Angular to fetch API response and convert it into a promise

I've been following the Angular tutorial available at https://angular.io/tutorial/toh-pt6. The tutorial demonstrates how to retrieve a Json response from an API call and then match it to a promise. One specific example from the tutorial is as follows ...

javascriptangularaws-api-gateway

What is the best way to change the color of a website button upon hovering over it?

Hello everyone, I'm new to stackoverflow and seeking some guidance. I am currently working on my website and I would like the background color of the top navigation links to change when hovered over. Specifically, not just the text but the entire are ...

htmlcss

Visibility of Tokens within Next.js

Are fetch request tokens in a next.js app visible to client-side users? I am currently working on an application that involves using the GitHub GraphQL API. I am considering implementing a fetch request with a bearer token, but I am uncertain about the se ...

javascriptreactjsgraphqlnext.jsfrontend

What's causing this javascript to malfunction on the browser?

I encountered a problem with the code in my .js file. Here is a snippet of the code: $.extend(KhanUtil, { // This function takes a number and returns its sign customSign: function(num){ num = parseFloat(num) if (num>=0){return 1} ...

javascripthtml

Do we still need to configure XSRF-TOKEN on the server even when using HttpClientXsrfModule?

Would implementing the code below in app.module be sufficient to protect against XSRF/CSRF on the client side? HttpClientXsrfModule.withOptions({ cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN' }) Alternatively, is additional ...

javascriptangularexpresscsrfnestjs

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

javascripthtmlcssloopsdom

Varied approaches to managing responsive layouts

I am encountering an issue with the responsive design of a website I am currently developing. Scenario: The website features 3 different layouts for Desktop, Tablet, and mobile devices. These layouts consist of similar components with slight CSS adjustmen ...

javascriptjqueryhtmlcss

How to Display a Modal Window Automatically Using Bootstrap.js?

Recently, I've become interested in using the Bootstrap library by Twitter for my simple web page. My goal is to have a modal window automatically display after the page loads. If anyone has any tips on how to achieve this, I would greatly appreciate ...

javascriptjquerytwitter-bootstrapmodal-dialog

Sending JSON data to the server using jqGrid: A step-by-step guide

[CHANGE] (I couldn't bear to wait 3 hours for an answer): It seems that the issue is not with the jqGrid component, many thanks to TheCodeDestroyer for identifying this. I ran this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h ...

javascriptjqueryjsonpostjqgrid

Ways to create a scrolling container with dynamic CSS transformations

Visit this website with a unique feature - a scrolling div on the left. The div scrolls along rhythmically as you navigate through the page, changing colors dynamically. The use of position:fixed is not the only method to achieve this effect. So, what oth ...

jqueryhtmlcss

Navigate to the subsequent frame once the HTML5 video finishes playing

I have created a basic HTML webpage with a fullscreen background video (not set to loop) using the Vide plugin. Everything is working well, but I want the video to pause on the last frame to showcase a logo I have included at the end. This functionality w ...

javascriptjqueryhtmlvideosafari

PhoneGap iOS application storing outdated information

My Phonegap 2.1 app running on iOS 6, with jQuery 1.7.2 and JQMobile 1.1.1 libraries, is experiencing an issue where old data from ajax responses gets cached if the app is unused for a few days. The only way to resolve this issue is by reinstalling the a ...

javascriptjqueryiphonecordova

Use the reduce method to convert a JavaScript object from 2 to 1

Looking to create a function that can transform these objects: const input1 = [ { id: "lkhj68C13h8uWh4RJz7", post: "on XSS attacks", gender: "Littérature", postId: "cxTbP5EZjNCxw7rD60L7", }, { ...

javascriptnode.jsarraysreactjstypescript

The Angular error TS2531 occurs when attempting to call scrollIntoView on an object that may be null

In my current Angular project, I am attempting to implement a scroll view using ViewChild by id. This is the method I have written: ngOnInit() { setTimeout(() => { if (this.router.url.includes('contact')) { ...

javascriptangulardom

Transform the array within a callback function

Seeking assistance: I am grappling with the challenge of constructing an array of results within a loop of MySQL results. The ultimate goal is to populate an array with normalized objects derived from raw data. Any guidance would be greatly appreciated! ...

javascriptnode.jsexpress

Navigate to the following section by scrolling down, and return to the previous section by scrolling up

Currently, I am working on a portfolio website for a filmmaker and I have a specific requirement. As users scroll down the window, I want the page to smoothly transition to the next section, and when scrolling up, I want it to go back to the previous secti ...

javascriptjqueryhtmlcssweb

Mock needed assistance

In my testing scenario, I am attempting to simulate a service that is utilized by my function using sinon. However, I am encountering difficulties in inserting the mock into my function. The service is obtained through the use of require The structure of ...

javascriptnode.jsunit-testingmockingsinon