Using AJAX to refresh two different textboxes

Question

I've got a page that retrieves two values from the database (Atender and Posto).

I'd like to refresh a textbox1 with Atender value and textbox2 with Posto value. At the moment, I'm only able to make it so this function refreshes 1 value or the 2 values simultaneously, but both values show up on the two textboxes.

EDIT: Forgot to add, the PHP you see there is the PainelUtilizador.php. Same goes for the HTML, all of that code is inside PainelUtilizador.php

Here's my code, I'm sure you'll be able to know what I mean after taking a look:

<?php
include '../Login/db_login.php';

if(isset($_GET['ajax'])) {
$sql1 = "SELECT Atender,Posto FROM atendercliente WHERE ID=1";
$sql2 = "SELECT Atender,Posto FROM atendercliente WHERE ID=2";
$resultA = $conn->query($sql1);
   while($row = $resultA->fetch_assoc()) {
		$returnArrayA = array('AtenderA' => $row["Atender"], 'PostoA' => $row["Posto"]);
   };
$resultB = $conn->query($sql2);
   while($row = $resultB->fetch_assoc()) {
		$returnArrayB = array('AtenderB' => $row["Atender"], 'PostoB' => $row["Posto"]);
   };
   echo json_encode($returnArrayA);
   echo json_encode($returnArrayB);exit;
}

?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Painel do utilizador</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            setInterval(function(){
                $.ajax('PainelUtilizador.php?ajax=1').done(function(data) {
                    data = JSON.parse(data);
                    $("#refreshASenha").val(data['Atender']);
                    $("#refreshAPosto").val(data['Posto']);
				          	$("#refreshBSenha").val(data['Atender']);
                    $("#refreshBPosto").val(data['Posto']);
                })
            }, 1000);
        </script>
</head>
<body>
<table border="1">
<tr>
  <td> <input type="text" id="refreshASenha" disabled> </td>
  <td> <input type="text" id="refreshAPosto" disabled> </td>
</tr>
</table>
<table border="1">
<tr>
  <td> <input type="text" id="refreshBSenha" disabled> </td>
  <td> <input type="text" id="refreshBPosto" disabled> </td>
</tr>
</table>
</body>
</html>

I'm still a beginner, and am still learning AJAX and JQuery by myself

Forgot to add, the PHP you see there is the PainelUtilizador.php. Same goes for the HTML, all of that code is inside PainelUtilizador.php — Azazel
– Azazel, Commented May 9, 2017 at 20:24

Agam Banga · Accepted Answer · 2017-05-10 02:59:35Z

1

You need to add a check for ajax & then call the DB method only. You can simply do it in one ajax rather than calling two

UPDATE

<?php
include '../Login/db_login.php';

if(isset($_GET['ajax'])) {
$sql1 = "SELECT Atender,Posto FROM atendercliente WHERE ID=1";
$sql2 = "SELECT Atender,Posto FROM atendercliente WHERE ID=2";
$resultA = $conn->query($sql1);
   while($row = $resultA->fetch_assoc()) {
     $returnArrayA = array('Atender' => $row["Atender"], 'Posto' => $row["Posto"]);
   };
$resultB = $conn->query($sql2);
   while($row = $resultB->fetch_assoc()) {
     $returnArrayB = array('Atender' => $row["Atender"], 'Posto' => $row["Posto"]);
   };
   echo json_encode(array('A' => $returnArrayA, 'B' => $returnArrayB));exit;
}

?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Painel do utilizador</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            setInterval(function(){
                $.ajax('PainelUtilizador.php?ajax=1').done(function(data) {
                    data = JSON.parse(data);
                    $("#refreshASenha").val(data['A']['Atender']);
                    $("#refreshAPosto").val(data['A']['Posto']);
		    $("#refreshBSenha").val(data['B']['Atender']);
                    $("#refreshBPosto").val(data['B']['Posto']);
                })
            }, 1000);
        </script>
</head>
<body>
<table border="1">
<tr>
  <td> <input type="text" id="refreshASenha" disabled> </td>
  <td> <input type="text" id="refreshAPosto" disabled> </td>
</tr>
</table>
<table border="1">
<tr>
  <td> <input type="text" id="refreshBSenha" disabled> </td>
  <td> <input type="text" id="refreshBPosto" disabled> </td>
</tr>
</table>
</body>
</html>

edited May 10, 2017 at 2:59

answered May 9, 2017 at 20:29

Agam Banga

2,6931 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Azazel Over a year ago

It does return both values, but on a blank page "{"Atender":"5","Posto":"4"}". Does not return them inside the textboxes

Agam Banga Over a year ago

what url you are using. don't add ajax to your current url. i have added that in case of ajax request only. it will be called via ajax only

Azazel Over a year ago

Wonderful, it works flawlessly! Can you tell me just one more thing? I'll need to do a few more queries, same principle as that one except I have to change the ID, how could I add those query results to new textboxes? Is the principle the same?

Agam Banga Over a year ago

create an array in the php & use the same logic, just add the ID in the array key like this $returnArray[] = array('id' => $id, 'Atender' => $row["Atender"], 'Posto' => $row["Posto"]); Now in ajax, loop the response & then use like $("#refreshASenha" + data['id']).val(data['Atender']);. Make sure your input has the same id like <td> <input type="text" id="refreshASenha1" disabled> </td>

Azazel Over a year ago

Sorry for annoying you, but I've tried to do what you said, but I most likely did it wrong. Can you tell me what's wrong just this one more time?

|

Collectives™ on Stack Overflow

Using AJAX to refresh two different textboxes

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related