[SOLVED] using input id instead of name when calculating forms

[Kano]

Hi there,

I have this javascript code to calculate form elements:

 

function calc()

{

document.calcform.total1.value = (document.calcform.price1.value)*(document.calcform.quantity1.value)

 

etc......

}

 

the .total1. is the 'name' of the input (text) tag

 

but i would like to use the 'id' of the input tag because i am using the 'name' for something else.

 

Could i just replace the .total1. with the 'id' and it will still work?

[fenway]

There's some weird IE thing with names/IDs... but you could use getElementByID instead.

[Kano]

hi there,

How would one address <select> elements using DOM, for example:

 

document.form[0].element - then I need to add select element[0] (but cannot use the name),

 

how could i do this, many thanks.

[fenway]

I don't understand why you can't use the name... you mean navigating to the options?

[Kano]

the name of the select is a php variable using data from mysql, so I can remember the selection if the user cancels order processing and edits the form.

 

On the form I want to keep running totals for item quantity*price etc...

 

the quantity is a select tag and the price is a readonly input "text" tag.

 

for each item row i would like total cost

 

but i do not know how many item rows there are because the script is built so that i can add more items through mysql.

 

so i need javascript to go through the elements and create the total, i am thinking maybe element by tag name or something??

[fenway]

Even if the rows are dynamic, they're still part of the form, and you can find them again if you name then correctly.

[Kano]

Here is something I am working on:

 

function calc()

{

for (var num=0;num<getElementByTagName("select").length;num++)

{

document.formname.elements[num+2].value = (document.formname.elements[num+1].value) * (document.formname.elements[num].value)

 

// total (3rd element in the row) = price (2nd) * qty (1st)

}

}

 

 

would this work??

[fenway]

Not really... how would you know which elements you were getting? Besides, just name them properly (e.g. qty_N, price_N, etc.) and you'll be able to find them easily.

[Kano]

Hi Fenway,

 

Wonder if you could help me with this please, below is part of the php that creates the form (named order), I am trying to write some javascript that will multiple the price with the selected qty onblur but cannot seem to find the elements as you know, thanks for your help.

 

// get product records in order of brand then range

$sqlqry_getwsi = "select * from tbl_wsi order by wsi_brand, wsi_range";

$sqlres_getwsi = mysql_query($sqlqry_getwsi) or die ("Could not execute getwsi query");

 

// for each row fetched

while($row_getwsi = mysql_fetch_array($sqlres_getwsi))

      {

      extract($row_getwsi);

 

      // print row of items

      echo "<tr><td><img src='$wsi_tn' /></td>

                    <td>$wsi_id</td>

                    <td>$wsi_desc</td>

                    <td>$wsi_dim</td>

                    <td><input type = 'text' value = '$wsi_price' readonly='readonly' /></td> // item price

                    <td><select name='$wsi_id'>"; // item qty ordered, name contains VA001, VB002, VE001, LR005 etc...

 

                    // create options

 

                    for($selectcnt=0;$selectcnt<=$wsi_qty;$selectcnt++) // loop till stock qty exceeded

                        {

                        echo"<option value='$selectcnt'";

 

                      // remember qty selected if user needs to edit order form

                      if($_SESSION[$wsi_id]==$selectcnt)

                        {

                          echo "selected='selected'";

                        } // end if

 

                        echo">$selectcnt</option>";

                        } // end for

 

                    echo "</select></td>

                            <td><input type = 'text' /></td>";

             

          } // end while

 

[fenway]

I assume you want to put the total in the last input?

 

You need to name your inputs with a $wsi_id prefix, like name='quantity_$wsi_id', name='price_$wsi_id', name='total_$wsi_id'... then you can have a general function that simply takes the $wsi_id as a parameter, such as:

 

function gogo( obj, wsi_id ) {
obj.form.elements['total_'+wsi_id].value = obj.form.elements['quantity_'+wsi_id].value * obj.form.elements['price_'+wsi_id].value;
}

 

And add an onchange='gogo(this, \'$wsi_id\' )' to your select.

[Kano]

Hi there Fenway,

 

Thank-you for your time.

 

I will let you know how I get on.

[Kano]

Having problems with this Fenway, it does not seem to work.

[fenway]

That's a little vague... the function will definitely work, post the new code.

[Kano]

Sorry for delay, T'Interent down at home, Only access during working hours (GMT).

 

<head>

<script>

function calc(obj, wsi_id)

{

obj.form.elements['total_'+wsi_id].value = obj.form.elements['qty_'+wsi_id].value * obj.form.elements['price_'+wsi_id].value;

}

</script>

</head>

<body>

...

same as before only:

 

<input type = 'text' name = 'price_$wsi_id' value = '$wsi_price' readonly='readonly' />

<select name='qty_$wsi_id' onchange='calc(this, \'$wsi_id\')'>

<input type = 'text' name = 'total_$wsi_id' readonly='readonly' />

 

 

</body>

 

Thanks.

[fenway]

Do you get any JS errors?

[Kano]

Hi there fenway,

 

No JS errors. It just does not register anything?

[Kano]

Hi there Fenway,

 

I take it 'obj' holds 'this' which means this 'document'?

 

And when the select input changes it then reads the function and adds the total of the sum to the input box total.

 

Should there be any brackets around the sum?

 

Should there be a semi-colon after the sum?

 

Should there be <!-- --> in the <script>?

 

Maybe I will run the script through FireFox instead of IE and see what happens.

 

It looks like it should work? I cannot see any reason to suggest otherwise?

 

[Kano]

Hi there,

 

I have recreated this problem in static HTML to see if I can find any problems. The problem I am now getting at the moment is onchange the total is calculated to 0 every time, here is the code:

 

<script>

function gogo (obj)

{

obj.form.elements['total_VB001'].value = (obj.form.elements['price_VB001'].value) * (obj.form.elements['qty_VB001'].value);

return;

}

</script>

 

<form id="orderform" name="orderform" method="post" action="">

<table><tr><td>

  <input type="text" name="price_VB001" value="122.99" readonly="readonly" /></td><td>

  <select name="qty_VB001" onchange="gogo(this)">

    <option selected="selected">0</option>

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    <option>5</option>

  </select></td><td>

  <input type="text" name="total_VB001" readonly="readonly" /></td></tr>

  </table>

</form>

 

 

Any ideas what is wrong with this? Thanks.

[fenway]

Nothing wrong with that at all... works pefectly for me in FF.

[Kano]

Hi there,

You are right is does work in FireFox, try it in IE!!

 

Anyone know why it gives the result as 0 in IE??

 

thanks.

[Kano]

I have added the toFixed function to round to 2 decimals but still same problem in IE (0.00), FireFox is fine.

[Kano]

Sussed it!!!! Woooooooooo

 

Added attribute value="0" ect... to the options in the select, now IE likes that??

 

Thanks for your help Fenway.

 

I am sure its not the end...

[Kano]

Hi there again Fenway,

 

Problem solved - what i have do is changed the onchange = 'calc(this, \'$wsi_id\')'  TO onchange = 'calc(this, \"$wsi_id\")'

 

And it likes it, don't know why but it does??

 

Thanks for your time.

[fenway]

Well, yes, you need to make sure the quoting is correct.