I am creating an order form that has a table of order items users can purchase. The inputs are using data attributes to store the items name and price per piece like so:
<input type="text" class="input-small quantity-input" data-pid="<?php echo $p['id']; ?>" data-min="<?php echo $p['min_qty']; ?>" data-max="<?php echo $p['max_qty']; ?>" data-price="<?php echo $p['price']; ?>" data-name="<?php echo $p['product_name']; ?>" placeholder="quantity...">
I have everything figured out except for how to iterate over each quantity-input item and add it to a multidimensional array that I can send via an AJAX Post. I currently have the following code, but when I do a print_r on the $_POST value it says: Disallowed Key Characters: Fresh Tilapia Filets
$("#ccform").validate({
rules: {
firstName: { required: true },
lastName: { required: true },
email: {
required: true,
email: true,
},
cardNumber: { required: true },
expMonth: { required: true },
expYear: { required: true },
cvv: { required: true },
address: { required: true },
city: { required: true },
state: { required: true },
zipcode: { required: true },
phone: { required: true },
},
submitHandler: function() {
var siteUrl = $('#siteUrl').val();
var orderItems = [];
$('.quantity-input').each(function(){
var orderItem = $(this).attr('data-name');
var priceEach = $(this).attr('data-price');
var qty = $(this).val();
if(qty != '') {
obj = {};
obj[orderItem] = orderItem;
obj[priceEach] = priceEach;
obj[qty] = qty;
orderItems.push(obj);
}
});
var pickupLocation = $('input[name="pickup"]:checked').val();
var pickupPrice = $('#hidePickupPrice').val();
var subtotal = $('#hideSubtotal').val();
var tax = $('#hideTax').val();
var total = $('#hideTotal').val();
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var email = $('#email').val();
var cardNumber = $('#cardNumber').val();
var expMonth = $('#expMonth').val();
var expYear = $('#expYear').val();
var cvv = $('#cvv').val();
var address = $('#address').val();
var address2 = $('#address2').val();
var city = $('#city').val();
var state = $('#state').val();
var zipcode = $('#zipcode').val();
var phone = $('#phone').val();
$.ajax({
type: "POST",
url: siteUrl + "frontend/pay",
data: ({ 'orderItems': orderItems, 'pickupLocation': pickupLocation, 'pickupPrice': pickupPrice, 'subtotal': subtotal, 'tax': tax, 'total': total, 'firstName': firstName, 'lastName': lastName, 'email': email, 'cardNumber': cardNumber, 'expMonth': expMonth, 'expYear': expYear, 'cvv': cvv, 'address': address, 'address2': address2, 'city': city, 'state': state, 'zipcode': zipcode, 'phone': phone}),
success: function(data) {
alert('done!');
}
});
},
});
I don't usually get into Jquery this much, so it may just be a noob problem with the formatting of the jquery object. Also, I'm using Codeigniter for the PHP framework. You can see the live version here
To clarify, this is the area of the code I need help with. It is not creating a multi dimensional object / array:
var orderItems = [];
$('.quantity-input').each(function(){
var orderItem = $(this).attr('data-name');
var priceEach = $(this).attr('data-price');
var qty = $(this).val();
if(qty != '') {
obj = {};
obj[orderItem] = orderItem;
obj[priceEach] = priceEach;
obj[qty] = qty;
orderItems.push(obj);
}
});
I am creating an order form that has a table of order items users can purchase. The inputs are using data attributes to store the items name and price per piece like so:
<input type="text" class="input-small quantity-input" data-pid="<?php echo $p['id']; ?>" data-min="<?php echo $p['min_qty']; ?>" data-max="<?php echo $p['max_qty']; ?>" data-price="<?php echo $p['price']; ?>" data-name="<?php echo $p['product_name']; ?>" placeholder="quantity...">
I have everything figured out except for how to iterate over each quantity-input item and add it to a multidimensional array that I can send via an AJAX Post. I currently have the following code, but when I do a print_r on the $_POST value it says: Disallowed Key Characters: Fresh Tilapia Filets
$("#ccform").validate({
rules: {
firstName: { required: true },
lastName: { required: true },
email: {
required: true,
email: true,
},
cardNumber: { required: true },
expMonth: { required: true },
expYear: { required: true },
cvv: { required: true },
address: { required: true },
city: { required: true },
state: { required: true },
zipcode: { required: true },
phone: { required: true },
},
submitHandler: function() {
var siteUrl = $('#siteUrl').val();
var orderItems = [];
$('.quantity-input').each(function(){
var orderItem = $(this).attr('data-name');
var priceEach = $(this).attr('data-price');
var qty = $(this).val();
if(qty != '') {
obj = {};
obj[orderItem] = orderItem;
obj[priceEach] = priceEach;
obj[qty] = qty;
orderItems.push(obj);
}
});
var pickupLocation = $('input[name="pickup"]:checked').val();
var pickupPrice = $('#hidePickupPrice').val();
var subtotal = $('#hideSubtotal').val();
var tax = $('#hideTax').val();
var total = $('#hideTotal').val();
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var email = $('#email').val();
var cardNumber = $('#cardNumber').val();
var expMonth = $('#expMonth').val();
var expYear = $('#expYear').val();
var cvv = $('#cvv').val();
var address = $('#address').val();
var address2 = $('#address2').val();
var city = $('#city').val();
var state = $('#state').val();
var zipcode = $('#zipcode').val();
var phone = $('#phone').val();
$.ajax({
type: "POST",
url: siteUrl + "frontend/pay",
data: ({ 'orderItems': orderItems, 'pickupLocation': pickupLocation, 'pickupPrice': pickupPrice, 'subtotal': subtotal, 'tax': tax, 'total': total, 'firstName': firstName, 'lastName': lastName, 'email': email, 'cardNumber': cardNumber, 'expMonth': expMonth, 'expYear': expYear, 'cvv': cvv, 'address': address, 'address2': address2, 'city': city, 'state': state, 'zipcode': zipcode, 'phone': phone}),
success: function(data) {
alert('done!');
}
});
},
});
I don't usually get into Jquery this much, so it may just be a noob problem with the formatting of the jquery object. Also, I'm using Codeigniter for the PHP framework. You can see the live version here
To clarify, this is the area of the code I need help with. It is not creating a multi dimensional object / array:
var orderItems = [];
$('.quantity-input').each(function(){
var orderItem = $(this).attr('data-name');
var priceEach = $(this).attr('data-price');
var qty = $(this).val();
if(qty != '') {
obj = {};
obj[orderItem] = orderItem;
obj[priceEach] = priceEach;
obj[qty] = qty;
orderItems.push(obj);
}
});
- Did you know about api.jquery./serializeArray? – elclanrs Commented Jun 8, 2013 at 20:54
- Yes I could easily serialize the bottom credit card form. I'm not asking about that. I'm asking how I can create the jquery equivalent of a multidimensional array by using the .each function on the quantity-inputs since those inputs use data elements to specify what items are being ordered. – Daniel White Commented Jun 8, 2013 at 20:57
- 1 All javascript arrays are uni-dimensional. However, they can be nested, one inside another. – Beetroot-Beetroot Commented Jun 8, 2013 at 21:01
- Maybe this/JSON could help: iviewsource./codingtutorials/…? Off topic, but, i hope that your client will not collect credit card data from customers? – sinisake Commented Jun 8, 2013 at 21:04
- no this is a setup to use Authorize CIM. Its PCI pliant. – Daniel White Commented Jun 8, 2013 at 22:04
1 Answer
Reset to default 5You need to quote your keys:
obj['orderItem'] = orderItem;
obj['priceEach'] = priceEach;
obj['qty'] = qty;
Or use dot notation:
obj.orderItem = orderItem;
obj.priceEach = priceEach;
obj.qty = qty;
Without the quotes/dot notation its like saying:
obj['Fresh Tilapia Filets'] = 'Fresh Tilapia Filets';
obj['$2.99'] = '$2.99';
obj[10] = 10;
Because its evaluating the variables with the same name.