CODEWITHSUNDEEP
javascriptjquery
Domeniko
Domeniko

Reputation: 109

Passing JS var into the Selector not working

Im having a trouble with following Javascript function.

there are many divs with ID conversation and specific numbers, like this div id="conversation-123" for example.

I need to target the specific form elements inside of every div with conversation ID.

I tried a lot of different code, this is where Im stuck now. 

var unid = 'conversation-<?php the_ID(); ?>';
jQuery(document).ready(function ($){
  validate();
  $('#conversation-<?php the_ID(); ?> #realname').change(validate);
});

function validate(){
  var unid = 'conversation-<?php the_ID(); ?>';
  console.log(unid);
  if (jQuery("#" + unid + " #realname").val().length    >   0) {
    jQuery("#" + unid + " button#submit").prop("disabled", true);
  }
  else {
    jQuery("#" + unid + " button#submit").prop("disabled", false);
  }
}

This is what I see in when I view page source: 

var unid = 'conversation-250';
jQuery(document).ready(function ($){
  validate();
  var unid = 'conversation-250'
  $("#" + unid + "#realname").change(validate);
});

function validate(){
  var unid = 'conversation-250';
  console.log(unid);
  if (jQuery("#" + unid + "#realname").val().length    >   0) {
    jQuery("#" + unid + "button#submit").prop("disabled", true);
  }
  else {
    jQuery("#" + unid + "button#submit").prop("disabled", false);
  }
}

as you can see, var unid = 'conversation-250'; was converted properly to the number specific to div, but inside the selector function, instead of conversation-250 I have "unid", so it didnt convert to value. It just printed the variable name.

Console in firebug shows this:

conversation-213 (this is comming from console.log)
TypeError: jQuery(...).val(...) is undefined

Im stuck on this issue for half a day already... Browsed through a lot of tutorials and solutions but none worked for me. Please help :)

Thank you

EDIT:

You guys indicated that repeating IDs might be the problem, even if I target these repeating IDs through their parent unique ID divs..

I updated the code and now each of these IDs have same dynamically generated number.

for example, before it was #realname, now it is #realname-270 

        jQuery(document).ready(function ($){
      validate();
      $('#conversation-<?php the_ID(); ?> input#realname-<?php the_ID(); ?>').change(validate);
    });

    function validate(){
      if (jQuery('#conversation-<?php the_ID(); ?> input#realname-<?php the_ID(); ?>').val().length > 0) {
          //-----------
        jQuery('#conversation-<?php the_ID(); ?> button#submit-<?php the_ID(); ?>').prop("disabled", true);
      }
      else {
        jQuery('#conversation-<?php the_ID(); ?> button#submit-<?php the_ID(); ?>').prop("disabled", false);
      }
    }

when I view source now, I do see correct IDs generated, however, the code doesnt work, and in console I still see following error message:

TypeError: jQuery(...).val(...) is undefined

Upvotes: 2

Views: 64

Answers (2)

user1542316
user1542316

Reputation: 158

How about keep root simple? easier to read. and don't forget to change #realname to .realname (id to class), same as button#submit

jQuery(document).ready(function($){
  var root = $('#conversation-<?php the_ID(); ?>');
  validate(root);
  root.find('.realname').change(function() {
    validate(root);
  });
});

function validate(root) {
  var found = root.find('.realname').val().length > 0;
  root.find('button.submit').prop('disabled', found);
}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Give some space:

if (jQuery("#" + unid + " #realname").val().length > 0) {
//----------------------^

Code:

function validate() {
    var unid = 'conversation-250';
    console.log(unid);
    if (jQuery("#" + unid + " #realname").val().length > 0) {
        jQuery("#" + unid + " button#submit").prop("disabled", true);
    }
    else {
        jQuery("#" + unid + " button#submit").prop("disabled", false);
    }
}

And I feel like you are duplicating these ids, which is wrong too:

  • #realname
  • button#submit

Upvotes: 2

Related Questions