Javascript input field value

Question

Need to get the value of input field inside script tag.

I need to get a value of input field that append to the html table using script tag. My code is following

function myFunction(i) {
  $.ajax({
    url: "<?php echo base_url(); ?>admin/itemD",
    type: "POST",
    dataType: "json",
    data: {
      "itID": i
    },
    success: function(data) {
      //console.log(data);
      if (data[0].availability == 0) {
        alert('Item Not Available');
      } else {
        var tr = "<tr>";
        var td0 = "<td>" + (i + 1) + "</td>";
        var td1 = "<td>" + data[0].item_name + "</td>";
        var td2 = "<td>" + data[0].price + "</td>";
        var td3 = "<td><input placeholder='Advance'  class='form-control col-3' /></td>"
        $("#myTable").append(tr + td0 + td1 + td2 + td3);
      }

    },
    error: function(err) {
      console.log(err);
    }
  });
}

This is my code I used this code to show some data set which get from clicking event. But now I need to add input field to my javascript code. So I add input field to my code.

var td3 = "<td><input placeholder='Advance' id='vale' class='form-control col-3' /></td>"

But how do I get this input field value? I tried to get the value of this input field by adding

document.getElementById('vale');

But It does not work. I go though the every problem earlier posted in stackoverflow. But no problem matching with my problem.

have you tried using var val = document.getElementById('vale').val(); — Saad Mehmood
– Saad Mehmood, Commented Nov 4, 2018 at 8:37

Dacre Denny · Accepted Answer · 2018-11-04 08:36:57Z

1

One way to achieve this might be to update your success handler, by binding an event handler via say, keyup(), that queries the current value of the input field when a key is pressed while the field is focused:

success: function(data) {
      //console.log(data);
      if (data[0].availability == 0) {
        alert('Item Not Available');
      } else {
        var tr = "<tr>";
        var td0 = "<td>" + (i + 1) + "</td>";
        var td1 = "<td>" + data[0].item_name + "</td>";
        var td2 = "<td>" + data[0].price + "</td>";
        var td3 = "<td><input placeholder='Advance'  class='form-control col-3' /></td>"
        $("#myTable").append(tr + td0 + td1 + td2 + td3);
      }

      // Select the input field for the table, and add a keyup event listener 
      // to it
      $('input', '#myTable').keyup(function() {

          // Access the current value of the field like so
          var currentFieldValue = $('input', '#myTable').val();
          alert( 'Value of input is: ' + currentFieldValue );
      })
    }

answered Nov 4, 2018 at 8:36

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

4 Comments

dhananjana Over a year ago

Is there any way to access this value outside of the function?

Dacre Denny Over a year ago

@D95 yes - if you would like I can answer this is a new question for you :-)

dhananjana Over a year ago

I can ask but that question will be a duplicate of this question? ;-(

Dacre Denny Over a year ago

Hmm hard to know - once your success handler has been called, you can access the input value by doing this anywhere from in your javascript: var currentFieldValue = $('input', '#myTable').val();

pragnadeep pitroda · Accepted Answer · 2018-11-04 08:50:44Z

0

You need to add id='vale' attributes which is not available in your input tag

After that you can get value by like this:

document.getElementById('vale').value

answered Nov 4, 2018 at 8:50

pragnadeep pitroda

111 bronze badge

1 Comment

dhananjana Over a year ago

sorry It's not work I actually first add id to input field.

Collectives™ on Stack Overflow

Javascript input field value

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related