1

I have a form with an input textbox and a link to add another input textbox.

The first input textbox has the label Artist1. When I click the link to add another input textbox, I want the label to be Artist2, if I click again Artist3 and so on.

I have the following link:

<a href="#" id="addScntHeadliners">Add another</a>

and as I click on the link it executes this javascript function:

<script type="text/javascript">
$(function() {
    var scntDiv = $('#p_scentsHeadliners');
    var i = $('#p_scentsHeadliners').size() + 1;

    $('#addScntHeadliners').bind('click', function() {
        //$().appendTo(scntDiv);
        $('<p id="newp'+i+'"></p>').appendTo(scntDiv);
        var html = '<br /><?php echo $this->Form->input('Artist'.$qtd_headliners,['class="form-control" rows="7" placeholder="e.g. Day 1" style="max-width: 150px; max-height: 200px;"']); ?><br /><label for="formGroupExampleInput2">Photo</label><div class="fileupload fileupload-new" data-provides="fileupload"><span class="btn btn-primary btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="file"/></span><span class="fileupload-preview"></span><a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a></div><a href="#" id="remScntHeadliners' + i +'">Remove</a>';
        var succss = $("#newp"+i).append(html)
        $('#remScntHeadliners'+ i ).on('click', function() {
            $(this).parent().remove();
            return false;
        });
        i++;
        return false;
    });    
});

10
  • What is your problem? What is not working? Commented May 4, 2016 at 11:13
  • When I click and the function runs it should show Artist2, if click again Artist3 and so on but it only does Artist2, Artist2... Commented May 4, 2016 at 11:15
  • Replace .$qtd_headliners with JS variable, which you will increment when needed... Commented May 4, 2016 at 11:21
  • @BozidarSikanjic If I do this <?php echo $this->Form->input("Artist'+ myvar +'"... it shows Artist'+ myvar +' Commented May 4, 2016 at 11:23
  • 1
    @madalinivascu I'm sorry... Rough night I understood and it worked. Thank you :) Commented May 4, 2016 at 11:39

1 Answer 1

1

The solution as sugested by @madalinivascu was to go full js! :)

<script type="text/javascript">
$(function() {
    var scntDiv = $('#p_scentsHeadliners');
    var i = $('#p_scentsHeadliners').size() + 1;
    var headlinersqtd = <?php echo $qtd_headliners; ?>;
    $('#addScntHeadliners').bind('click', function() {
        //$().appendTo(scntDiv);
        $('<p id="newp'+i+'"></p>').appendTo(scntDiv);
        headlinersqtd++;
        var html = '<br /><label for="artist1">Artist '+ headlinersqtd+'</label><input type="text" name="Artist'+headlinersqtd+'" class="form-control" rows="7" placeholder="e.g. Day 1" style="max-width: 150px; max-height: 200px;" ="class="form-control" "="" id="Artist'+headlinersqtd+'"><br /><label for="formGroupExampleInput2">Photo</label><div class="fileupload fileupload-new" data-provides="fileupload"><span class="btn btn-primary btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="file"/></span><span class="fileupload-preview"></span><a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a></div><a href="#" id="remScntHeadliners' + i +'">Remove</a>';
        var succss = $("#newp"+i).append(html)
        $('#remScntHeadliners'+ i ).on('click', function() {
            $(this).parent().remove();
            return false;
        });
        i++;
        return false;
    });    
});

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.