Ajax and PHP - how to change multiple textbox value based on dropdown list value selection

Question

1.00/5 (1 vote)

See more:

Hi Team,

I have made a system where on a dropdown selected value, other 3 textbox values will be chaned...without using database.

I have made it using Ajax...but I have made only one textbox values and genrate other values but could not send to them on different textboxes...

I have made it to take the help of internet but the next part can not be done by me...please help...!

I don't want any database table at here...!

Thanks

What I have tried:

index.php
---------
//include_once("admin/DAO.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Intaxfin OnlineSales</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
//fuction to return the xml http object
function getXMLHTTP() {
var xmlhttp=false;
try {
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}

function getAuthCap(strURL)
{
var req = getXMLHTTP();
if (req)
{
//function to be called when state is changed
req.onreadystatechange = function()
{
//when state is completed i.e 4
if (req.readyState == 4)
{
// only if http status is "OK"
if (req.status == 200)
{
document.getElementById('prof_fee').value=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}

/*function getSalesTax(strURL)
{
var req = getXMLHTTP();
if (req)
{
//function to be called when state is changed
req.onreadystatechange = function()
{
//when state is completed i.e 4
if (req.readyState == 4)
{
// only if http status is "OK"
if (req.status == 200)
{
document.getElementById('sales_tax').value=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}*/
</script>
</head>
<body style="font: 12px Verdana, Arial, Helvetica, sans-serif;">

Company Incorporation	Authorised Capital (Rs.)	Professional Fess (Rs.)	Sales Tax @ 14.5%	Total Cost
Company Incorporation	<select name="auth_cap" > <option value="">-- Select Authorised Capital --</option> <option value="100000">100,000</option> <option value="200000">200,000</option> <option value="300000">300,000</option> <option value="400000">400,000</option> <option value="500000">500,000</option> <option value="600000">600,000</option> <option value="700000">700,000</option> <option value="1000000">1,000,000</option> <option value="1500000">1,500,000</option> <option value="2000000">2,000,000</option> </select>	<input type="text" name="prof_fee" id="prof_fee" maxlength="20" disabled="disabled" placeholder="Professional Fees">	<input type="text" name="sales_tax" id="sales_tax" maxlength="20" disabled="disabled" placeholder="Sales Tax">	<input type="text" name="ttl_cost" maxlength="20" disabled="disabled" placeholder="Total Cost">	<input type="submit" name="submit" value="submit">

</form>

</body>
</html>

find_ccode.php
-------------
$auth_cap = $_REQUEST['auth_cap'];

switch($auth_cap)
{
case "100000" :
$prof_fee = 15000;
$sales_tax = ($prof_fee * 14.5)/100;
echo $prof_fee;
echo $sales_tax;
break;

/*case "200000" :
echo "15000"; break;

case "300000" :
echo "15000"; break;

case "400000" :
echo "15000"; break;

case "500000" :
echo "20000"; break;

case "600000" :
echo "20000"; break;

case "700000" :
echo "22000"; break;

case "1000000" :
echo "25000"; break;

case "1500000" :
echo "27000"; break;

case "2000000" :
echo "27000"; break;*/

default :
echo "ajax fault: error occurred...!";
}

/*switch($prof_fee)
{
case "15000" :
#$prof_fee = 15000;
$sales_tax = ($prof_fee * 14.5)/100;
#echo $prof_fee;
echo $sales_tax;
break;
} */
?>

Posted 23-May-16 8:54am

Chandrakanta.Sen

Updated 23-May-16 10:05am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

P_Z · Answer 1 · 2016-05-23T10:05:00

Without checking all the code posted, using PHP (and other backend languages) you can return multiple values in an Ajax request to JavaScript such as:

PHP

if ((filter_input(INPUT_POST, 'methodinphp', FILTER_SANITIZE_STRING))) {
    echo json_encode(array('v1' => 'value1', 'v2' => 'value2'));   
}
?>

This will return array as Json string which can be used in JavaScript (visit PHP : Create array for JSON - Stack Overflow[^] for more details on how to create Json strings in PHP)

Then from JavaScript, you can access the multiple values passed such as:

JavaScript

<script type="text/javascript">
if (req.status == 200)
{
var response = JSON.parse(req.responseText);
//Note this JSON.parse will convert json string to: [{"v1":"value1","v2":"value2"}]
var v1 = response.v1;
//alert(v1);
var v2 = response.v2;
//Json strings can contain nested arrays 
} 
</script>

The code for Ajax requests seems a bit long...I think you may also check the jQuery library (downloadable from jQuery[^]) where you can write the same code in less lines such as:

JavaScript

<script type="text/javascript">
$(window).load(function() {
   $.ajax({
        type: "POST",
        url: "ajaxpost.php",
        datatype : "application/json",
        data: {
            methodinphp: 'methodinphp'
        },
        success: function (response) {
            response = JSON.parse(response);
            var v1 = response.v1; //Note no responseText required here
            //alert(v1);
        },
        error: function () {
        }
    });
});
</script>