CODEWITHSUNDEEP
htmlajaxjquery
citizen_of_noobville
citizen_of_noobville

Reputation: 327

Updating Div By Number Input

I have a number input and I want this field to update a div each time I update the number input.

By number input, I mean this: 

<input type="number" name="year" id="year" min="2013" value="2013">

I added this code piece, but it does not work. How can I achieve this?

Thank you very much. 

<script type="text/javascript">
 $(document).ready(function(){
  $('input[name="year"]').change(function(){
   var id = this.value;
   $.getJSON('/test/' + id, function(response){
    $('myDiv').innerHTML = "dsadasdas";
    });
   });
  });
 });
</script>

And I want the data shown inside my myDiv to be set from my test page. Which is a PHP script that executes stuff by query string. Like /test/21 returns name of 21st person...

Thank you very much.

Upvotes: 0

Views: 60

Answers (4)

Deepak Kamat
Deepak Kamat

Reputation: 1980

There's a lot of errors in your code. Let's start from the top :

1. Wrong way to get the value of from the current object i.e this

var id = this.value;

The correct way to retrieve the value in jQuery is 

var id = $(this).val();

2. You have an extra }); in your code, remove the last one.

3. You are not using the selector properly :

$('myDiv').innerHTML = "dsadasdas";

Use either $('.myDiv') or $('#myDiv') depending on if it is a class name or an ID

4. jQuery has its own DOM manipulation methods like .html() and .text(), use anyone of them instead of the innerHTML method. 

$('myDiv').html("Whatever you want..");

These can be the main reason why you code doesn't work. We can't write the complete code for you, so try it yourself and tell us what were the results and if possible setup a JSFiddle to demonstrate your issue.

Upvotes: 0

SiwachGaurav
SiwachGaurav

Reputation: 1966

try this one

HTML

<input type="number" name="year" id="year" min="2013" value="2013"> <div id="result"> <div>

JS

 $('input[name="year"]').change(function(){
   var id = $(this).val();
      GetUpdate(id);               
   });

//change it according to your need, its for call web service written in .net

function GetUpdate(id) {
$.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "services/WebService1.asmx/getUpdate", data: '{"id":"' + id+ '"}', dataType: "json", success: function (data) { $("#result").html(id);//write here your code for update the result
}, error: function (result) { alert("error"); } }); }

Upvotes: 0

Eisa Adil
Eisa Adil

Reputation: 1733

myDiv is supposed to be an ID or a Class. Use html() to alter the innerHTML value.

$('myDiv').innerHTML = "dsadasdas";

EDIT

It should be

$('#myDiv').html('dsadasdas');

Upvotes: 1

kasper Taeymans
kasper Taeymans

Reputation: 7026

this will help you out...

http://jsfiddle.net/4jGvf/5/

  $('input[name="year"]').change(function(){
     var id = $(this).val();
     var url='/test/' + id;
     alert(url);//this can be your ajax call
     $('#mydiv').html(url)
   });

Upvotes: 0

Related Questions