What is the best way to deactivate the button when there are no arrays present in the input?

Question

What is the best way to deactivate the button when there are no arrays present in the input?

In my HTML, the input value is populated by user selection and stored in array format (e.g.

45[45, 6, 33], 67[67,2,5] and so on..

). Essentially, the value will look like this:

<input id="question_string" type="hidden" value="{}">
<input class="submit_updates" name="commit" type="submit" value="Process">

I want to disable the submit button or display an alert message saying 'Select all values' if the input does not contain any arrays within the {}.

Updated:

var question_hash_element = document.getElementById('question_string');
var question_hash = JSON.parse(question_hash_element.value);

   var myArray = new Array();
      myArray[0] = window.batch_question_id;
      myArray[1] = window.answer_id || window.answer_text || window.batch_answer_checkbox
      myArray[2] = window.build_id

This code above stores the values in the {}. I only want to enable the form submission once all fields are selected. If the values are empty within {}, the button should remain disabled; otherwise, it should be enabled.

I attempted the following:

 $('.submit_updates').click(function () {
    if ($('#question_string') == {}) {
      return false;
      alert("Select all the Values");
    } else {
      return true;
    }
  });

Unfortunately, this approach is not functioning correctly.

Any assistance would be greatly appreciated! Thank you

javascript jquery html css

Answer 1

Answer №1

$('button.update_submission').on('click', function (e) {
   e.preventDefault();
   if ( $.trim($('#question_input').val())=='{}' ) {
       console.log('No question provided!');
   } else {
       this.form.submit();
   }
});

Answer 2

$('button.update_submission').on('click', function (e) {
   e.preventDefault();
   if ( $.trim($('#question_input').val())=='{}' ) {
       console.log('No question provided!');
   } else {
       this.form.submit();
   }
});

Answer 3

Answer №2

You have to ensure the alert message is displayed before returning false.

Here's a better way to handle it:

$('.submit_updates').on("click", function () {
  if ($('#question_string').val() == "{}") { //Adjusted condition
    //Show alert message
    alert("Select all the Values");

    //Disable the submit button
    $(".submit_updates").prop("disabled", true);
    return false;
  } else {
  return true; //Not really needed
 }
});

It is recommended to use on and prop instead of click and attr, as @adeneo suggests.

Answer 4

You have to ensure the alert message is displayed before returning false.

Here's a better way to handle it:

$('.submit_updates').on("click", function () {
  if ($('#question_string').val() == "{}") { //Adjusted condition
    //Show alert message
    alert("Select all the Values");

    //Disable the submit button
    $(".submit_updates").prop("disabled", true);
    return false;
  } else {
  return true; //Not really needed
 }
});

It is recommended to use on and prop instead of click and attr, as @adeneo suggests.

Answer 5

Answer №3

Check out this code snippet

$(document).ready(function(){
     $('.submit-updates').on('click', function () {
        if ($('#question').val() == "{}") {
              $(this).prop('disabled', 'disabled'); 
              alert("Please select all the values");
        } else {
            // Continue with the logic
        }
      });
});

Code Demo

Answer 6

Check out this code snippet

$(document).ready(function(){
     $('.submit-updates').on('click', function () {
        if ($('#question').val() == "{}") {
              $(this).prop('disabled', 'disabled'); 
              alert("Please select all the values");
        } else {
            // Continue with the logic
        }
      });
});

Code Demo

What is the best way to deactivate the button when there are no arrays present in the input?

Answer №1

Answer №2

Answer №3

Similar questions

Creating a unique SVG pattern starting from the center

The argument type does not match the parameter type partial<>

Twilio SMS Notification: The Class extension value provided is not a valid constructor or null

Ensuring consistent readability in Bootstrap 4 by wrapping text without affecting the height

What is the best way to update the text of an <a> element when it is clicked

Issues with fonts in Google Chrome Version 32.0.1700.76 m

Determine the values of a Checkbox and a hidden input field

Activate dynamic validation to ensure all necessary fields are completed before proceeding without the need to save

Angular - Triggering actions with ng-hide and ng-show events

Tips for positioning text within an input field above a div element

Leveraging PapaParse for CSV file parsing in a React application with JavaScript

Using jQuery, add a class for a specified amount of time in milliseconds

Obtaining the response object for the web browser

The resizing issue persists with Angularjs charts

Unable to retrieve the td value for the current row when the button inside the DIV is clicked

How to target and append individual table cells to a particular table row using JQuery

Is it possible to add an element to the beginning of an array using a chained method without relying on the map function?

AWS Amplify-hosted Nuxt applications are resilient to errors during the build process

Is it more efficient to have a single global event listener or multiple event listeners of the same type in each component for productivity?

Sending an incorrect value to the data variable