JQuery: How to save dynamically added form inputs after validation fails in cakePHP

Question

I have a problem with my registration form. So, I have some fields that are generetad when user click on link, and those fields are lost after I press form Submit button if validation fails. If validation pass, everything is correct and data is saved into database.

So these are that fields, and also script to add new field:

<script> 
  $(document).ready(function() {

    var MaxInputs       = 8; //maximum input boxes allowed
    var FacebookInputsWrapper   = $("#FacebookInputsWrapper"); //Input boxes wrapper ID
    var AddButton       = $("#FacebookAddMoreFileBox"); //Add button ID

    var x = FacebookInputsWrapper.length; //initlal text box count
    var FieldCount=0; //to keep track of text box added

    $(AddButton).click(function (e)  //on add input button click
    {
        if(x <= MaxInputs) //max input box allowed
        {

        FieldCount++; //text box added increment
        //add input box
        $(FacebookInputsWrapper).append('<div style="margin-top:10px;"><input id="SocialMediaLink' + FieldCount + 'Link" type="hidden" name="data[SocialMediaLink][' + FieldCount + '][type]" value="fb" /><input id="SocialMediaLink' + FieldCount + 'Link" type="text" name="data[SocialMediaLink][' + FieldCount + '][link]" class="input-xlarge" placeholder="Facebook link" /><a style="background:0;color:black;" href="#" class="facebookremoveclass">&times;</a></div>');
        x++; //text box increment
        }
    return false;
    });

    $("body").on("click",".facebookremoveclass", function(e){ //user click on remove text
        if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
    return false;
    }) 

  });
  </script>

HTML

<li><label>Facebook</label>
<div >
  <div style="float:right; margin-top:10px;" id="FacebookInputsWrapper"><?php echo $this->Form->input('SocialMediaLink.0.type',array('type'=>'hidden','value'=>'fb')); ?><?php echo $this->Form->input('SocialMediaLink.0.link',array('type'=>'text','class'=>'input-xlarge','label'=>false,'div'=>false,'placeholder'=>'Facebook link', 'error' => array(
    'attributes' => array('class' => 'inputerror')
))); ?><label  style="color:#FF0000;"><?php echo @$valid_social; ?></label>
  <a style="margin-left:10px;background : 0;color:black;" href="#" id="FacebookAddMoreFileBox">Add another Facebook account</a></div>

</div>

So my question is: is it possible to save dynamically generated form fields and their values after validation fails and how?

Thank you

Answer 1

If I understand the question properly, you need to show those dynamically created fields in your view after validation has failed. Do it like this, checking $this->request->data for those fields:

            <?if (!empty($this->request->data['SocialMediaLink'])):?>
                <?foreach($this->request->data['SocialMediaLink'] as $i => $item):?>
                    <div style="margin-top:10px;">
                        <?=$this->Form->hidden('SocialMediaLink.' . $i . '.type', array('value' => 'fb'))?>
                        <?=$this->Form->input('SocialMediaLink.' . $i . '.link')?>
                    </div>
                <?endforeach;?>
            <?endif;?>

Alternatively, you could trigger the click event on AddButton the right amount of times on page load, based on the number of elements in $this->request->data['SocialMediaLink']