-
Nov 4th, 2021, 06:15 PM
#1
Thread Starter
Member
[RESOLVED] Problem with Ajax
So I am using ajax to get data from my php file like so below and it works for DIV element using the but if I change it to Input tag element, it gets the whole innerHTML data.
FOR DIV TAG
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "curlphp.php", async: false, success: function(result){
$('#DIV1').html(result);
}});
});
});
</script>
This gets the result just fine for example result is 100.
FOR INPUT TAG
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "curlphp.php", async: false, success: function(result){
$('#input1').val(result);
}});
});
});
</script>
This gets the whole innerHTML data. I just need the output 100 just like in DIV tag.
UPDATE: I found the issue. the data in curlphp.php is in div tag so I need pass the value first to DIV1 tag and get the value from DIV1 and pass to INPUT1. That would be my solution. But maybe there is other correct approach of doing it. I would like to know the other way. Thanks.
Last edited by UserBee; Nov 4th, 2021 at 06:36 PM.
-
Nov 4th, 2021, 06:55 PM
#2
Re: Problem with Ajax
You don't need to use jQuery just to submit an AJAX request. In fact, I'd highly discourage it because that is the equivalent of buying a computer business (jQuery library) so that you have access to a keyboard (GET request).
It's also highly discouraged to set async to false. AJAX is designed to work asynchronously (hence the first "A" in AJAX).
Take a look at this option instead:
Code:
const element = document.getElementById('input1');
fetch('curlphp.php')
.then((data) => {
data.text()
.then((text) => {
element.value = text;
console.log(JSON.parse(text));
});
})
.catch((error) => {
element.value = error;
});
Fiddle: https://jsfiddle.net/gpzayw84/
-
Nov 4th, 2021, 07:39 PM
#3
Thread Starter
Member
Re: Problem with Ajax
may I ask, what is that (data) and (text) ?
Last edited by UserBee; Nov 4th, 2021 at 07:48 PM.
-
Nov 4th, 2021, 07:48 PM
#4
Re: Problem with Ajax
MDN is my go to for any documentation related to HTML or JavaScript. Here is the specific documentation for fetch: https://developer.mozilla.org/en-US/.../API/Fetch_API
-
Nov 4th, 2021, 07:49 PM
#5
Thread Starter
Member
Re: Problem with Ajax
Originally Posted by dday9
may I ask, what is that (data) and (text) ?
-
Nov 4th, 2021, 07:52 PM
#6
Re: Problem with Ajax
Those are function definitions with one argument each (data and text respectively).
They can be described as such too if you do not like the arrow function syntax:
Code:
function(data) {
...
}
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|