getElementsByTagName 1

[dreamclutch]

Below is the parsed php information from my code. I somehow need to use javascript to pull two price fields from my db and use of a toggle radio button for each existing product row in cart. I can pull the two price fields from my db fine, but how would I integrate that into javascript so that when a user selects a distinct row's radio button field, it changes the associated price value and reflects altered total price for total items in cart?


function viewPrice(){

//Assuming I'd have to use document.getElementsByTagName('input')? to retrive number of rows and associated values?

}

<form action='/cart.php' method=POST name=main_form>
<a name="cart">


<table width="100%" border="0" cellspacing="4" cellpadding="10"><tr bgcolor="#D9E9C9"><td width="73%" class="body1"><strong>Your Templates</strong></td>
<td class="body1"width="15%"><strong>Remove</strong></td>

<td class="body1" width="12%"><strong>Total</strong></td></tr><tr bgcolor="#E9F2DB"><td class="body1">Starry Eyed Suprise</td><td class="body1"><a href='catalog.php?remove=57'><b>Delete</b></a></td>

<td class="body1">75.00</td></tr><tr bgcolor="#E9F2DB"><td class="body1">Golfing in Nature</td><td class="body1"><a href='catalog.php?remove=78'><b>Delete</b></a></td>

<td class="body1">75.00</td></tr><tr bgcolor="#F2F7EA"><td class="body1">&nbsp;</td><td class="body1"><div align="right">Subtotal:</div></td>
<td class="body1">$150</td>

</form>

</tr>

<tr bgcolor="#F2F7EA">
<td height="39" class="body1">&nbsp;</td>
<td class="body1"><div align="right">Total:</div></td>
<td class="body1">$150</td>
</tr></table><form name="_xclick" action="

https://www.paypal.com/cgi-bin/webscr"

method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="item_name" value="">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="notify_url" value="">
<input type="hidden" name="return" value="">
<input type="hidden" name="cancel_return" value="">
<input type="hidden" name="cn" value="">
<input type="hidden" name="amount" value="150">
<input type="image" src="images/checkout.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>

</td></tr></center></center></table>

 

[theniteowl]

Rather than looping through all of the input fields you are better off giving the fields you want values from meaningful IDs of their own and looping through those.

You CAN loop through the input tags but how do you recognize which ones are the ones containing the values you want to check, which ones store your values and which ones are buttons on the page?

This script will show you all the values of the input tags.

function viewPrice()
{
  var myCells = document.getElementsByTagName("input");
  var outstr='';
  for (var x=0; x<myCells.length; x++)
    outstr=outstr+myCells[x].value + ", ";
  alert(outstr);
}
[code]

The rest of what you are trying to do is not clear to me.
Do you mean to go and get two new values as a result of an action on the page or prior to the page loading?

Do you mean to re-calculate the page when a radio button is clicked?  You might consider a checkbox if it is just for flagging an item in the list, radio buttons are best when you have multiple options to choose from other than just selected/unselected.



Stamp out, eliminate and abolish redundancy!

 

[dreamclutch]

I gave each row their perspective id's and names however I'm not sure how would integrate this into the getelementsbyid javascript function.

Prior to the page loading, I'd like the javascript function to flip hidden field values for use of the form name 'cart'. I'd like the page to then recalculate the total and subtotal based upon the radio selections they make for price.

The whole idea for using javascript for this would be to eliminate the need for an obvious page refresh, and to reflect price change and total amount instantaneously.

Revised cart portion below:

<form action='/cart.php' method=POST name=main_form>
<a name="cart">


<table width="100%" border="0" cellspacing="4" cellpadding="10"><tr bgcolor="#D9E9C9"><td width="73%" class="body1"><strong>Your Templates</strong></td>
<td class="body1"width="15%"><strong>Remove</strong></td>

<td class="body1" width="12%"><strong>Total</strong></td></tr><tr bgcolor="#E9F2DB"><td class="body1">Starry Eyed Suprise</td><td class="body1"><a href='catalog.php?remove=57'><b>Delete</b></a></td><td><input type='radio' name='?' value=1 onchange="viewPrice()" onclick="viewPrice()" id='?'></td>

<td class="body1">75.00</td></tr><tr bgcolor="#E9F2DB"><td class="body1">Golfing in Nature</td><td class="body1"><a href='catalog.php?remove=78'><b>Delete</b></a></td><td><input type='radio' name='?' value=1 onchange="viewPrice()" onclick="viewPrice()" id='?'></td>

<td class="body1">75.00</td></tr><tr bgcolor="#F2F7EA"><td class="body1">&nbsp;</td><td class="body1"><div align="right">Subtotal:</div></td>
<td class="body1">$150</td>

</form>

 

[theniteowl]

You are closing your form but you did not close the table row or the table before the closing form tag.

Your first and last table rows have three cells but the ones in the middle have 4 cells so things are not lined up the way I suspect you want them.

I gave each row their perspective id's and names however I'm not sure how would integrate this into the getelementsbyid javascript function.

You did not give unique IDs to the cells where your values are, you gave the ID of ? to both of your radio buttons and that may cause you some problems.

Do you intend that only one selection is possible on the page or that they can select multiple items? If only one selection is possible then the associated radio buttons will work, but if you want multiple possible selections then you should use checkboxes or at least give the radio buttons unique IDs so they are not associated with each other.

Prior to the page loading, I'd like the javascript function to flip hidden field values for use of the form name 'cart'. I'd like the page to then recalculate the total and subtotal based upon the radio selections they make for price.

What do you mean you want to flip hidden field values?
Do you mean you want all the values reset to zero?
Do all of the hidden values on your cart form contain numerical values?


I suspect what you are looking to do for calculations is something like this:

<html>
<head>
<script type="text/javascript">
function viewPrice() {
  var rnum = 0;
  var subtot=0;
  var frm = document.forms['main_form'].elements;
  while (cb = frm['R' + rnum]) {
    if (cb.checked)
      subtot+= cb.value-0;
    rnum++;
  }
  document.getElementById('SubTot').innerText = "$" + subtot.toFixed(2);
}
</script>
</head>
<body>
<form action='/cart.php' method=POST name='main_form'>
<table width="100%" border="0" cellspacing="4" cellpadding="10">
  <tr bgcolor="#D9E9C9">
    <td width="60%" class="body1"><strong>Your Templates</strong></td>
    <td class="body1" width="10%"><strong>Remove</strong></td>
    <td class="body1" width="10%"><strong>Price</strong></td>
    <td class="body1" width="10%"><strong>Select</strong></td>
  </tr>
  <tr bgcolor="#E9F2DB">
    <td class="body1">Starry Eyed Suprise</td>
    <td class="body1"><a href='catalog.php?remove=57'><b>Delete</b></a></td>
    <td class="body1">75.00</td>
    <td><input type='checkbox' name='R0' value="75.00" onclick="viewPrice()"></td>
  </tr>
  <tr bgcolor="#E9F2DB">
    <td class="body1">Golfing in Nature</td>
    <td class="body1"><a href='catalog.php?remove=78'><b>Delete</b></a></td>
    <td class="body1">75.00</td>
    <td><input type='checkbox' name='R1' value="75.00" onclick="viewPrice()"></td>
  </tr>
  <tr bgcolor="#F2F7EA">
    <td class="body1">&nbsp;</td>
    <td class="body1">&nbsp;</td>
    <td class="body1"><div align="right"><strong>Subtotal:</strong></div></td>
    <td class="body1" id="SubTot">$0.00</td>
</tr>
</table>
</form>

<form name="_xclick" action="[URL unfurl="true"]https://www.paypal.com/cgi-bin/webscr"[/URL] method="post">
  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="business" value="">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="item_name" value="">
  <input type="hidden" name="item_number" value="1">
  <input type="hidden" name="notify_url" value="">
  <input type="hidden" name="return" value="">
  <input type="hidden" name="cancel_return" value="">
  <input type="hidden" name="cn" value="">
  <input type="hidden" name="amount" value="150">
  <input type="image" src="images/checkout.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form> 

</body>
</html>

Stamp out, eliminate and abolish redundancy!

 

[dreamclutch]

I'm sorry, there is actually supposed to be two price fields per row.

so in essense they're toggling between two prices per cart row. So I'm assuming I have to throw in a hidden field value that contains the second price?

<input type="hidden" name="page" value="100.00">




<form action='/cart.php' method=POST name='main_form'>
<table width="100%" border="0" cellspacing="4" cellpadding="10">
<tr bgcolor="#D9E9C9">
<td width="60%" class="body1"><strong>Your Templates</strong></td>
<td class="body1" width="10%"><strong>Remove</strong></td>
<td class="body1" width="10%"><strong>Price</strong></td>
<td class="body1" width="10%"><strong>Select</strong></td>
</tr>
<tr bgcolor="#E9F2DB">
<td class="body1">Starry Eyed Suprise</td>
<td class="body1"><a href='catalog.php?remove=57'><b>Delete</b></a></td>
<td class="body1">75.00</td>
<td><input type='checkbox' name='R0' value="75.00" onclick="viewPrice()"></td>
<td class="body1">100.00</td>
<td><input type='hidden' name='R0' value="100.00" onclick="viewPrice()"></td>
</tr>
<tr bgcolor="#E9F2DB">
<td class="body1">Golfing in Nature</td>
<td class="body1"><a href='catalog.php?remove=78'><b>Delete</b></a></td>
<td class="body1">75.00</td>
<td><input type='checkbox' name='R1' value="75.00" onclick="viewPrice()"></td>
<td class="body1">100.00</td>
<td><input type='hidden' name='R1' value="100.00" onclick="viewPrice()"></td>
</tr>
<tr bgcolor="#F2F7EA">
<td class="body1">&nbsp;</td>
<td class="body1">&nbsp;</td>
<td class="body1"><div align="right"><strong>Subtotal:</strong></div></td>
<td class="body1" id="SubTot">$0.00</td>
</tr>
</table>
</form>

 

[theniteowl]

So you want to have two prices per row with a radio button next to each price to choose which value to use?

Get your form looking the way it should with all checkboxes or radio buttons in place even if they are not working then I will have a better idea of what you are trying to do.


Stamp out, eliminate and abolish redundancy!

 

[dreamclutch]

Well, I can't really definitly set the amount of radio buttons or checkboxes because that depends on how many products a person would order. The code that I'm using is parsed from PHP code. Hope that helps

 

[theniteowl]

Actually it doesnt.
I need to know what the form structure looks like.
What you have posted is a mess because all of the rows do not have the same number of cells so I cannot tell what lines up with what.

When I say to get your form looking like it should with all checkboxes or radio buttons in place I do not mean EVERY POSSIBLE row, just that the code you post should show me whether you want checkboxes or radio buttons, how many of them per row, where they will be placed, etc.

I keep asking about those radio buttons but you have not answered. Every time I give you a bit of code to do what I THINK you want, you come back with a response indicating you really want something else but that something else had not previously been stated.
You want TWO prices per row? And a way to toggle between two prices for that same row? Then create a form where each selection has both possibilities so I can see what it is you are picturing this looking like.
At the moment I THINK you want two price columns and two radio buttons. Along with this there must be some sort of description indicating to the client why they would want to choose one price over the other. Is it two versions of the same product? One small and one large? One with a support contract one without?

The forms you have posted do not have all of the fields needed to accomplish what you say you want to do so I am having a hard time figuring out what you need.
Create a form that looks like you want the final one to look like and I can help you getting the functionality working.

Stamp out, eliminate and abolish redundancy!

 

[dreamclutch]

Okay I'll work on that, and then get back to you. Thanks

 

[dreamclutch]

Theniteowl,

Yes I would like TWO prices per row and a way to toggle between two prices for that same row. The two radio buttons exist in the 3rd column along with the text descriptions. Integrating two types of distributions which are exclusive and non-exclusive (separate prices).

In my php code I used a foreach statement to populate the radio button group names below with incremental numbers so that each radio set group per row is distinct. I'm not sure if I'll have to include id's with these distinct rows or not to make javascript function with this.

<html>
<head>
<script type="text/javascript">
function viewPrice() {

}
</script>
</head>
<body>


<form action='/cart.php' method=POST name='main_form'>
<table width="100%" border="0" cellspacing="4" cellpadding="10"><tr bgcolor="#D9E9C9"><td width="50%" class="body1"><strong>Your Templates</strong></td><td class="body1"width="25%"><strong>Remove</strong></td><td class="body1" width="25%"><strong>Total</strong></td></tr><tr bgcolor="#E9F2DB"><td class="body1">Motorcycle Full Throttle</td><td class="body1"><a href='catalog.php?remove=80'><b>Delete</b></a></td>
      <td class="body1"><input name="0" type="radio" value="75.00" onclick="viewPrice()" checked>Non-Exclusive: 75.00 <input name="0" type="radio" value="700.00"onclick="viewPrice()" >Exclusive: 700.00 </td></tr><tr bgcolor="#E9F2DB"><td class="body1">Modern Law Firm</td><td class="body1"><a href='catalog.php?remove=79'><b>Delete</b></a></td>
      <td class="body1"><input name="1" type="radio" value="75.00" onclick="viewPrice()" checked>Non-Exclusive: 75.00 <input name="1" type="radio" value="500.00"onclick="viewPrice()" >Exclusive: 500.00 </td></tr><tr bgcolor="#F2F7EA"><td class="body1">&nbsp;</td><td class="body1"><div align="right">Subtotal:</div></td>
      <td class="body1">$150</td>
    </tr>

    <tr bgcolor="#F2F7EA"> 
      <td height="39" class="body1">&nbsp;</td>
      <td class="body1"><div align="right">Total:</div></td>
      <td class="body1">$150</td>
    </tr></table>
</form>

<form name="_xclick" action="[URL unfurl="true"]https://www.paypal.com/cgi-bin/webscr"[/URL] method="post">
  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="business" value="">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="item_name" value="">
  <input type="hidden" name="item_number" value="1">
  <input type="hidden" name="notify_url" value="">
  <input type="hidden" name="return" value="">
  <input type="hidden" name="cancel_return" value="">
  <input type="hidden" name="cn" value="">
  <input type="hidden" name="amount" value="150">
  <input type="image" src="images/checkout.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form> 

</body>
</html>

 

[theniteowl]

Something like the code below should work.
Note though that you have both a subtotal and total field.
There is no difference between the two since no other values are being added at the moment.
Normally you would subtotal based on items and quantity then you would consider any tax, shipping, discounts, etc and that calculation would become the total. Without other values considered Total and Subtotal are the same.
I included a line to populate each box anyway and you can modify it to do what you need later.

NOTE: Name tags cannot begin with numbers so all Radio buttons were prefixed with R. ID tags were needed for the table cells containing your total and subtotal values so the text inside those cells could be changed.
I also added an onload event in the body tag so when the page first loads it executes the function so it will calculate all the default values.

<html>
<head>
<script type="text/javascript">
function viewPrice() {
  var rnum = 0;
  var subtot=0;
  var frm = document.forms['main_form'].elements;
  while (cb = frm['R' + rnum]) {
    for (var x=0;x<cb.length;x++) {
      if (cb[x].checked)
        subtot+= cb[x].value-0;
    }   
   rnum++;
  }
  document.getElementById('SubTotal').innerText = "$" + subtot.toFixed(2);
  document.getElementById('Total').innerText = "$" + subtot.toFixed(2);
}

</script>
</head>
<body [COLOR=blue]onload="viewPrice();"[/color]>
<form action='/cart.php' method=POST name='main_form'>
  <table width="100%" border="0" cellspacing="4" cellpadding="10">
    <tr bgcolor="#D9E9C9">
      <td width="50%" class="body1"><strong>Your Templates</strong></td>
      <td class="body1"width="25%"><strong>Remove</strong></td>
      <td class="body1" width="25%"><strong>Total</strong></td>
    </tr>
    <tr bgcolor="#E9F2DB">
      <td class="body1">Motorcycle Full Throttle</td>
      <td class="body1"><a href='catalog.php?remove=80'><b>Delete</b></a></td>
      <td class="body1"><input [COLOR=blue]name="R0"[/color] type="radio" value="75.00" onclick="viewPrice()" checked>Non-Exclusive: 75.00 <input [COLOR=blue]name="R0"[/color] type="radio" value="700.00" onclick="viewPrice()" >Exclusive: 700.00 </td>
    </tr>
    <tr bgcolor="#E9F2DB">
      <td class="body1">Modern Law Firm</td>
      <td class="body1"><a href='catalog.php?remove=79'><b>Delete</b></a></td>
      <td class="body1"><input [COLOR=blue]name="R1"[/color] type="radio" value="75.00" onclick="viewPrice()" checked>Non-Exclusive: 75.00 <input [COLOR=blue]name="R1"[/color] type="radio" value="500.00" onclick="viewPrice()" >Exclusive: 500.00 </td>
    </tr>
    <tr bgcolor="#F2F7EA">
      <td class="body1">&nbsp;</td>
      <td class="body1"><div align="right">Subtotal:</div></td>
      <td class="body1" [COLOR=blue]id="SubTotal"[/color]></td>
    </tr>

    <tr bgcolor="#F2F7EA"> 
      <td height="39" class="body1">&nbsp;</td>
      <td class="body1"><div align="right">Total:</div></td>
      <td class="body1" [COLOR=blue]id="Total"[/color]></td>
    </tr>
  </table>
</form>
<form name="_xclick" action="[URL unfurl="true"]https://www.paypal.com/cgi-bin/webscr"[/URL] method="post">
  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="business" value="">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="item_name" value="">
  <input type="hidden" name="item_number" value="1">
  <input type="hidden" name="notify_url" value="">
  <input type="hidden" name="return" value="">
  <input type="hidden" name="cancel_return" value="">
  <input type="hidden" name="cn" value="">
  <input type="hidden" name="amount" value="150">
  <input type="image" src="images/checkout.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form> 
</body>
</html>

Stamp out, eliminate and abolish redundancy!

 

[dreamclutch]

Well thank you sir, it works..............had to change var rnum = 0; to equal 1 because I ended up starting my php while loop with it.

This is the best help I've gotten in awhile, .thanks a lot!

- Justin

 

[dreamclutch]

Ahh actually one more thing. How would I integrate the total price into my other paypal form? I need to transfer that variable to the line

<input type="hidden" name="amount" value="total here">

 

[theniteowl]

Add an id tag to the hidden field
<input type="hidden" name="amount" id="amount">

Then add an additional line to the function

function viewPrice() {
  var rnum = 0;
  var subtot=0;
  var frm = document.forms['main_form'].elements;
  while (cb = frm['R' + rnum]) {
    for (var x=0;x<cb.length;x++) {
      if (cb[x].checked)
        subtot+= cb[x].value-0;
    }   
   rnum++;
  }
  document.getElementById('SubTotal').innerText = "$" + subtot.toFixed(2);
  document.getElementById('Total').innerText = "$" + subtot.toFixed(2);
[COLOR=blue]  document.getElementById('amount').value = subtot.toFixed(2);[/color]
}

Stamp out, eliminate and abolish redundancy!

 

[dreamclutch]

Okay, I did that however after viewing the source on the cart page I see the following in the hidden field line:

<input type="hidden" name="amount" id="amount">

Shouldn't the total numeric value appear? or will it transfer after the paypal form is posted?

 

[BillyRayPreachersSon]

Why not try it and find out?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[theniteowl]

I think the problem is you are having trouble differentiating between the server-side code and the client-side code.

In your PHP you are using logic to determine what the output to the screen is when the page loads. PHP runs through and creates all your table rows, creates the incremental field names, etc. As soon as the page is done loading the PHP code stops running.
When it finishes loading you have a static web page that you look at the source of and do not see a value in the code for the hidden form field. You could put a value in there from the beginning but it would not mean anything.

As soon as the page finishes loading the client-side code takes over. The onload event in the body tag executes the function that goes and checks the selected value for every radio button, then it updates the total, subtotal and the hidden amount field. The code you started with shows only the default value you hard-coded, it will not show you what the value is AFTER the client-side code has been executed.

Submit the form to the next page and grab the value of the amount field and you will get the value set there after the viewPrice function runs, not any amount value your PHP code inserted or a hard-coded value.

Stamp out, eliminate and abolish redundancy!