PHP Ajax HELP

PHPDevMe · July 28, 2009

This is my first post in this forum, I am new to PHP, I have been developing in it for about a few months now and I am pretty excited about this language! So much better than asp.

I have come to a roadblock though, I am working on this project that needs the following: :facewall:

PHP, Ajax - Multiply a variable by a dropdown, add two radio buttons and then echo the total at the bottom in php (so i have the variable so i can write it to the DB)

My issue, I cannot get this to do the ajax request, I need to do this when i choose a number from the dropdown and when I click the radio button (this is the part that has gotten me confused)

So in short, $100 dollars * Dropdown + Radiobutton selected = Total

I am pulling my hair out with this, does anyone have any examples or help? Thanks!

MadTechie · July 28, 2009

I'm not sure what part needs to use ajax, as it seam it can all be done via javascript (without any ajax calls).

EDIT: can you be a little more detailed

Oh and welcome

PHPDevMe · July 28, 2009

Thank you for the welcome!

Essentially to paint a better picture, Im trying to do some math for a EXTREMELY simple shopping cart. So I assumed that Ajax would be the best situation here, or Javascript alone, whichever works!

Yes so think of it this way, you go to a page, you have one variable set at 100, times it by a variable thats in a dropdown (1 through 10) then add in an optional radiobutton with a variable set at 50 to equal a total.

I need to take that total and make it a string, so i can post it in a form when they are ready to checkout.

lonewolf217 · July 28, 2009

what is the flow through this procedure ?

Do you want to be able to dynamically update the contents of a cart without refreshing the page or do you want to have the user enter the values and submit it and have it reload a new page with the cart ?

MadTechie · July 28, 2009

Okay if these variables are set on page during the page load then you could do this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<input name="Dollars" type="text" id="Dollars" value="100" /><br />
<select name="dropdown" id="dropdown">
  <option value="10">Item1 (10)</option>
  <option value="250">Item2 (250)</option>
  <option value="500">Item3 (500)</option>
</select><br />
Delivery 
<br />
<input type="radio" name="radio" id="week" value="10" />
this week <br />
<input type="radio" name="radio" id="next" value="20"/> 
next day<br />
  <input type="radio" name="radio" id="today" value="30"/> 
today<br />
    <input name="" value="addup" type="button" onclick="addup();" />
    <br />
  Total
  <input type="text" name="total" id="total" />
<br />
</form>
<script language="javascript">
function addup(){
var D = parseFloat(document.getElementById('Dollars').value);
var dd = parseFloat(document.getElementById('dropdown').options[document.getElementById('dropdown').selectedIndex].value);
var R;
if(document.getElementById('week').checked) R = document.getElementById('week').value;
if(document.getElementById('next').checked) R = document.getElementById('next').value;
if(document.getElementById('today').checked) R = document.getElementById('today').value;
R = parseFloat(R);
document.getElementById('total').value = (D * dd + R);
}
</script>
</body>
</html>

PHPDevMe · July 28, 2009

I would hope for it to be dynamic, so it would not reload the page.

The flow is :

1) Click dropdown and choose number - > Multiply set variable * dropdown number -> total at bottom

2) Click radio button - > add a number to the existing total

3) have the total as a $var so i can post it in a form

lonewolf217 · July 28, 2009

for using ajax with this the general idea would be that when you use the select menu to change, you can trigger an event that will perform the math operation that you want, and then it can use javascript to update a value of another form entity to display the total.

You can also optionally trigger an event on the radio button and do basically the same thing to update the value of the total button.

Then, when you click the submit button you can use ajax if you want to process the form and display a status message, or you can just forward it to another page for processing the cart.

for more details on how to use the ajax though, check out the ajax forum on here, there are some links to some nice tutorials including jQuery

PHPDevMe · July 28, 2009

Okay if these variables are set on page during the page load then you could do this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<input name="Dollars" type="text" id="Dollars" value="100" /><br />
<select name="dropdown" id="dropdown">
  <option value="10">Item1 (10)</option>
  <option value="250">Item2 (250)</option>
  <option value="500">Item3 (500)</option>
</select><br />
Delivery 
<br />
<input type="radio" name="radio" id="week" value="10" />
this week <br />
<input type="radio" name="radio" id="next" value="20"/> 
next day<br />
  <input type="radio" name="radio" id="today" value="30"/> 
today<br />
    <input name="" value="addup" type="button" onclick="addup();" />
    <br />
  Total
  <input type="text" name="total" id="total" />
<br />
</form>
<script language="javascript">
function addup(){
var D = parseFloat(document.getElementById('Dollars').value);
var dd = parseFloat(document.getElementById('dropdown').options[document.getElementById('dropdown').selectedIndex].value);
var R;
if(document.getElementById('week').checked) R = document.getElementById('week').value;
if(document.getElementById('next').checked) R = document.getElementById('next').value;
if(document.getElementById('today').checked) R = document.getElementById('today').value;
R = parseFloat(R);
document.getElementById('total').value = (D * dd + R);
}
</script>
</body>
</html>

That is great, thanks.

Is there a way i can make it work whenever I click the dropdown AND the radio it automatically calculates instead of pressing a button?

MadTechie · July 28, 2009

Yes, use the onchange & onclick attribute

i also added defaults

<form id="form1" name="form1" method="post" action="">
<input name="Dollars" type="text" id="Dollars" value="" onchange="addup();"/><br />
<select name="dropdown" id="dropdown" onchange="addup();">
  <option value="10" selected="selected">Item1 (10)</option>
  <option value="250">Item2 (250)</option>
  <option value="500">Item3 (500)</option>
</select><br />
Delivery 
<br />
<input type="radio" name="radio" id="week" value="10" checked="checked" onclick="addup();"/>
this week <br />
<input type="radio" name="radio" id="next" value="20" onclick="addup();"/> 
next day<br />
  <input type="radio" name="radio" id="today" value="30" onclick="addup();"/> 
today
    <br />
  Total
  <input type="text" name="total" id="total" />
<br />
</form>

EDIT: i'm going to move this to the javascript section

Sign In

PHP Ajax HELP

Recommended Posts

PHPDevMe

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

PHPDevMe

Link to comment

Share on other sites

lonewolf217

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

PHPDevMe

Link to comment

Share on other sites

lonewolf217

Link to comment

Share on other sites

PHPDevMe

Link to comment

Share on other sites

MadTechie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information