Variables created in Jquery not appearing in Debugger

Question

I have written some code in Jquery that when a button is pressed, creates a new variable and displays it on the screen. I'd like to take whatever data is entered into this new variable and store it in a database however before I get there I have to figure out to access the variables information properly.

In HTML I have 3 text boxes created and a button to add up to 7 more for a total of 10. My code looks like this (and these store in the database just fine):

<table style="width:90%" class="Long-Term-Conditions">
<center>
 <tr>
  <td><b><center>Long term condition 1:</center></b></td>
  <td><center><input type='text' id="Var1" name ='Var1' value='%Var1%' /></center></td>
 </tr>
 <tr>
  <td><b><center>Long term condition 2:</center></b></td>
  <td><center><input type='text' id="Var2" name ='Var2' value='%Var2%' /></center></td>
 </tr>
 <tr>
  <td><b><center>Long term condition 3:</center></b></td>
  <td><center><input type='text' id="Var3" name ='Var3' value='%Var3%' /></center></td>
 </tr>
</center>
</table>
<a href="#" title="" class="add-cond" id="add-cond">Add another long-term health condition</a>
<div id="Message"></div>

My problem now is that my Jquery variables cant be inspected (says not available) and no data is passed to the database after. My Jquery looks like this:

<script>

  //Adds another row to the above table.
 var counter = 3;
 jQuery('a.add-cond').click(function(event){
    event.preventDefault();
    if (counter < 10) {
  counter++;
  var newRow = jQuery('<tr><td><b><center>'+ "Long term condition "+  counter + ":" + '</center></td> <td><center><input type="text" name="Var' +
    counter + '" id="Var' + counter + 'value="%Var' + counter + '%"/></center></b></td></tr>');
  jQuery('table.Long-Term-Conditions').append(newRow);
 }
  else
     {
  document.getElementById("add-cond").style.visibility = "hidden";
  document.getElementById("Message").innerHTML = '<font color="Red">Please 
contact us</font>';
 }
});

</script>

The code works in creating the new variable however any data entered into the newly created text box is never passed to the debugger or the database. What am I doing wrong? Any help is appreciated.

Chris · Accepted Answer · 2017-03-29 19:09:08Z

1

The problem you are having is that when you bind the click event to the elements it only binds to the elements that already exist on the document. So when you add new ones it won't trigger that click event because you didn't bind it to the new ones.

A simple solution to this is to add the click event listener to the body like so:

jQuery('body').on('click', 'a.add-cond', function(event){

I think that is what you are looking for.

Also like the other guy mentioned you are missing a closing quote and a space

id="Var' + counter + 'value="%Var' + counter + '%"

Should be:

id="Var' + counter + '" value="%Var' + counter + '%"

answered Mar 29, 2017 at 19:09

Chris

9977 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

G3TH Over a year ago

Thank you this sorted it out for me. You and Larz were correct about me missing the closing quote. I picked this answer as correct because the extra bit about the jQuery event listener.

larz · Accepted Answer · 2017-03-29 19:06:04Z

I think you were just missing a " between the id and value of your new input

//Adds another row to the above table.
var counter = 3;
jQuery('a.add-cond').click(function(event) {
  event.preventDefault();
  if (counter < 10) {
    counter++;
    var newRow = jQuery('<tr><td><b><center>' + "Long term condition " + counter + ":" + '</center></td> <td><center><input type="text" name="Var' +
      counter + '" id="Var' + counter + '" value="%Var' + counter + '%"/></center></b></td></tr>');
    jQuery('table.Long-Term-Conditions').append(newRow);
  } else {
    document.getElementById("add-cond").style.visibility = "hidden";
    document.getElementById("Message").innerHTML = '<font color="Red">Please contact us </font>';
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:90%" class="Long-Term-Conditions">
  <center>
    <tr>
      <td><b><center>Long term condition 1:</center></b></td>
      <td>
        <center><input type='text' id="Var1" name='Var1' value='%Var1%' /></center>
      </td>
    </tr>
    <tr>
      <td><b><center>Long term condition 2:</center></b></td>
      <td>
        <center><input type='text' id="Var2" name='Var2' value='%Var2%' /></center>
      </td>
    </tr>
    <tr>
      <td><b><center>Long term condition 3:</center></b></td>
      <td>
        <center><input type='text' id="Var3" name='Var3' value='%Var3%' /></center>
      </td>
    </tr>
  </center>
</table>
<a href="#" title="" class="add-cond" id="add-cond">Add another long-term health condition</a>
<div id="Message"></div>

Collectives™ on Stack Overflow

Variables created in Jquery not appearing in Debugger

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related