0

I have three form inputs for people to input certain tax rates(tax_one, tax_two, sales_tax) and then i have a row of inputs for an item for purchase. This row has price, tax_one, tax_two, and sales_tax.

I'm trying to figure out how to go about populating the tax fields for the item based on what the user inputs for their tax rates and the price of the item. One tricky thing is there could be several item rows on the page at once so i am using "[]" after the form input names to get an array when they submit.

heres a jsfiddle of the html so you can get an idea of what i'm trying to explain. http://jsfiddle.net/SU5jU/3/

Ideally, when a user changes that default "100.00" in the price[] field the three tax fields after it would auto-populate to their respective amounts based on the above form tax fields. I don't know if this is possible since i'm using the "[]" on the form names.

David
  • 10,418
  • 17
  • 72
  • 122
  • 2
    I've re-read the above a few times and I'm still not quite sure why you are using `[]` in the form names? – HurnsMobile Nov 01 '11 at 16:54
  • because i can have as many form inputs with the name "price[]" and the values will be indexed. I wrote some javascript that dynamically adds rows of items with form input inputs and i had to name them all the same thing. – David Nov 01 '11 at 17:24

2 Answers2

2

Here is an updated version of your jsfiddle: http://jsfiddle.net/SU5jU/6/

I added ID's to the form inputs, if you want to add more rows of totals just increase the integer in the ID's for that row by one (I added another row of totals to the updated jsfiddle so you can see this).

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • Could you possibly explain how come i can't set my own indexes? The issue i'm foreseeing is that sometimes there will be item rows on the page onload and then if i dynamically add more via javascript the indexing will be messed up. http://jsfiddle.net/SU5jU/8/ – David Nov 01 '11 at 17:33
  • I updated my jsfiddle to work with no ids: http://jsfiddle.net/SU5jU/9/ . I used the `.next()` function to update the tax fields for each price. However when you add more rows via JavaScript you can always check how many rows there are and start your index on the next number: `$('[name="price[]"]').length` will return the number of price inputs are currently on the page. – Jasper Nov 01 '11 at 17:45
  • this is perfect. thank you again. I could never have figured that out. – David Nov 01 '11 at 17:57
  • wait! one last thing please! is there a javascript/jquery function that only gets the numerical value of the form inputs? i've noticed if i enter in letters the inputs get populated with "NaN". – David Nov 01 '11 at 18:01
  • actually, how could you write it to only update on a row by row basis. Instead of changing all inputs when i change something. I'd only like to change that row. Bind everything to the prices. So when i update one rows price only that row of tax inputs gets changed and not all the other. http://jsfiddle.net/SU5jU/11/ – David Nov 01 '11 at 18:20
  • You can use a regular expression (regex) to remove all letters: ;http://jsfiddle.net/SU5jU/12/ . I used replace like this: `.replace(/[a-z]|[A-Z]/g, '')`. This is not a complete solution since the user could enter other characters than letters however this will get you started on the correct path. I don't know of it specifically but if you search google for a jQuery plugin I'm sure there is one that will mask user input to only allow numbers to be input. – Jasper Nov 01 '11 at 18:22
  • I updated your fiddle to only calculate the taxes for the row that had the price change: http://jsfiddle.net/SU5jU/13/ . All I had to do was remove the loop and change the `$value = $(value)` to `$value = $(this)`. – Jasper Nov 01 '11 at 18:38
  • hmm..i've been fiddling with this for way too long. Won't seem to work on my page. I can't get the next('input') function to work. I've also noticed this won't work when i dynamically added rows via javascript because the dom is being loaded on document ready – David Nov 01 '11 at 20:26
  • i didn't think it would matter but i think it breaks because the inputs are in a table http://jsfiddle.net/SU5jU/15/ – David Nov 01 '11 at 20:32
  • Here ya go (http://jsfiddle.net/SU5jU/16/), the code now uses the structure of the table to find the necessary inputs. I changed `.bind()` to `.live()` so that inputs you add later with JavaScript will have the event handler attached (http://api.jquery.com/live/). In the future it is a good idea to post code that resembles your actual code as much as possible. – Jasper Nov 01 '11 at 20:52
  • wow you're awesome. Its working perfectly. I can not thank you enough for answering and putting up with all my questions and requests. THANK YOU – David Nov 01 '11 at 21:04
0

Is this the actual HTML that you are using on the page?

If it is, and you cannot change it at all (Ie - adding classes, wrapping the form sections in divs...) then you are going to have a problem as those [] are not friendly to the jQuery attribute selector.

HurnsMobile
  • 4,341
  • 3
  • 27
  • 39