Multiple copies of the same form, is it possible?

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 &nbsp;▾')); ?></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>



Hello!

I think you should manage it from your view by javascript/jquery functions. Since the IDs are the same for differents forms, try using "submit(this)" or any similar way of submitting to avoid the use of the IDs.