I’m currently trying to make a page that displays multiple copies of the same form. The idea is to have a faster way of submitting orders into our system. I’m trying to do it by displaying a page that shows the form multiple times, each one in a row of a table, and I configured the submit button to submit that specific instance of the form.
The submit button invokes a Stripe payment window, which will then make an AJAX call to POST the data into my controller.
If I have one copy of the form everything works fine, but when I try to have multiple copies, anything after the first copy gets the data confused. I’m assuming this is because of the form field IDs, which are non-unique at this point since there’s more than one copy of the form.
Is there a way I can get around this and still use my form model? Or would I have to make a custom form in order to have unique form field IDs using the for loop’s index?
Edit: I know I can collect data as tabular input but I need each form separated because there would be a Stripe charge for each form separately.
The form is a partial, that way I can render it multiple times. This is my main view:
<?php
/* @var $this DefaultController */
/* @var $model MyModel */
?>
<?php
// Start by displaying three copies of the form
for($i = 0; $i < 3; $i++) {
echo $this->renderPartial('_plannerForm', array('model' => $model, 'i' => $i));
}
?>
This is the partial:
<?php
/* @var $this DefaultController */
/* @var $model MyOrderForm */
/* @var $i integer */
// Make the form id based on the index of the for loop from the view
$formId = 'order-form'.'-'.$i;
$form = $this->beginWidget('CActiveForm', array(
'id' => $formId,
'enableClientValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
),
'htmlOptions' => array(
'class' => 'fs-form fs-form-full',
'autocomplete' => 'off'
)
));
?>
<div>
<div>Name <?php echo $form->textField($model, "name", array('placeholder' => 'What is your full name', 'class' => ''));?></div>
<div>Friend's Name <?php echo $form->textField($model, "friend_name", array('placeholder' => 'Enter their full name', 'class' => ''));?></div>
<div>Phone Number <?php echo $form->textField($model, "friend_phone_number", array('placeholder' => 'Enter their phone number', 'class' => '')); ?></div>
<div>Info <?php echo $form->textArea($model, "note", array('class' => '', 'placeholder' => "A little info")); ?></div>
<div>Note <?php echo $form->textArea($model, "personal_note", array('class' => '', 'placeholder' => "A personal note")); ?></div>
<div>Coupon <?php echo $form->textField($model, 'discount_code', array('class' => '', 'placeholder' => 'Discount code (optional)')); ?></div>
<div>Gift Type
<?php
$categories = CHtml::listData(Category::model()->findAll(), 'id', 'name');
echo $form->dropDownList($model, 'category_id', $categories, array('empty'=>'Select a gift category', 'class'=>''));
?>
</div>
<div><?php echo $form->dropDownList($model, "item_price", array('3000' => '$30', '5000' => '$50', '10000' => '$100'), array('class' => 'color-white price-dropdown', 'empty'=>'Please choose the value of your gift ▾')); ?></div>
<div>
Deliver By
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
'model' => $model,
'flat'=>true,
'attribute' => 'deliver_by',
'options'=>array(
'showAnim'=>'drop',
'dateFormat'=>'yy-mm-dd',
'minDate'=>7,
),
));
?>
</div>
<button id="submit-form-<?php echo $i; ?>" class="bg-blue hover-bg-salmon color-white uppercase radius-rounded spacing-2 raleway size-18 transition">Pay</button>
</div>
<?php $this->endWidget(); ?>
<script>
mixpanel.track("Checkout Page");
var handler<?php echo $i;?> = StripeCheckout.configure({
<?php
if(YII_DEBUG){
echo "key: 'MYKEYHERE',";
}else{
echo "key: 'MYKEYHERE',";
}
?>
image: '../images/logo-circled-salmon.png',
token: function(token) {
//get the form with all the completed information
var order_form = $("#<?php echo $formId; ?>").serialize();
//pass this token back to our backend
$.ajax({
url: '<?php echo Yii::app()->createUrl('planner/default/prepay',array('eventID'=>$model->event_id,"categoryID"=>'')) ?>'+'/'+$('#MyOrderForm_category_id').val(),
type: 'POST',
data: {'stripeToken': token, 'MyOrderForm': order_form}
}).done(function(result) {
mixpanel.track("Purchase Completed");
console.log("done");
console.log(result);
if (result == "202") {
alert("success");
} else {
alert("error, not charged");
//$(".error").html(result + " Your credit card was not charged!");
//$(".error").removeClass("hide");
}
}).fail(function(result) {
mixpanel.track("Purchase Error");
//$(".error").html("There was an error processing your payment. Nothing was charged.");
//$(".error").removeClass("hide");
console.log("error");
console.log(result);
});
}
});
$("#submit-form-<?php echo $i; ?>").click(function(event) {
if(!$('#MyOrderForm_item_price').val()) {
$('#MyOrderForm_item_price').addClass("color-salmon");
}
else {
$('#MyOrderForm_item_price').removeClass("color-salmon");
handler<?php echo $i; ?>.open({
name: 'Order your Item',
amount: $('#MyOrderForm_item_price').val(),
description: 'Discount code is applied automatically'
});
}
event.preventDefault();
});
</script>