I'm using this code to send data to my sheet.
For The FullName, Phone, Address, ..., data is sent with no problem.
But I'm blocked to split and push value input radio data and send it to my sheet.
Example if the second input of radio is selected ( sku_order_2|quantity2|price22 )
sku = sku_order_2 quantity = quantity2 price = price22
const scriptURL = 'https://script.google.com/........'
const form = document.forms['formName']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})<form action="" name="formName" method="post" id="formName" data-redirect="" class="form">
<input id="order1" class="variant" type="radio" name="order" value="sku_order_1|quantity1|price15" hidden="" checked="">
<input id="order2" class="variant" type="radio" name="order" value="sku_order_2|quantity2|price22" hidden="">
<input id="order2" class="variant" type="radio" name="order" value="sku_order_3|quantity3|price26" hidden="">
<input id="fullname" class="input" type="text" placeholder="Fullname" name="fullname" required="">
<input id="phone" class="input" type="number" placeholder="Phone" name="phone" required="">
<input id="address" class="input" type="text" placeholder="Address" name="address" required="">
</form>Use the FormData methods (https://developer.mozilla.org/en-US/docs/Web/API/FormData)
You can get the order value with formData.get('order')
than you can split (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) the string and use the result to append the fields: sku, quantity, price.
const scriptURL = 'https://script.google.com/........'
const form = document.forms['formName']
form.addEventListener('submit', e => {
e.preventDefault()
const formData = new FormData(form)
const order = formData.get('order').split('|') // Split the string using '|' into an array [sku, quantity, price]
formData.append('sku', order[0])
formData.append('quantity', order[1])
formData.append('price', order[2])
formData.delete('order')
fetch(scriptURL, { method: 'POST', body: formData})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})<form action="" name="formName" method="post" id="formName" data-redirect="" class="form">
<div>
<input id="order1" class="variant" type="radio" name="order" value="sku_order_1|quantity1|price15" checked=""> 1
<input id="order2" type="radio" class="variant" name="order" value="sku_order_2|quantity2|price22"> 2
<input id="order3" class="variant" type="radio" name="order" value="sku_order_3|quantity3|price26"> 3
</div>
<input id="fullname" class="input" type="text" placeholder="Fullname" name="fullname" required="">
<input id="phone" class="input" type="number" placeholder="Phone" name="phone" required="">
<input id="address" class="input" type="text" placeholder="Address" name="address" required="">
<input type="submit" value="Send">
</form>If you want to split the order property, you can do the following:
order values from formData|sku, quantity and pricesku, quantity and price to formDataSee this fiddle: https://jsfiddle.net/Lxujkotp/1/
Extended Code:
form.addEventListener('submit', e => {
var data = new FormData(form);
var order = data.get('order');
var orderParts = order.split('|');
// WARNING: if the "order values" does not have a fix ordering, map the values here more sophisticated!
var sku = orderParts[0];
var quantity = orderParts[1];
var price = orderParts[2];
e.preventDefault();
data.delete('order');
// approach 1: plain
data.set('sku', sku);
data.set('quantity', quantity);
data.set('price', price);
// alternative approach 2: nested
// data.set('order', JSON.stringify({
// sku: sku,
// quantity: quantity,
// price: price
// }));
fetch(scriptURL, { method: 'POST', body: data })
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
});