Jump to content

data in text box using ajax


s_avinash_s
 Share

Recommended Posts

Hi

<p id="demo2"></p>
 
<script>
function abc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo2").innerHTML = this.responseText;
    }
  };
xhttp.open("GET", "hex.txt", true);
xhttp.send();
<input type="text" id="demo2" size="20" value="this.responseText">
}
setInterval("abc()", 1000);
</script>

 

I tried like above but not able to get.Is it wrong

Please help

Thanks 

Avinash

Link to comment
Share on other sites

Well no it wouldn't if you have the html input inside JavaScript code, also you can't have two element using the same id, it must be used singularly within a page.

form input elements uses .value, while other elements use .innerHTML

document.getElementById("demo2").value = this.responseText;

Edited by dsonesuk
Link to comment
Share on other sites

Am new to ajax and html.I am not able to understand.

Can you just share any example similar to above.

 

<p id="demo2"></p>
 
<script>
function abc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo2").value= this.responseText;
    }
  };
xhttp.open("GET", "hex.txt", true);
xhttp.send();
<input type="text" id="demo" size="20" value="this.responseText">
}
setInterval("abc()", 1000);
</script>

Am not getting text box .and value also not printing

Thanks 

Avinash

 

Edited by s_avinash_s
modified some part of code and tested
Link to comment
Share on other sites

Hi

Am not understanding.i tried like below.

Can you just modify below code .

Please as am not getting with so much of suggestions also

 

<p input type="text" id="demo2"></p>
 
<script>
function abc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo2").value= this.responseText;

<input type="text" id="demo" size="20" .value="this.responseText">
    }
  };
xhttp.open("GET", "hex.txt", true);
xhttp.send();
<input type="text" id="demo" size="20" value="this.responseText">
}
setInterval("abc()", 1000);
</script>

Link to comment
Share on other sites

NO! this is html

<input type="text" id="demo" size="20" value="">

You cannot have raw html within JavaScript i.e between <script>....</script> , Its that simple, remove it then place it under the paragraph with id "demo2", now it is outside like the html paragraph, the JavaScript and back with html where it belongs.

Edited by dsonesuk
OP had removed duplicate id usage, and then later added back in ugggh in, out, in, out, shake it all about
Link to comment
Share on other sites

Hi

I modified like below and can see some improvement.

Am getting a textbox with value as "this.responseText;".

How can i get receiving value from server

 

<p input type="text" id="demo2"></p>
 
<script>
function abc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo2").value= this.responseText;


    }
  };
xhttp.open("GET", "hex.txt", true);
xhttp.send();

}
setInterval("abc()", 1000);
</script>

<input type="text" id="demo2" size="20" value="this.responseText">

Edited by s_avinash_s
Link to comment
Share on other sites

OMG!

if just paragraph follow (1..) instructions, if just text input follow (2..) instructions, else follow both

(1) If required create html paragraph with unique id

(2) If required create form text input with unique id

(1a) If required include referral to unique id of paragraph using document.getElementById() and use '.innerHTML='  to insert responseText

(2a)  If required include referral to unique id of text input using document.getElementById() and use '.value='  to insert responseText

 

Link to comment
Share on other sites

Hi

Value is printing in my text box but showing undefined.

<p  id="demo2"></p>
 
<script>
function abc() {
var valID = document.getElementById("demo2").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {   
      document.getElementById("demo2").value=this.responseText;
    }
  };
xhttp.open("GET", "hex.txt", true);
xhttp.send();
}
setInterval("abc()", 1000);
</script>

<input type="text" id="myText" >

<script>
function myFunction() {
    document.getElementById("myText").value = this.responseText;
}
</script>

 

 

Link to comment
Share on other sites

LOOK! where is this.responseText coming from? YES! the returned response from ajax, this exist within the scope of that function, you then can apply it to anywhere! to multiple places by referring to the element/s unique id reference using multiple document.getElementById(...) within the scope of the AJAX function.

Link to comment
Share on other sites

Well use .replace() to remove "junk characters", i don't know where "junk characters" came from, presumably from where the request was sent i.e "hex.text", but i would have expected something on the line of "#000000' or '#ffffff' which are hex colour code for black and white, never "junk characters"

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...