How to make jquery selectors ID unique in your HTML tag attributes?

Question

5.00/5 (1 vote)

See more:

Hi Team

I struggling to find a way in Jquery selectors ID unique, basically want to access one specific ID of my Button to work across all checkbox of mine. Is there a way to this in Jquery? I dont want my checkbox to download before one user select it, that what the code does at the moment. format of the file is correct its just the way of making this ID unique across all my checkbox for the button to see them, it seem its impossible to achieve it.

What I have tried:

JavaScript

div class = "custom-control custom-checkbox">
  <input type="checkbox" class ="custom-control-input" id="temperature">
    <label class = "custom-control-label" for="temperature">Temperature</label>
    </div>
    
 <div class = "custom-control custom-checkbox">
 <input type = "checkbox" class="custom-control-input" id="illuminance">
   <label class = "custom-control-label" for = "illuminance">Illuminance</label>
  </div>   
 <div class ="custom-control custom-checkbox">
 <input type ="checkbox" class="custom-control-input" id="button-state">
   <label class ="custom-control-label" for = "button-state">Button-State</label>
    

<pre lang="HTML"><!---Downloading File using 
Jquery with Buttons---->
  <div class="form-group"><br>
  <div class="col-md-1.9 text-center">
   <button id="download" name="download" class="btn btn-warning" >Download</button><br>
    </div> 
  </div> 

 // checking for one field entry to read.
   $(document).ready(function() {
   $('#temperature').click(function() {
            var xcount = 0;
            if($('.temperature').prop('checked')) xcount--;
            if(xcount < 1) {
            window.location.href ='https://api.thingspeak.com/channels/899906/fields/1.csv';
            }
          });
  });
  
  // checking for two field entry to read.
  $(document).ready(function() {
    $('#download').click(function() {
      var ncount = 0;
      if($('.illuminance').prop('checked')) ncount--;
      if(ncount < 1) {
        window.location.href ='https://api.thingspeak.com/channels/899906/fields/2.csv';
      }
    });
  
  });
  
  // checking for third entry to read.
   $(document).ready(function() {
    $('#download').click(function() {
    var qcount = 0;
    if($('.button-state').prop('checked')) qcount--;
      if(qcount < 1) {
       window.location.href ='https://api.thingspeak.com/channels/899906/fields/8.csv';
      }
    });
  
  });

Posted 18-Nov-19 23:52pm

gcogco10

Updated 19-Nov-19 6:58am

v2

Add a Solution

Comments

Herman<T>.Instance 19-Nov-19 6:36am

I don't see 'temperature' in your HTML

gcogco10 19-Nov-19 7:05am

Temperature

Afzaal Ahmad Zeeshan 19-Nov-19 9:42am

He means to say, that your HTML does not contain an element with id temperature. Are you sure this is the complete code?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Herman<T>.Instance · Answer 1 · 2019-11-19T00:39:00

Solution 1

JavaScript

$('#temperature')

change it to

JavaScript

$("[id*=temperature]")

Posted 19-Nov-19 0:39am

Herman<T>.Instance

Updated 19-Nov-19 0:46am

v2

Comments

gcogco10 19-Nov-19 7:18am

Im still not getting it right, but if i am using that operator. which means i a pointing to all ID element throughout my document?

Herman<T>.Instance 20-Nov-19 4:23am

See: Google searchresult here

Richard Deeming · Answer 2 · 2019-11-19T06:59:00

You're getting confused between IDs and classes.

$("#foo") selects an element with id="foo";
$(".foo") selects an element with class="foo";

So your selector $('.temperature') will not match any elements, because there are no elements with that CSS class. You should be using $('#temperature') instead, as you have on the previous line.

But even then, it's not clear what you're trying to achieve. You start with a variable set to 0; if the checkbox is checked, you decrement that variable, making it -1; then, if the variable is less than 1, you perform some action. But the variable will always be less than 1!

And setting window.location.href will almost certainly stop any other scripts on the current page from running, so only one file will ever be downloaded.

Perhaps you want something like this?

JavaScript

$(function(){
    $("#download").click(function(e){
        e.preventDefault();
        
        if ($('#temperature').is(':checked')){
            window.open('https://api.thingspeak.com/channels/899906/fields/1.csv');
        }
        if ($('#illuminance').is(':checked')){
            window.open('https://api.thingspeak.com/channels/899906/fields/2.csv');
        }
        if ($('#button-state').is(':checked')){
            window.open('https://api.thingspeak.com/channels/899906/fields/8.csv');
        }
    });
});

How to make jquery selectors ID unique in your HTML tag attributes?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us