CODEWITHSUNDEEP
javascriptjquerycoldfusion
Tayyab Hussain
Tayyab Hussain

Reputation: 33

Using jQuery To Disable Element

I have code written in ColdFusion that produces a List of inputs coming from an SQL Query, The code is as below:

<cfquery datasource="#request.dsn#" name="getProdInfo">
        Select * from dbo.Lines,dbo.[Shift],dbo.operations 
        where lineID=#form.SELLINE# and ShiftID=#form.SELSHIFT#
</cfquery>
<cfoutput query="getProdInfo">
 <div class="control-group">
    <label for="Ops">#OperationName# </label>
     <input class="input-xlarge focused" id="prods" name="prod" placeholder="Enter Production" 
        type="number"  validate="integer"  />

  <select name="Test" id="test">
     <option>Option1</option>
     <option >Option2</option>  
 </select>
 </div>
<!--- Hidden Field--->
<input class="input-small focused" id="trgt" name="Target" value="580">
</cfoutput>

This code produces 6 input fields, 6 selects and 6 hidden target fields (for non CFers cfoutput loops over the result set). I want to perform a jQuery that if the input field is less that 70% of the target it should enable the Select Dropdown else keep it disabled. My jQuery is as follows

<script type="application/javascript">
    $('#prods').on('focusout', function(){
        var element1 = document.getElementById("prods").value;
        var element2 = document.getElementById("trgt").value;
        var calc = (element1/element2)*100
        if (calc<70){
            $("#test").attr('disabled','disabled')
        }
        
        });
</script>

The behavior is that when the first field is tested by the jQuery it disables the first select but does not apply to the other 5 selects. I think my jQuery is missing the ID of the element that is selected for input.

I hope I've cleared my point. Help appreciated

Upvotes: 0

Views: 647

Answers (3)

mykaf
mykaf

Reputation: 1391

I'm most familiar with vanilla JS, so I'm going to use that.

I think this is what you might be trying to do. Since you're looping over your query, you need to add your event listener to each prod element, I don't know that an id is necessary in this case, but I always include the name and ID as standard attributes. ID must be unique, so I added a unique ID from your query. You could also use the id column from your query. You'll especially need the name if you want to submit it with a form. It may or may not be unique, depending on how you process the inputs. The prod class is used to select all similar elements and add the event listener.

Since I'm looking through each prod element here to add the event listener, we can capture that event e and use the event's target, e.target to retrieve the value.

I also updated the for attribute in your label. There is no element with an id of Ops and the id needs to be unique anyway. The label wouldn't have done anything previously.

document.querySelectorAll(".prod").forEach(
  function(p) {
    p.addEventListener(
      "focusout",
      function(e){
        var element1 = e.target.value;
        var element2 = document.getElementById("trgt").value;
        var calc = (element1/element2)*100
        if (calc<70){
            document.getElementById("test").disabled = "disabled";
        }//if
      }//function(e)
    )//addEventListener
  }//function(p)
);
<cfoutput query="getProdInfo">
  <div class="control-group">
      <label for="prods#getProdInfo.currentRow#">#OperationName# </label>
      <input class="input-xlarge focused prod" id="prods#getProdInfo.currentRow#" name="prod#getProdInfo.currentRow#" placeholder="Enter Production" type="number"  validate="integer"  />

    <select name="Test" id="test">
       <option>Option1</option>
       <option >Option2</option>  
    </select>
  </div>
 </cfoutput>

Upvotes: 2

Dan
Dan

Reputation: 333

You can use .prop to set disabled to true or false. Added a link to the documentation.

$("#test").prop("disabled", true) -- disable
$("#test").prop("disabled", false) -- enable

https://learn.jquery.com/using-jquery-core/faq/how-do-i-disable-enable-a-form-element/

Upvotes: 2

mstephen19
mstephen19

Reputation: 1926

Better just do it in vanilla JS and stop using jQuery lol it's 2021

element.disabled = true;
element.disabled = false;

Upvotes: -3

Related Questions