CODEWITHSUNDEEP
javascriptjqueryhtmldebugging
G3TH
G3TH

Reputation: 247

Variables created in Jquery not appearing in Debugger

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.

Upvotes: 2

Views: 69

Answers (2)

Chris
Chris

Reputation: 997

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 + '%"

Upvotes: 1

larz
larz

Reputation: 5766

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>

Upvotes: 1

Related Questions