data in text box using ajax

[s_avinash_s]

Hi All

Am working on Web server .Am able to send GET request to server and receive the data from server with some delay using setInterval API.

Is it possible to store  the data receiving from server in some text box?

 

Thanks and Regards

Avinash

[dsonesuk]

Use a id identifier for text input then set the data as its value.

[s_avinash_s]

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

[dsonesuk]

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 September 5, 2018 by dsonesuk

[s_avinash_s]

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 September 5, 2018 by s_avinash_s
modified some part of code and tested

[dsonesuk]

You can't mix html and JavaScript code, the input is placed outside JavaScript like the paragraph with the same id, but! instead of using '.innerHTML=' you use '.value =' within the JavaScript code.

[s_avinash_s]

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>

[dsonesuk]

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 September 5, 2018 by dsonesuk
OP had removed duplicate id usage, and then later added back in ugggh in, out, in, out, shake it all about

[s_avinash_s]

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 September 5, 2018 by s_avinash_s

[dsonesuk]

You are now mixing raw JavaScript from the AJAX JavaScript code with html, the value is set by that! AJAX function code, why is it in the the html input?

Edited September 5, 2018 by dsonesuk

[s_avinash_s]

But we will be receiving a value from server in   document.getElementById("demo2").value= this.responseText;

So how to get that value in my html text box.

[dsonesuk]

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

 

[s_avinash_s]

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>

 

 

[dsonesuk]

BECAUSE YOU ARE INSERTING RAW HTML IN JAVASCRIPT CODE, WHICH WE HAD ALREADY DISCUSSED IN GREAT DEPTH, THAT YOU SHOULD NOT DO, BUT! YOU HAVE DECIDED THAT IT WOULD BE BE APPARENTLY BE OK! NOW!

[s_avinash_s]

Hi

What is being wrong so that am getting "undefined "

Please help

[dsonesuk]

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.

[s_avinash_s]

with

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

I can able to  get the data in text box .but gets junk characters at the end

[dsonesuk]

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"

[s_avinash_s]

Thank you , It was much helpful.

 

Edited September 5, 2018 by s_avinash_s

[s_avinash_s]

Hi 

Can you please check my other post .

http://w3schools.invisionzone.com/topic/58213-submit-with-xhttp/

 

[s_avinash_s]

how to add code in button brackets.

Please help to add code in button brackets

sorry for inconvenience

Edited September 6, 2018 by s_avinash_s