1

I am trying to make a user selects insert data into the text area and also be able to duplicate the text area by clickin a button, which then will create a duplicate empty text area . the problem i am having at the moment is that once the user clone the textarea, it duplicate the text area with the data from the previous text area. Struggling a bit with the Jquery, would appreciate some helps thank you in advance.

<div id ="specdiv ">
    <fieldset class="fieldset">
        <legend class="legend">Question Specification</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.OfferedAnswer)
        </div>
        <div class ="answerchoice1" id="copybox">
            <div class="editor-field" >
                @Html.TextAreaFor(model => model.OfferedAnswer.AnswerText)
            </div>
        </div> 
    </fieldset>
</div>

Jquery code: 

$("#dialog-message").hide();
$(document).ready(function () {
    $('button').click(function () {
    //$('.answerchoice1').before($('.answerchoice1').clone())
    if ($('.editor-field').length >= 10) {
        // alert('No more than 6!');
        //  $("<div title='Answers Limit has been reached'> You cannot add more anwer choice if you would like to add more please consider to create a new question. Thank you </div>").dialog(       
        //  ).css('border','2px solid red');
        $("#dialog-message").dialog({
            modal: true,
            draggable: true,
            resizable: false,
            position: ['center', 'bottom'],
            show: 'blind',
            hide: 'blind',
            width: 400,
            dialogClass: 'ui-dialog-osx',
            buttons: {
                "I've read and understand this": function () {
                         $(this).dialog("close");
                         }
            }
        });

        return false;
     }
     var $target = $('.answerchoice1').find('div.editor-field:first');
     $target.clone().appendTo('.answerchoice1').find("editor-field").val("");
     $target.find('.answerchoice1').val("");
     $target.insertAfter(".div.editor-field:last")  
     })  
 });
Shahzad
  • 1,315
  • 2
  • 22
  • 42
cedPound
  • 367
  • 1
  • 3
  • 14
  • `.find("editor-field")` gets a `
    ` which does not have a `.val()`. You need to get the `textarea`
     –  Apr 19 '17 at 10:29
  • @StephenMuecke could post the example code of your suggestion if you dont mind – cedPound Apr 19 '17 at 10:43
  • Sorry, but too much of your code does not make sense. Your generating duplicate `id` attributes which is invalid html. You have a `LabelFor()` which does not work as a label. You certainly cannot get any client side validation and it will not bind to you model when you submit and your not able to return the view correctly if its invalid. Its difficult to understand what your trying to achieve with this. –  Apr 19 '17 at 10:46
  • @StephenMuecke Exactly what my post mentions, i do not wish to generate duplicate id instead i would like to create a new id once the user duplicate the textarea. my model is fine i am just trying fix my front end. – cedPound Apr 19 '17 at 10:51
  • Your model is not fine despite what you might think. And if you want to dynamically add items to a collection property, referthe answers [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) and [here](http://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) for some options –  Apr 19 '17 at 10:54

0 Answers0