CODEWITHSUNDEEP
jquery
pancy1
pancy1

Reputation: 511

jQuery get input value inside double quotes

I am having the following code sample and I want to get the value of cell1 every time.

$(document).ready(function() {
  var counter = 1;
  var str1 = 'Items';
  var tmx;
  var tmx2;
  var temaxia;
  $("#dosomething").click(function() {
    var table = document.getElementById("myTable");
    var row = table.insertRow();

    var cell0 = row.insertCell(0);
    var cell1 = row.insertCell(1);
    var cell2 = row.insertCell(2);
    var cell3 = row.insertCell(3);
    var cell4 = row.insertCell(4);
    var cell5 = row.insertCell(5);
    cell0.innerHTML = counter;

    tmx = str1.concat(counter);
    tmx2 = "#".concat(str1).concat(counter);
    cell1.innerHTML = "<input name='" + tmx + "' id='" + tmx + "'>";

    temaxia = $("#Items".concat(counter)).val();
    alert(temaxia);
    counter = counter + 1;
  });

});
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h3>Παραγγελία Αναλωσίμων</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <table style="width:100%" class="table table-striped table-bordered" id="myTable">
          <thead>
            <tr>
              <th>Α/Α</th>
              <th>ΤΜΧ</th>
              <th>ΤΙΜΗ ΜΟΝ</th>
              <th>ΜΕΡ ΣΥΝΟΛΟ</th>
              <th>ΦΠΑ</th>
              <th>ΤΙΜΗ ΜΕ ΦΠΑ</th>
              <!--th><a id="plus" href="#"><img src="img/plus.png" alt="plus" height="32" width="32"></a></th-->
              <th><button id="dosomething">OK</button></th>
            </tr>
          </thead>
          <tbody>
            <tr></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

How can I get the value of the cell1? I have tried several methods but none worked, for example: temaxia = $("#Items".concat(counter)).val(); temaxia = $(tmx2).val();

Upvotes: 0

Views: 731

Answers (2)

Paulo Pereira
Paulo Pereira

Reputation: 1115

Even if your code works, you will always get an empty value because you just created the input.

I think that what you want is to get the value of the input when someone puts a value in it.

So I changed your code and created a JSFiddle example that may solve your problem. Getting the idea, you can change and improve to meet your needs.

$(document).ready(function() {
    var counter = 1;
    var str1 = 'Items';
    var tmx;
    var tmx2;
    var temaxia;
    
    var table = document.getElementById("myTable");

    $("#dosomething").click(function() { 
        var row = table.insertRow();

        var cell0 = row.insertCell(0);
        var cell1 = row.insertCell(1);
        var cell2 = row.insertCell(2);
        var cell3 = row.insertCell(3);
        var cell4 = row.insertCell(4);
        var cell5 = row.insertCell(5);
        var cell6 = row.insertCell(6);
        
        cell0.innerHTML = counter;

        tmx = str1.concat(counter);
        
        cell1.innerHTML = "<input name='"+tmx+"' id='"+tmx+"'>";
        cell6.innerHTML = "<button onclick=\"alert($('#" + tmx + "').val());\">OK</button>";

        counter++;
    });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <h3>Παραγγελία Αναλωσίμων</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <table style="width:100%" class="table table-striped table-bordered" id="myTable">
                <thead>
                    <tr>
                    <th>Α/Α</th>
                    <th>ΤΜΧ</th>
                    <th>ΤΙΜΗ ΜΟΝ</th>
                    <th>ΜΕΡ ΣΥΝΟΛΟ</th>
                    <th>ΦΠΑ</th>
                    <th>ΤΙΜΗ ΜΕ ΦΠΑ</th>
                    <!--th><a id="plus" href="#"><img src="img/plus.png" alt="plus" height="32" width="32"></a></th-->
                    <th><button id="dosomething">OK</button></th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Check it here: https://jsfiddle.net/pg4rjnzg/1/.

Upvotes: 1

Rikin
Rikin

Reputation: 5473

Is this what you need?

$(document).ready(function() {
  var counter = 1;
  var str1 = 'Items';
  var tmx;
  var tmx2;
  var temaxia;
  $("#dosomething").click(function() {
    var table = document.getElementById("myTable");
    var row = table.insertRow();

    var cell0 = row.insertCell(0);
    var cell1 = row.insertCell(1);
    var cell2 = row.insertCell(2);
    var cell3 = row.insertCell(3);
    var cell4 = row.insertCell(4);
    var cell5 = row.insertCell(5);
    cell0.innerHTML = counter;

    tmx = str1.concat(counter);
    tmx2 = "#".concat(str1).concat(counter);
    cell1.innerHTML = "<input name='" + tmx + "' id='" + tmx + "'>";

    temaxia = $(tmx2).val();
    counter = counter + 1;
  });

});
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h3>Παραγγελία Αναλωσίμων</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <table style="width:100%" class="table table-striped table-bordered" id="myTable">
          <thead>
            <tr>
              <th>Α/Α</th>
              <th>ΤΜΧ</th>
              <th>ΤΙΜΗ ΜΟΝ</th>
              <th>ΜΕΡ ΣΥΝΟΛΟ</th>
              <th>ΦΠΑ</th>
              <th>ΤΙΜΗ ΜΕ ΦΠΑ</th>
              <!--th><a id="plus" href="#"><img src="img/plus.png" alt="plus" height="32" width="32"></a></th-->
              <th><button id="dosomething">OK</button></th>
            </tr>
          </thead>
          <tbody>
            <tr></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions