CODEWITHSUNDEEP
javascriptphpjqueryhtml
Daniel Bastos
Daniel Bastos

Reputation: 150

Increment php variable with the help of javascript?

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;
    });    
});

Upvotes: 1

Views: 117

Answers (1)

Daniel Bastos
Daniel Bastos

Reputation: 150

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;
    });    
});

Upvotes: 1

Related Questions