Load Ajax response div into three different div

Question

I am working on ajax, the ajax function is working fine but the problem is to break ajax response between three div. Let me explain in detail.

1. I have a page where i have one select box and three input , and by the onchange event i want the ajax value in input boxes.

for further explaination here is my code(Ajax Response):

<?php
include("include/config.php");
$enrol=$_GET['q'];
$query=mysqli_query($con,"select * from dbo_tbmembermaster where vc_enrol_no='$enrol'");
$result=mysqli_fetch_assoc($query);
$mem_id=$result['nu_member_id'];
$result['nu_member_id'];
$query2=mysqli_query($con,"select SUM(nu_amount) as amt_sub from dbo_tbmemberdues where nu_member_id='$mem_id' and vc_due_for='Subscription'");
$result2=mysqli_fetch_assoc($query2);
echo '<div id="d1">';
echo $amt_sub=$result2['amt_sub'];
echo '</div>';

$query3=mysqli_query($con,"select SUM(nu_amount) as amt_fund from dbo_tbmemberdues where nu_member_id='$mem_id' and vc_due_for='Employees Welfare Fund'");
$result3=mysqli_fetch_assoc($query3);
echo '<div id="d2">';
echo $amt_fund=$result3['amt_fund'];
echo '</div>';

$query4=mysqli_query($con,"select SUM(nu_amount) as amt_fund from dbo_tbmemberdues where nu_member_id='$mem_id' and vc_due_for='Cause List'");
$result4=mysqli_fetch_assoc($query4);
echo '<div id="d3">';
echo $amount=$result4['amt_fund'];
echo '</div>';
?>

Now this is my response and please note here i have some values in three different div <div id="d1">,<div id="d2">,<div id="d3">

2. Now Iam getting this response on my page by the Id <div id="result"></div> . So After Ajax call I have d1,d2,d3 on my page and the value of these div I am trying to get into three input box. I am doing this by javascript as:

function showdues()
{
var aa=document.getElementById("d1").innerHTML;
//alert("vhsgfhsg");
document.getElementById("sub_due").value=aa;
}

and I am calling ajax function and this function by onchange like this <select name="dues" onchange="Javascript: showUser(dues.value);showdues();"> , but ajax function is working but this not working and I am not getting anything into input box.

It may be a weird idea to do this but I uses my best and your any type of idea , what I am missing and what should I have to do.. If there is any better idea Plz Let me know....

thanks in advance.

Answer 1

It's not entirely clear what the problem is, but there are two ways you can go:

1. Return all html from php and replace all contents of the containing box (that holds all three selects) at once;
2. Return a json string that contains information about the three select boxes and build / selectively replace the html in javascript.

(you could also use a combination of the two of course).

And you have an sql injection problem.

Answer 2

The simplest way would be

1. Get the data of the 3 input box from your process page as a string separated by some unique value. For example : Lets say the 3 results are : 45, 56, 78. Here the comma [ , ] acts as separator.

2. Get the values in a javascript variable and split them depending upon the comma [ , ]. It will give you 3 different arrays.

3. Now place each of the array values accordingly in the input box you want.

Hope it gives you some idea