getElementById Help

@iceman2gOct 14.2004

I’m new to javascipt and am having some trouble. What i’m trying to do it update the price on a page when option is selected from a drop down menu. The selection in the drop down menu comes from a table in the database.

I’m pretty sure that i’m missing something in regards to way in which getElementById should be used.

This is the code i’m using.

[code=php]function changeText(whichText, changeShipping) {

var total_ship = 15.99;

if (changeShipping.value == “<? echo $ship_op_selection; ?>”) { document.getElementById(whichText).innerText = total_ship; document.checkout.total_ship.value = total_ship; } }[/code]

When any of the options in the drop down menu is selected the text doesn’t update.

If you need more info let me know.

Thanks in advance

to post a comment

JavaScript

28 Comments(s) _↴

@JPnycOct 14.2004 — #ID should be in quotes.

@iceman2gauthorOct 14.2004 — #Just made those changes. I'm gettin this error.
document.getElementById(...)' is null or not an object[/quote]

@KenHOct 14.2004 — #Try...

document.getElementById([B]'whichText'[/B]).innerText = total_ship;

The ID is case sensitive, so double check how it's spelled.

@fredmvOct 14.2004 — #[i]Originally posted by KenH [/i]

[B]document.getElementById([B]'whichText'[/B]).innerText = total_ship;[/B][/QUOTE]It should be noted that [font=courier]whichText[/font] is a function argument. Thus, it should remain unquoted.

The code looks alright except for the use of [font=courier]innerText[/font]. This is bad because it's non-standard (read: IE-only). To dynmically modify the text within any given element, use instead [font=courier]firstChild.nodeValue[/font]. In any case, it looks like we'll need a link so we can see this in action.

@iceman2gauthorOct 14.2004 — #This might make this a lil easier. Here's the code for the drop down menu.

[code=php]echo"</select></td></tr>
 <tr bgcolor='$colour_1'>
 <td colspan='$colspan' align='right'><b>Shipping Method:</b></td>
 <td align='right'>";
 $sql_select = mysql_query( "select * from billing");
 
   echo"<select name="ship_op_selection" onChange="changeText('displaypayable', this)">";
   echo"<option>Please select</option>";
   while ($row = mysql_fetch_array($sql_select))
   {
   $ship_op = $row['method'];
 
   echo"<option value="$ship_op">$ship_op</option>";
   }
 
   echo"</select></td></tr>";[/code]

I want the the display amount to update accordingly depending on which option is chosen from the drop down menu.

@fredmvOct 14.2004 — #Based on the previous JavaScript error you posted, and after seeing more of the code involved with this, it's become quite obvious that the element you're trying to access doesn't exist (or at least, you're addressing it incorrectly). Right here:changeText('displaypayable', this)Make sure that somewhere else in the document you have an element with its [font=courier]id[/font] attribute set to exactly "displaypayable" and in that same case.

@iceman2gauthorOct 14.2004 — #Sorry I didn't post that earlier.
[code=php]<td align="center"><span id="displaypayable">$total_ship</span></td>[/code]

Also the only time I see to get that error I when I scroll to one of the "Please Select" in the drop down menu. Other than that I can scroll to any other option in the drop down menu and i'll get no errors.

@iceman2gauthorOct 14.2004 — #Anymore ideas??

@iceman2gauthorOct 14.2004 — #Ok I found out why I was getting the error. I didn't specify a value for "<option>Please select</option>". Still not getting the text to update though.

@fredmvOct 15.2004 — #As I said before, may we please have a link to the page in question? It makes it quite a bit easier to debug if we can see the generated (read: parsed) server-side code.

@iceman2gauthorOct 15.2004 — #It's on a local server (my home machine).

@fredmvOct 15.2004 — #OK then, view it locally and then provide us with the parsed code.

@iceman2gauthorOct 15.2004 — #sorry for the newb question.

parsed?

@fredmvOct 15.2004 — #No problem. What I'm referring to is the fact that [i]after[/i] the server-side code runs, and you view the page locally in the browser, you won't see any PHP; rather the HTML output from your [font=courier]echo[/font] calls. I'm just sayins view the page locally, and then view the source of the page. This is what we want to be looking at.

@iceman2gauthorOct 15.2004 — #Ok thank you for that. Page doesn't show source when you click "view source".?

@iceman2gauthorOct 15.2004 — #Ok found the problem. Seems I had several "<span id="displaypayable">$total_ship</span>" on the same page.

Now I just gotta figure out how to make the text (price) update according to the selection in the drop down menu.

@iceman2gauthorOct 15.2004 — #Is there a way to get the price update based on drop down menu selection.

here's what i'm doing.

[code=php]
 <script>
 
 function changeText(whichText, changeShip) {
 
 var total_ship = 9;
 
 if (changeShip.value == "<? echo $ship_op; ?>") {
 document.getElementById(whichText).innerText = total_ship;
 }
 }
 </script>
 <?
 echo"</select></td></tr> 
 <tr bgcolor='$colour_1'> 
 <td colspan='$colspan' align='right'><b>Shipping Method:</b></td> 
 <td align='right'>"; 
 $sql_select = mysql_query( "select * from billing"); 
 
   echo"<select name="ship_op_selection" onChange="changeText('displaypayable', this)">"; 
   echo"<option>Please select</option>"; 
   while ($row = mysql_fetch_array($sql_select)) 
   { 
   $ship_op = $row['method']; 
 
   echo"<option value="$ship_op">$ship_op</option>"; 
   } 
 
   echo"</select></td></tr>";
 ?>[/code]

@iceman2gauthorOct 16.2004 — #?

@iceman2gauthorOct 16.2004 — #Ok using != seem to get it working.

I'm using this, to get the value of the option in the drop down menu.
[code=php]var total_ship = "<? mysql_query( "select value from billing where method='$ship_op_selection'"); ?>";[/code]

Here's the code for the drop down menu.

[code=php]echo"</select></td></tr> 
 <tr bgcolor='$colour_1'> 
 <td colspan='$colspan' align='right'><b>Shipping Method:</b></td> 
 <td align='right'>"; 
 $sql_select = mysql_query( "select * from billing"); 
 
   echo"<select name="ship_op_selection" onChange="changeText('displaypayable', this)">"; 
   echo"<option>Please select</option>"; 
   while ($row = mysql_fetch_array($sql_select)) 
   { 
   $ship_op = $row['method']; 
 
   echo"<option value="$ship_op">$ship_op</option>"; 
   } 
 
   echo"</select></td></tr>"; [/code]

I take it i'm missing something.

@iceman2gauthorOct 17.2004 — #Any suggestions?

@javaNoobieOct 18.2004 — #can you please post/attach/link the generated html codes?

@iceman2gauthorOct 18.2004 — #I can't view the source. I right click and select view source and it doesn't open.

@fredmvOct 18.2004 — #It sounds like your browser is junk. Try a [url=http://getfirefox.com/]real browser[/url] and see if the problem persists.

@iceman2gauthorOct 18.2004 — #Haha, yeah i'm using IE. Here's the text file.

http://www.x-tremepcshq.com/pics/xpcshq/source.txt

@javaNoobieOct 19.2004 — #In IE, line 138 throws an error
var total_ship = ;

@HaganeNoKokoroOct 19.2004 — #Is that total_ship line supposed to get filled in server-side? 'Cuz it looks like it's not...

This[code=php]var total_ship = "<? mysql_query( "select value from billing where method='$ship_op_selection'"); ?>";[/code]should be something more like

[code=php]var total_ship = "<? 
 $result=mysql_query( "select value from billing where method='$ship_op_selection'"); 
 $line=mysql_fetch_row($result);
 echo $line[0];
 ?>";[/code]

@iceman2gauthorOct 19.2004 — #i've acutally tryed that but didn't work.?

@HaganeNoKokoroOct 19.2004 — #Having given things another read, I think you are trying to mix javascript and php in the wrong way. They can't talk to each other like you seem to be trying. The code I had can only work if, when the shipping option is chosen, the form goes back to the server with the shipping option selection as a GET or POST variable. But I don't think that's happening. To get the value of the select-list, you have to use something like thisvar total_ship = document.checkout.ship_op_selection.value;However, currently your options have values like "Xpresspost" rather than shipping cost numbers. If you have the server-side php write a javascript array with the shipping costs for each option by name

$result=mysql_query( "select * from billing");
 echo "var shipping_costs_array=Array();n";
 while($line=mysql_fetch_row($result)) {;
 echo "shipping_costs_array[$line['".$method."']=".$line['value'].";n" 
 }

And then in the changeText and changePrice functionsvar total_ship = shipping_costs_array[document.checkout.ship_op_selection.value];Then you will be able to get the shipping cost for the option selected

Also in #JavaScript _↴

Error: Object Missing.. *ugh*Basic JS Menu Alignment Question IE fails to upload images

Success!

Help @iceman2g spread the word by sharing this article on Twitter...

Tweet This

getElementById Help

28 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

getElementById Help

28 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #JavaScript _↴