Jump to content
s_avinash_s

data in text box using ajax

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
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

 

Share this post


Link to post
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>

 

 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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"

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...