I'm a Jquery noob, very much in the learning stage.
This is my fiddle: /

(Double click any of the three dots to get a textbox in the above fiddle, then enter a value in that box and press enter) As you can see it works but how do I get the id and value when the user puts a new value into the textbox?

Basically, I need to get the value in to something like this:

var theId  = $(this)id;
var newValue = $(this)value;

// console.log(theId+" "+newValue+ " "+savedData);

so I can make an AJAX call to update the DB with the new value/s.
If you could put a ment in the code as well, for example:

// ajax call here

that would be appreciated as well!

I'm a Jquery noob, very much in the learning stage.
This is my fiddle: http://jsfiddle/4tjof34d/

(Double click any of the three dots to get a textbox in the above fiddle, then enter a value in that box and press enter) As you can see it works but how do I get the id and value when the user puts a new value into the textbox?

Basically, I need to get the value in to something like this:

var theId  = $(this)id;
var newValue = $(this)value;

// console.log(theId+" "+newValue+ " "+savedData);

so I can make an AJAX call to update the DB with the new value/s.
If you could put a ment in the code as well, for example:

// ajax call here

that would be appreciated as well!

• javascript
• jquery
• html
• ajax

4 Answers 4

I notice you're using jQuery, but it's actually easier to get the values without it:

var showText = function() {
  console.log(this.id);
  console.log(this.value);
}

However, to get the values with jQuery, simply use attr() and val():

var showText = function() {
  // Cache $(this) since we're
  // using it more than once.
  var $this = $(this)

  console.log($this.attr('id'))
  console.log($this.val())
}

You can use plain JavaScript as follows:

var theId = this.id; //or $(this).attr('id');

and

var newValue = this.value; //or $(this).val();

THE HOW & WHERE

var showText = function () {
    $(this).hide();//show text
    $(this.nextElementSibling).show();//hide input
    $.ajax({
        url: '....',
        data: {id: this.id, value: this.value},
        ....
    });
};

With Jquery for any input element you can use .val() function . So your syntax will be like

$("selector").val();

Now the syntax for this selector will keep on varying. For ex - if you want to get value for any specific id for an input element you use "#". So if you have an input field with an id of "testId" you will be doing

<input type="text" id="testId" class ="testClass"/>
$("#testId").val();

In place of id if you want the same value but with the help of class attribute you will be doing

$(".testClass").val();

Now if you have some other fields other than input fields you should ideally be using .text() for them.

So if you have a div with an id of testDiv you just need to do

<div id ="testDiv" class="testDivClass">Test</div>
$("#testDiv").text();
$(".testDivClass").text();

Just an advice, since you are learning jQuery right now refrain yourself from using hybrid things (mixing core javascript) just for the sake of finishing all the work. This way you may have to spend some time in learning things but ultimately you will be learning things in much better way

Hope this be of some help.

Happy Learning

use .attr() and .val() to get attribute and value:

 $(this).attr('id');

and

 $(this).val();