AJAX type quote form

I have a html form which I will be using to send quotes. One of the fields is 'packages' and for each package the user will have to enter dimensions such as height, width and length.

What I'd like to do is implement something whereby depending on the number of packages the user enters, the corresponding number of fields for height, width and length show up in my form.

I'd like to pick the simplest method for this as I don't have a great deal of time to work with the code. One possibility was to just have a textarea box where the user could enter a new line for each package, but this isn't a very good system.

Can anyone recommend a good solution to this problem, or how I can have some code whereby when the package field is updated the corresponding number of fields shows below in a matrix of some sort?

All this information will later be emailed so it would be good to have it stored in a variable or array which is easy to print out. Thanks for any help, :thumb:

Thanks,

I'd probably have a table (preferably created and appended to the DOM with jQuery, so it doesn't exist in your non-Javascript solution, unless it's needed), to which I'd append a row for each package's dimensional inputs. The rows would be generated by a function set up on the "number of packages" input's .change() listener; the function would get the value of the input, as well as the number of rows in the aforementioned table, compare the two, and append or delete rows as needed.

To name the input fields, if you're using PHP, name them in array format:

Code:

---

<input type="text" name="package_width[]" value="1"/>
<input type="text" name="package_width[]" value="2"/>
<input type="text" name="package_width[]" value="3"/>

---

PHP Code:

---

<?php
print_r($_POST['package_width']);
/*
Array
(
    [0] => 1
    [1] => 2
    [2] => 3
)
*/
?>

---

Hi thanks for that. I've started off with the .change event listener:

Code:

---

        $('.packages').change(function() {       
                  // alert('Handler for .change() called.'+$(this).val());
                  $('.app').remove();
                 
                  // Get number of packages
                  packageNum = $(this).val();
                 
                  // make sure packages is more than 0 and no greater than 10
                  if (packageNum>0 && packageNum < 11) {
                        // add the table lines
                        var newContent = $("<table class='app'><tr><th>Dimensions (H x W x L)</th></tr>");
                        $(".packages").after(newContent);
                                               
                        $('.packages').append('</tr></table>');
                       
                  } else {
                  alert('You can only choose a value from 1 to 10');
                  $('.packages').val('Packages');
                  }
                });

---

The problem I'm having is to figure out 2 things:

1. How do I find out existing number of rows in the table? I could then compare it with 'packageNum' to decide whether to append or remove fields.

2. How do I do the actually appending/removing of the table rows? I understand there must be a loop of some sort, and yes I am using php so I would use a similar input text format as you've described above. But still need some help with this bit.


Ok, after that bits sorted what I will do is confirm the table rows are not empty (basic validation) and then send to the php file.

Thanks :)

1. Given a table with id "myTable": $('#myTable tr').length From that, you'll want to subtract 1 to account for your header row (or put your header row in a <thead> tag, and the rest of your rows in <tbody>, then select only those in tbody: $('#myTable tbody tr').length).

2. Compare the number of rows the user has requested with the current number of rows in the table; if they want more, append more with a string representing your table row; if they want fewer, you can use the eq() function to determine which is the last table row in the table at a given loop, and keep taking off the last one until there are only as many left as requested. This may not be perfect yet, but something like...

Code:

---

var current_number_of_rows = $('#myTable tr').length;

if(number_of_requested_rows <= max_rows_allowed && number_of_requested_rows > 0){
  if(number_of_requested_rows > current_number_of_rows){
    while(current_number_of_rows++ < number_of_requested_rows){
      $('#myTable').append( '<tr><td><input type="text" name="dim1[]"/><td></tr>' );
    }
  }else{
    while(current_number_of_rows-- > number_of_requested_rows){
      $('#myTable tr').eq( $('#myTable tr').length - 1 ).remove();
    }
  }
}

---

That's great, thanks for that. I'll use it as a starting point and have a play with it. Cheers:)

Thanks for your help so far.

I'm having trouble sending the array to my php file. I'm sending it via jQuery.ajax().

In order to check the code I'm using alert() to find out what I'm sending. The variable is as follows:

Code:

---

var packagedims = jQuery('input#packagedims').val();

---

And also:

Code:

---

+ '&packagedims[]=' + packagedims +

---

However, only the first input text field is being passed.

What am I doing wrong? I've tried adding '[]' to the lines above but it's causing errors. Another thing I've read is possibly using Serialize() but again I'm not sure how to implement this correctly.

Can you help?

If you've set up your inputs in this fashion...

Code:

---

<input type="text" name="package_width[]" value="1"/>
<input type="text" name="package_width[]" value="2"/>
<input type="text" name="package_width[]" value="3"/>

---

...then you can access their values with $('input[name="package_width[]"]'), but it will be a collection of elements - it won't have a singular value. If you want to see each value, you'll have to loop the collection:

Code:

---

for(var i = 0;i< $('input[name="package_width[]"]').length ; i++){
  alert( $('input[name="package_width[]"]').eq(i).val() );
}

---

To construct the data for AJAX sending, yes, serialize() should do the job, and you can simply use it on the whole form, if that works for you:

Code:

---

$.post('send_to.php', $('form').serialize() , function(data){});
//you can use $.ajax() too, I'm just not as accustomed to it

---

...or if you just want to use it on the packagedims inputs:

Code:

---

'...&' + $('input[name="package_width[]"]').serialize() + '...'

---

serialize() outputs the key and value pairs together (so you don't need to write the 'key=' yourself).