Prevent fields from being edited until the main field is filled out

Currently, I am in the process of designing a form with three primary fields at the top – Organization Name, Department, and Address. The other fields are not relevant for now. It is imperative that the user inputs data into the Organization field before being able to utilize the Department and Address sections.

If you would like to preview the form I have created, please click on this link: Here is the form. You can also view a mockup depicting how the form should appear if no information has been entered in the Organization name field via this link: image 2.

<div class="control-group required">
    <label class="control-label">Organisation Name <em>*</em></label>
    <div class="controls">
        <div class="input-append input-prepend">
            <input type="text" class="input-xxlarge" id="Organisation-Name">
            <button type="button" class="btn" href=""> Find</button>
        </div>
    </div>
</div>

<div class="control-group">
    <label class="control-label">Department</label>
    <div class="controls">
        <div class="input-append input-prepend">
            <input type="text" class="input-xxlarge" id="Department">
            <button type="button" class="btn" href=""> Find</button>
        </div>
        <span class="help-inline"><i class="help" title="Enter the Department of this Opportunity.">Help</i></span>
    </div>
</div>

<div class="control-group">
    <label class="control-label">Address</label>
    <div class="controls">
        <div class="input-append input-prepend">
            <input type="text" class="input-xxlarge" id="Address">
            <button type="button" class="btn" href=""> Find</button>
        </div>
        <span class="help-inline"><i class="help" title="Enter the Address for this Opportunity.">Help</i></span>
    </div>
</div>

After incorporating some suggestions below, I was able to adjust the appearance as shown above. Upon entering data in the Organization field, the bottom two fields should revert to their original state.

To visualize the changes made based on the provided suggestions, please refer to the following link: https://i.sstatic.net/99yM8.png

jqueryhtmlcssforms

Answer №1

Check out this example: https://jsfiddle.net/x0fwf6ro/

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head>
<body>

Name: <input id="name" type="text"> <br/>
Age: <input id="age" type="text" disabled> <br/>
Roll No: <input id="rollNo" type="text" disabled>

<script>

$(document).ready(function(){
    $('#name').keyup(function(){
        val = $('#name').val();
        if(!!val){
            $('#age').prop("disabled", false);
            $('#rollNo').prop("disabled", false);
        }
        else{
            $('#age').prop("disabled", true);
            $('#rollNo').prop("disabled", true);
        }
    });
});

</script>

</body>

</html>

Answer №2

$(document).ready(function(){
   $("#Department_id").attr("disabled",true);
   $("#Address_id").attr("disabled",true);

   $(document).on("keypress", "#Organisation_id", function(){
     if($("#Organisation_id").val() !=='' || $("#Organisation_id").val()!=NULL)
       {
         $("#Department_id").removeAttr("disabled");
         $("#Address_id").removeAttr("disabled");
       }
      else
       {
         $("#Department_id").attr("disabled",true);
         $("#Address_id").attr("disabled",true);
      }
  });

});

Answer №3

If you're looking to utilize jQuery and verify if a field is empty or not, take a peek at the code snippet provided below:

 $(document).ready(function() {
     
     $("#field1").focus();
     
     var error_message = "Please ensure field 1 is filled.";
     
      $("#field1").blur(function() {
          if ($(this).val() != '')
          {
              $("#field2").removeAttr("disabled");    
              $("#message").html("");
          }
     else {              
              $("#field2").attr("disabled", "disabled");  
              alert(error_message);
          }         
     
      });
 });
[disabled] {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Field 1: <input id="field1" type="text" /><br/><br/>
Field 2: <input id="field2" type="text" />

Expect this explanation to be beneficial!

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

Converting JSON data into an interactive web page

I am in need of assistance with a programming question that has me feeling stuck. I'm uncertain where to even begin with this particular problem. Any guidance or help would be greatly appreciated. My task is to create an HTML page that features anima ...

jqueryhtmljson

Reasons behind the lack of proper styling in my p-calendar from PrimeNG

Currently deep diving into Angular for a project and I decided to incorporate the <p-calendar> component from primeng. After installing the necessary packages, the versions were: "primeicons": "^2.0.0", "primeng": "^5.2.7", Initially everything was ...

htmlcssangularsassprimeng

Click on a link to open it in the current window and simultaneously in a new window or tab

Is it possible to use jQuery to open a link in the current window and a second link in a new tab? Just to clarify, this is not an annoying pop-under. This request comes directly from the client for their company's system. Here is what I've been ...

jquery

Saving Pictures in Database Without Using jQuery

Hey there fellow developers, I'm currently immersed in a web project that involves reconstructing a social media platform similar to snapchat. To capture images, I am utilizing my webcam with JavaScript and saving the image data to a variable named i ...

javascriptphphtmlajax

Error Encountered: Angular - Despite successful $http.delete request, the operation does not actually take

I am currently facing an issue with deleting a customer in my Angular + PHP application. Although the application returns success without any errors, it fails to delete the customer from the database. Here is the code snippet of my Angular controller: ...

phphtmlajaxangularjsdatabase

Tips for expanding a fabric canvas to match the entire width of its parent division

specific scenario I have a cloth canvas placed inside a main section. How can I expand the canvas to cover the entire width and height of its container? Here is what my current code looks like: <div class="design_editor_div"> &l ...

javascripthtmlcsshtml5-canvasfabricjs

Add Content to Textbox by Clicking

In my current setup, I have a variety of buttons that, when clicked, should add the text from the button to a text box. Each time a button is clicked, I want the text to be appended to whatever is already in the input field. Current Approach $('#js- ...

javascriptjqueryjquery-ui

Activate unresponsive state when clicked

Struggling to implement a mobile responsive menu, my primary issue is the navigation buttons not toggling upon clicking. Here's what I have so far in terms of HTML and JQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery. ...

htmlcssmenunavigationhamburger-menu

Tips on restricting access based on User Browser type and version

I have a question regarding: My web application is built using PHP, AJAX, Javascript, CSS, and other technologies that may not be fully compatible with older browsers. Certain functions and styles might not work correctly on outdated browser versions. Th ...

javascriptphpjquerycssajax

The webpage appears to be operating smoothly when tested locally and on JSFiddle, however it is encountering

Just joined and brand new to this game. Completed a course at work over the last few weeks, and I must say, I'm really enjoying it. However, when I tried to create a page using Bootstrap styling and added an accordion and a carousel, both features fai ...

htmlcssbootstrap-5

Attempting to align three divs to the left, center, and right by utilizing Bootstrap CSS

I've been attempting to align three divs horizontally by floating them to the left, center, and right. Here is my code so far: HTML //to be centered div <div style="float:center"> <form> </form> <form> </ ...

htmlcsstwitter-bootstrap

CSS Troubleshooting: Image failing to load

Having an issue with bootstrap/css. I'm trying to load an image from the source folder using this CSS code: background: url('../img/home.jpg') no-repeat; Unfortunately, the image is not showing up in my home section on the page. https://c ...

htmlcssbootstrap-4

Retrieving the initial response text using jQuery's ajax function

Is there a way to retrieve the original text of an AJAX request? For example, if I specify contentType: 'application/json', can I receive a string in the success method instead of a parsed JSON result? (Unfortunately, I am unable to set the Conte ...

jqueryajax

Retrieving information from PHP using AJAX

As a newcomer to the world of AJAX, I am faced with the task of retrieving data from a PHP file and storing it in a JavaScript variable. Despite exploring several examples, I have not been able to find a satisfactory solution. Here is a simplified HTML cod ...

phpjavascripthtmlajax

What are the reasons behind professional web designers opting for absolute paths over relative paths (like for CSS, Javascript, images, etc.)?

It used to be my belief that everyone utilized relative paths, like /styles/style.css. However, I've noticed that certain renowned web designers (such as and ) prefer absolute paths (http://example.com/styles/style.css). This begs the question - why ...

javascriptcsspath

Looking for assistance with debugging form validation for a dropdown menu using JavaScript/jQuery

Here is the setup of my jsfiddle: http://jsfiddle.net/xCCA2/ My goal is to validate the size select dropdown when a form is submitted. If a valid selection is made, the form should be posted. If an invalid selection is made, I want an alert box to popup ...

javascriptjqueryvalidation

Tips for transferring PHP data to a JavaScript script within WordPress by making use of AJAX

After experimenting with both wp_localize_script and wp_add_inline_script, I am still unable to achieve the desired outcome. In my plugin's PHP file (which is enqueued with wp_enqueue_scripts elsewhere), I have the following code: wp_register ...

javascriptphpjqueryajaxwordpress

My HTML components are not showing alert messages at the top as expected

My application's alert message is supposed to stay on top of all other HTML elements as the page scrolls. However, it seems to be going behind certain components instead of staying on top like it should. This issue is puzzling because all components u ...

cssangularalert

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

javascriptphphtmlcss

I am interested in incorporating array elements into a class selector

I need help adding array elements into a class selector. The image attached shows the current result, but I want the divs to be separated like this $(document).ready(function () { var arr = ['top', 'right', "Bottom", &q ...

htmljquery