• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3595
  • Last Modified:

Ajax or Javascript to add text input fields

I have a form that asks users to fill in the quantity of an item they have sold. The form has about 20 products, each with a text input field to enter the quantity. I now find that I also need to capture each item's serial number.

I would like to design the form so that if the user enters 4 as the quanity purchased, four text input fields appear below the original, to accept the serial number information.

I would prefer this be done using AJAX. I am already using some AJAX on the page using Rafael Dohms brilliant autocomplete script for the company field, and I have used some other AJAX code on my site, but they have been modifiations of published scripts. I am not a Java/AJAX guru myself.  

I am using PHP for the server side. I would also prefer to use AJAX to verify the serial numbers on the fly.

I really appreciate your help.

0
birwin
Asked:
birwin
  • 4
  • 3
1 Solution
 
Russell2566Commented:
Here is what I would do in a nutshell... ok a big nutshell. This is fully working aside from the fact that I don't doany numerical validation in the function on the number sold...


<html>

<head>
      <script>
            function evalProd(input) {
                  var html = "";
                  var inputName = "";
                  var numSold = input.value;
                  var product = input.name.split("_")[0];

                  for (var n=0; n < numSold; n++) {
                        inputName = product + "_" + n + "_serial";
                        html += 'Serial #' + (n+1) + ' <input type="text" name="' + inputName + '"><br>';
                  }

                  document.getElementById(product + "_serials").innerHTML = html;
            }
      </script>
</head>
<body>

      <table>
            <form action="#" method="post">
            <tr>
                  <td>Product A</td>
                  <td><input type="text" name="productA_quantity" value="" onChange="evalProd(this);"></td>
            </tr>
            <tr>
                  <td colspan="2" align="right"><div id="productA_serials"></div></td>
            </tr>
            <tr>
                  <td>Product B</td>
                  <td><input type="text" name="productB_quantity" value="" onChange="evalProd(this);"></td>
            </tr>
            <tr>
                  <td colspan="2" align="right"><div id="productB_serials"></div></td>
            </tr>
            <tr>
                  <td>Product C</td>
                  <td><input type="text" name="productC_quantity" value="" onChange="evalProd(this);"></td>
            </tr>
            <tr>
                  <td colspan="2" align="right"><div id="productC_serials"></div></td>
            </tr>
            <tr>
                  <td colspan="2" align="right"><input type="submit"></td>
            </tr>
            </form>
      </table>
      
      <cfdump var="#form#">

</body>
</html>
0
 
birwinAuthor Commented:
Is there a way to make the serial number an array?

Is there a way to verify the serial number without a submit? (correct number of digits, starts with corect three alpha characters, has been entered) My concern is that if a person makes a mistake on one of 20 serial numbers, and my server side program rejects their input, they will have to re-enter everything once that return to the input page, since the serial number fields will have disappeared.



0
 
birwinAuthor Commented:
PS: Thank you for that code. It worked perfectly "out of the box".

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
HTorresCommented:
Excelent code Russell2566 !!
0
 
birwinAuthor Commented:
Dear Russell2566:

When I tried to integrate your code, I discovered that my input variables are arrays.

e.g. <input type='text' name='prod[PC900]' value='' size='6'>

Is it possible to work with this? Would it be possible to have the serial numbers in a compund array such as
prod_serial[PC900][1]
prod_serial[PC900][2]

I will gladly award extra points for this additional help

Brian
0
 
Russell2566Commented:
Do you mean in a compund array as far as the form is concerned?

In my example I use N to give each field it's own unique name. However if you name each serial field for product PC900 "prod_serial[PC900]" (esssnetially removing the unique identifier and having multiple input fields with the same name PER product), on the next page you would only get one serial field of comma delimited values on the next page...
0
 
Russell2566Commented:
...you would only get one serial field of comma delimited values on the next page PER PRODUCT...
0
 
birwinAuthor Commented:
Dear Russell2566

I was hoping for a compound array

serial #1  "prod_serial[PC900][1]"
serial #2  "prod_serial[PC900][2]"
serial #3  "prod_serial[PC900][3]"

I tested using compound arrays in input statements and it works, using a PHP backend with Explorer 6 and each returns the correct value.

By the way, I am happy to reward more points for the follow up. Your original code is brilliant, and gave me exactly what I asked for. I had forgotten that I had used arrays in my code, and more importantly in my processing program.

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now