Javascript:How to obtain a url for a text entered and submitted in ajax

Question

I have a text box with submit button . I shall retrieve a number from the text box. I have to take this number and respond with a url in the format of url/number this way - like this it opens the website.But the code is not working.Please help.

<html>

<head>
   <title>Numbers Ajax</title>
</head>

<body>
<script>



    function loadDoc() {
        var number=document.getElementById("text").value;
        console.log(number);
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 || this.status == 200) {
                document.getElementById("ajax1").innerHTML = this.responseText;
                console.log(this.responseText)
            }
        };
        xhttp.open("GET", "http://numbersapi.com/number", true);

       xhttp.send();  
    }
</script>
<div id="ajax1"></div>
    <h1>AJAX </h1>
    No.:
    <input type="text" id="text" name="text" >
    <button type="button" id="buttonnumber"  onclick="loadDoc()">Submit</button>

 </body>

  </html>

Did you try to concatenate the number variable to the url? `xhttp.open("GET", "http://numbersapi.com/" + number, true);` — standby954, Mar 13 '18 at 10:12
Concatenate it or use template literal syntax `xhttp.open("GET", \`http://numbersapi.com/${number}\`, true);` — Aleksa Arsić, Mar 13 '18 at 10:18
i did that , thanks. But the next issue is i want the second text number output to appear in the nxt line , so i did this - document.getElementById("ajax1").innerHTML += this.responseText+"
"; . Now i am getting the o/p of a number twice. How get it only once — java_jazz, Mar 13 '18 at 10:26
yes . thanks gary . But after this, i have to append the data of the input numbers . So i changed the code - document.getElementById("ajax1").innerHTML += this.responseText+"
"; . But the output is appearing twice with this -->12 is the number of constellations in the ecliptic (or signs of the zodiac). 12 is the number of constellations in the ecliptic (or signs of the zodiac). How to avoid this — java_jazz, Mar 13 '18 at 11:11

score 0 · Answer 1 · edited Mar 13 '18 at 10:53

0

simply change a single statement

xhttp.open("GET", "http://numbersapi.com/"+number, true);

final loadDoc function will

function loadDoc() {
        var number=document.getElementById("text").value;
        console.log(number);
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 || this.status == 200) {
                document.getElementById("ajax1").innerHTML = this.responseText;
                console.log(this.responseText)
            }
        };
        xhttp.open("GET", "http://numbersapi.com/" + number, true);

       xhttp.send();  
    }

edited Mar 13 '18 at 10:53

Aleksa Arsić

524
1
8
16

answered Mar 13 '18 at 10:21

GoIntens System

1

i did that , thanks. But the next issue is i want the second text number output to appear in the nxt line , so i did this - document.getElementById("ajax1").innerHTML += this.responseText+"
"; . Now i am getting the o/p of the number twice. How get it only once – java_jazz Mar 13 '18 at 10:34
Output: 12 is the number of constellations in the ecliptic (or signs of the zodiac). 12 is the number of constellations in the ecliptic (or signs of the zodiac). 13 is the number of Oscar nominations of actress Meryl Streep, who holds the record for the most Oscar nominated actress. 13 is the number of Oscar nominations of actress Meryl Streep, who holds the record for the most Oscar nominated actress. – java_jazz Mar 13 '18 at 10:42

score 0 · Answer 2 · answered Mar 13 '18 at 10:26

0

issue is in the line:

xhttp.open("GET", "http://numbersapi.com/number", true);

number is variable so you have to append that to url so jsut change it to

xhttp.open("GET", "http://numbersapi.com/"+number, true);

answered Mar 13 '18 at 10:26

SF..MJ

862
8
19

i did that , thanks. But the next issue is i want the second text number output to appear in the nxt line , so i did this - document.getElementById("ajax1").innerHTML += this.responseText+"
"; . Now i am getting the o/p of a number twice. How get it only once – java_jazz Mar 13 '18 at 10:34
where ? in ajax1 div..? or in consloe? – SF..MJ Mar 13 '18 at 10:40
Output: 12 is the number of constellations in the ecliptic (or signs of the zodiac). 12 is the number of constellations in the ecliptic (or signs of the zodiac). 13 is the number of Oscar nominations of actress Meryl Streep, who holds the record for the most Oscar nominated actress. 13 is the number of Oscar nominations of actress Meryl Streep, who holds the record for the most Oscar nominated actress. – java_jazz Mar 13 '18 at 10:42
in
tag
– java_jazz Mar 13 '18 at 10:44
`if (this.readyState == 4 || this.status == 200) { if(document.getElementById("ajax1").innerHTML == "") { document.getElementById("ajax1").innerHTML = this.responseText; } console.log(this.responseText) }` – SF..MJ Mar 13 '18 at 10:49
just check for empty before `innertHTML` – SF..MJ Mar 13 '18 at 10:50
Now nothing appears – java_jazz Mar 13 '18 at 10:51
can you check `console.log(this.readyState)` below the `innerHTML`.. bcos i thing it is going twice in that condition. – SF..MJ Mar 13 '18 at 10:55
No its not The readystate is going twice. These are the output -2 3 4 – java_jazz Mar 13 '18 at 11:02
what to do. how to avoid the repetition of values.12 is the number of months in a year. 12 is the number of months in a year. – java_jazz Mar 13 '18 at 11:03
see [this](https://stackoverflow.com/questions/632774/what-do-the-different-readystates-in-xmlhttprequest-mean-and-how-can-i-use-them) – SF..MJ Mar 13 '18 at 11:43
@MJ.. its even working when i do this -( this.status == 200 & this.readyState==4) – java_jazz Mar 13 '18 at 11:50

Javascript:How to obtain a url for a text entered and submitted in ajax

2 Answers2