Changing hidden field value by dropdown item

Rostok · February 27, 2007

Hi,

I have a form with a dropdown list. When the visitor selects his state of residence from this dropdown list, the value of some hidden field should be changed, which then should be recognized by php code to calculate the sales tax and update the total cost. At the end, the form is submitted to other php page, where all customer information is inserted into database and the confirmation e-mail is sent.

Question: Is it possible to update the value of the hidden field (depending on the selected state from the dropdown list) without reloading the form/page?

So far I’ve managed to make the sales tax calculation by using javascript function called with the onChange event in the dropdown list, but in order to return the changed value of the hidden field, this javascript was also reloading the page. This means that the “action” attribute of the form should be empty, so the page could post to itself. At the same time, this form, after completion, should be validated (credit card info, required field, etc.) and submitted to other php page (all of this with the submit button), to finalize the order, but because the form is posting to itself, this can’t be done.

Forgive me if all of the above is a little bit confusing, but that’s how I feel about the problem – confused. I know that by using AJAX this can be done easily, but since I’m new to it and not very experienced with JavaScript nor PHP, I don’t know where to look for or how to do it.

Thanks,

Robert

ScotDiddle · February 28, 2007

Robert,

I took a stab at it, and here is what I came up with:

1.) selectState.html - Dropdown list of 3 states...

2.) setStateTaxRate.js called from 1.) Ajax Script which calls 3.)

3.) setStateTaxRate.php which looks at which state the user selected, and paints your hidden field...

4.)

ScotDiddle · February 28, 2007

Frassin - Brassin >:(

Let's try this again...

1.) selectState.html - Dropdown list of 3 states...

2.) setStateTaxRate.js called from 1.) Ajax Script which calls 3.)

3.) setStateTaxRate.php which looks at which state the user selected, and paints your hidden field...

Build DB update statements in 4.)

4.) updateUserOrder.php - Displays State Selected and value of Ajax generated hidden field.

Hope this is what you are looking for:

Scot L. Diddle, Richmond VA

selectState.html


<html>
<head>
<style>

div#txtHint {
font-weight:bold;
}
</style>

<script src="/javascript/setStateTaxRate.js"></script>
</head>
<body>

<form action="updateUserOrder.php"> 
Select a State:
<select name="state" onchange="showState(this.value)">
<option value="*Select*">Select</option>
<option value="TX">Texas</option>
<option value="FL">Florida</option>
<option value="AL">Alabama</option>

</select>


<p>
<div id="txtHint"><b>Submit Button Will Appear Here</b></div>
</p>

</form>

</body>
</html>

setStateTaxRate.js


var xmlHttp

function showState(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="setStateTaxRate.php"
url=url+"?state="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

setStateTaxRate.php


<?php

$state = $_GET["state"];

If ($state == 'TX') {
	$stateTax = .03;
}

If ($state == 'AL') {
	$stateTax = .06;
}

If ($state == 'FL') {
	$stateTax = .01;
} 

echo  "<input value=\"$stateTax\" type=\"hidden\" name=\"stateTax\" />  \n";
echo "<INPUT type=\"submit\" name=\"Update\" value=\"Update\">";
   
?>

updateUserOrder.php


<?php

$state=$_GET["state"];
$tax=$_GET["stateTax"];

if ($state == '*Select*') {
	header("location: stateSelect.html");
}
else {

 	echo "You Live in $state <br /> \n";
	echo " and your tax rate is: $tax...";
}
   
?>

Rostok · February 28, 2007

Hi Scot,

Thank you for the code, it works like a charm!

Now after I re-read my post, I realize that I didn’t explain my problem very well. You see, all calculations and updates should be performed on one php page (if it’s possible, of course). On this page I have one form where the dropdown list with states is placed and below that I have cart items table (products with quantities and prices), filled with data from a temporary database table. When the user selects his state from the dropdown list, the tax should be calculated and the tax amount field in the cart items table (on the page) should be updated, which means that the total amount should be recalculated. All this is on one page, so when the user clicks ”submit”, the entire page is posted to other php page, where the final order is inserted into database and the receipt email is sent.

I’ve managed to change your code a little bit, by joining together selectState.html and updateUserOrder.php into one selectState.php page. This means that the form in this page is posting to itself and the tax results are displayed on the same page with the dropdown list. This seems OK to me, but I wish I could update the page without clicking on ”Update” button, so the tax calculation is performed automatically when the state is selected from the dropdown list. I hope you understand what I’m trying to achieve here.

Thanks again for your help; I’ve received from you one of the clearest responses ever.

Robert

Sign In

Changing hidden field value by dropdown item

Recommended Posts

Rostok

Link to comment

Share on other sites

ScotDiddle

Link to comment

Share on other sites

ScotDiddle

Link to comment

Share on other sites

Rostok

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information