conceal the submission button

How can I dynamically disable a save button when a specific value is selected from a dropdown menu? I have tried using CSS (display:none) and jQuery (attr) options but they are not working. Is there another method that I can use?

$(document).ready(function() {
  $(document).on("change", "select[id^='dropdown_status']", function() {
    var status_value = $(this).val();
    if (status_value == '2' || status_value == '3') {
      //button disable code
      //css code not working
      $(.submit).css('display', 'none');
      $('.submit').hide();
      //jquery code not working 
      //$(':input[type="submit"]').prop('disabled', true);
      //$(":submit").attr("disabled", true);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="status" id="dropdown_status414938923" size="1" tabindex="-1" title="" style="display: none;">
    <option value="1">Apple</option>
    <option value="2">Grapees</option>
    <option value="3">mango</option>
    </select>
<input type="submit" class="submit" name="update" value="Save">

Answer №1

$('select').on('change', function() {

  if (this.value == '2' || this.value == '3')
    $("input").prop('disabled', true);
  else
    $("input").prop('disabled', false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="status" id="dropdown_status414938923" size="1" tabindex="-1" title="">
<option value="1">Apple</option>
<option value="2">Grapees</option>
<option value="3">mango</option>
</select>
<input type="submit" class="submit" name="update" value="Save">

Answer №2

To disable an element, use prop disabled. To hide an element, use addClass.

// Use prop disabled to only disable
$('.submit').prop('disabled',true);
// Use addClass to hide
$('.submit1').addClass('hide');
.hide{
  display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="submit" name="update" value="Save">
<input type="submit" class="submit1" name="update" value="Save">

Answer №3

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $('.dropdownstatus').on('change', function() {
          var status_value = ( this.value );
           if (status_value == '2' || status_value=='3')
          {
           $('.submit').css('display','none');
          }
          else{
           $('.submit').css('display','block');
          }
        });
      });
    </script>
  </head>
  <body>
    <select name="status" class="dropdownstatus" id="dropdown_status414938923" size="1" tabindex="-1"title="">
      <option value="1">Banana</option>
      <option value="2">Oranges</option>
      <option value="3">Pineapple</option>
    </select><br/>
    <input type="submit" class="submit" name="update" value="Save Changes">
  </body>
</html>

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

The onChange function in Material UI Text Field is preventing users from inputting additional values

My application contains a custom TextField component. I am facing an issue where I cannot increase the value of the first TextField due to the presence of the onChange method. However, the second TextField does not have the onChange method, and I can succe ...

There is an error in the TypeScript code where it is not possible to assign a string or

I'm struggling to resolve a typescript error. Upon checking the console log, I noticed that the regions returned by Set are an array of strings, which aligns perfectly with the region type in my state. Why isn't this setup working as expected? S ...

What is the best way to display circles (generated from JSON data) in reverse order by incorporating a delay function?

I am currently working on creating an interactive visualization using circles that expand over a specified period, all centered at the same point. I have a script that generates these circles and saves the data in a JSON file. The smallest circle is posit ...

Changing a string into a JavaScript date object

I am encountering an issue where I have a string retrieved from a JSON object and attempting to convert it to a JavaScript date variable. However, every time I try this, it returns an invalid date. Any insights into why this might be happening? jsonObj["d ...

Is there an issue preventing Three.js from rendering properly?

I created a simple file to experiment with the Three.js library, however I encountered an issue when trying to add the renderer (an element) to the $container (which is defined as $('#container')). <!DOCTYPE html> <html lang='en&ap ...

NodeJs backend encounters undefined object due to FormData format request sent from Angular frontend

Never encountered this issue before despite having used this method for a long time. (Angular Frontend) const myFormData = new FormData(); myFormData.append("ok", "true"); this.http.put(my_Express_backend_url, myFormData); (Express ...

Resolving the issue of multiple instances of React within a single application

I'm currently working on a React module in my local environment. To link the module, I am using npm link. Although the module is being imported successfully, the hooks inside the module are failing with the following error message: Invalid hook call ...

Using the information selected from the dropdown menu, the table was refined through an AJAX request

Having a small issue with ajax when working on my project. I have two actions in the view: <body> @Html.Action("SetSearchFilter") @Html.Action("FillTable") </body> The first action is a DropDownList: @Html.LabelFor(m => m.Manager, ...

Utilizing a CSS property within jQuery

Here is the code snippet: http://jsfiddle.net/cmac2712/dnLgD/ $(document).ready(function () { var setVisibility = function(n){ $('#content1').css('visibility', 'hidden'); $('#content2').css(&apos ...

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

Currently, I am working on mastering the utilization of forward refs. In a functional component (FC), I am trying to initialize all my refs and then pass them down to its child components so that I can access the canvas instances of some chartjs charts. Ho ...

Guide to altering the color of a list item when hovering in HTML

Is there a way to change the color of the <li> element only when hovering over it, without affecting its parent or child elements? Here is an example: HTML: <div id="tree"> <ul> <li>apple</li> <li>banana</l ...

Enclose the string stored in the variable with double quotation marks

I am retrieving a variable called audioUrl from the database which is stored as a string url. The issue I am facing is that the url does not have double quotes around it, so I need to add them manually. Below is my code snippet: var audioUrl; // The ur ...

What is the best way to implement a responsive navigation bar for mobile devices using Bootstrap 4 integrated with Vue

I've been putting in a lot of effort to create a responsive navbar using Bootstrap 4 with Vue. Here is the code in my App.vue file: NavBar <b-navbar-nav> <b-nav-item href="#">Link</b-nav-item> <b-nav-item href="#" disabled ...

Is it possible for an Android webview to access the device's geo location?

For the application I'm working on, it's necessary to access the user's geo location. We've created a HTML 5 based website and are using a webview to develop our mobile application by calling the website URL. With the latest geo tags av ...

Table formatting problem

I am looking to add borders only below each row in my table. td{ border-bottom-style: solid;} However, I am noticing a visible border break between columns. Can anyone advise on how to remove that? ...

Comparison between AJAX and HTML headers for submitting data using JQuery and Rails

This situation is a bit unique... I have a collection of checkbox images that trigger form submission when clicked, utilizing the following Javascript: $('#pin_rose').simpleImageCheck({ image: '/images/rose.png', imageChecked: &ap ...

Error: Attempting to access property 'question' of an undefined value

Trying to render information from a local .json file using Javascript functions, I encountered an error in the console for const answer despite being defined. I temporarily commented it out to test the function, only to receive the same TypeError for quest ...

Triggering the onChangeMonthYear() event manually for jQuery datepicker

Currently, I am working with this function: $('#picker').datepicker({ // ... onSelect: function(currDate){ } }); I would like to manually trigger the onSelect() function, but using $('#picker').datepicker.onSelect(); does ...

Generate a new random color in Vue.js for each user added to the list whenever the page is refreshed

I am looking to convert some jQuery code into Vue.js. The goal is to assign a random color to each user in a dynamic list every time the page is (re)loaded. Below is the original jQuery code: //RANDOM USER COLOR $(".usersElements").each(function(inde ...

Looking to bookmark Java links or a similar task?

Apologies for the lackluster title, as I am not well-versed in programming language and struggle to articulate my specific request... Allow me to explain: I frequently need to visit a particular website to conduct research (details below). I attempted usi ...