0

I am new to PHP & jQuery and I was constructing a repeater field for my Wordpress site but I will skip how I build it. Right now, I am trying to figure out an answer on how to get last loop counter in PHP foreach loop and apply that last counter number as initial counter value for jQuery variable. I'm not sure if this is possible because what I am trying to do is using the server-side data for client-side processing.

That's all for the intro, now here is my example PHP code:-

$x = -1;
foreach ($something as $some){
   $x++; // Let say $some has total of 3, so $x will provide counter such as 0, 1 & 2
}

And I am trying to apply the last PHP counter value as jQuery initial counter value so that it will continue the count:-

var x = *the last php counter which is 2*;
var max = 20;
if(x < max){
   x++;
// The 'x' will continue the count as 3, 4, 5,...
}

I've been trying many methods before this and it was futile. Right now I think the thing that I need to figure out for first is how to retrieve the PHP loop counter into outside the loop, I guess... But while I am figuring it out, I would really be thankful to you guys if you guys able to help me as I am new to this stuff.

EDIT:-

It seems that using '<?php echo $x; ?>'; for displaying the value in my jQuery makes my jQuery execution does not work at all. Here's the full HTML-PHP code and jQuery code with '<?php echo $x; ?>'; inserted:-

HTML-PHP:-

<?php
                    $user_edu = unserialize(base64_decode($current_user->education));

                    $x = -1;
                    foreach(rsort($user_edu,SORT_NUMERIC) as $edu);
                    foreach ($user_edu as $edu){
                    $x++;

                    echo "
                    <div>
                        <div class='col-sm-6 col-sm-offset-3 col-xs-12 field-label-size' id='p-custom-color'>
                        School Name
                        </div>
                        <div class='col-sm-6 col-sm-offset-3 col-xs-12 form-group-2 p-custom'>
                            <input type='text' name='education[" . $x . "][school]' class='form-control field-custom' placeholder='Your School Name' value='" . $edu['school'] . "'/>
                        </div>
                        <div class='col-sm-6 col-sm-offset-3 col-xs-12 field-label-size' id='p-custom-color'>
                        Concentration
                        </div>
                        <div class='col-sm-6 col-sm-offset-3 col-xs-12 form-group-2 p-custom'>
                            <input type='text' name='education[" . $x . "][concentration]' class='form-control field-custom' placeholder='Your Course/Program Name' value='" . $edu['concentration'] . "'/>
                        </div>
                        <div class='col-sm-6 col-sm-offset-3 col-xs-12 field-label-size' id='p-custom-color'>
                        Period
                        </div>
                        <div class='col-sm-6 col-sm-offset-3 col-xs-12 field-label-size form-group-2 p-custom'>
                            <div class='field-spacing'>
                                <div class='col-sm-6 col-xs-6' id='col-padding-left'>
                                    <select name='education[" . $x . "][start_year]' class='form-control field-custom'>
                                        <option value='' disabled>Start Year</option>
                                        <option value='" . $edu['start_year'] . "' selected>" . $edu['start_year'] . "</option>
                                        <option value='2016'>2016</option>
                                        <option value='2015'>2015</option>
                                        <option value='2014'>2014</option>
                                        <option value='2013'>2013</option>
                                        <option value='2012'>2012</option>
                                        <option value='2011'>2011</option>
                                        <option value='2010'>2010</option>
                                        <option value='2009'>2009</option>
                                        <option value='2008'>2008</option>
                                        <option value='2007'>2007</option>
                                        <option value='2006'>2006</option>
                                        <option value='2005'>2005</option>
                                        <option value='2004'>2004</option>
                                        <option value='2003'>2003</option>
                                        <option value='2002'>2002</option>
                                        <option value='2001'>2001</option>
                                        <option value='2000'>2000</option>
                                        <option value='1999'>1999</option>
                                        <option value='1998'>1998</option>
                                        <option value='1997'>1997</option>
                                        <option value='1996'>1996</option>
                                        <option value='1995'>1995</option>
                                        <option value='1994'>1994</option>
                                        <option value='1993'>1993</option>
                                        <option value='1992'>1992</option>
                                        <option value='1991'>1991</option>
                                        <option value='1990'>1990</option>
                                        <option value='1989'>1989</option>
                                        <option value='1988'>1988</option>
                                        <option value='1987'>1987</option>
                                        <option value='1986'>1986</option>
                                        <option value='1985'>1985</option>
                                        <option value='1984'>1984</option>
                                        <option value='1983'>1983</option>
                                        <option value='1982'>1982</option>
                                        <option value='1981'>1981</option>
                                        <option value='1980'>1980</option>
                                        <option value='1979'>1979</option>
                                        <option value='1978'>1978</option>
                                        <option value='1977'>1977</option>
                                        <option value='1976'>1976</option>
                                        <option value='1975'>1975</option>
                                        <option value='1974'>1974</option>
                                        <option value='1973'>1973</option>
                                        <option value='1972'>1972</option>
                                        <option value='1971'>1971</option>
                                        <option value='1970'>1970</option>
                                        <option value='1969'>1969</option>
                                        <option value='1968'>1968</option>
                                        <option value='1967'>1967</option>
                                        <option value='1966'>1966</option>
                                        <option value='1965'>1965</option>
                                        <option value='1964'>1964</option>
                                        <option value='1963'>1963</option>
                                        <option value='1962'>1962</option>
                                        <option value='1961'>1961</option>
                                        <option value='1960'>1960</option>
                                        <option value='1959'>1959</option>
                                        <option value='1958'>1958</option>
                                        <option value='1957'>1957</option>
                                        <option value='1956'>1956</option>
                                        <option value='1955'>1955</option>
                                        <option value='1954'>1954</option>
                                        <option value='1953'>1953</option>
                                        <option value='1952'>1952</option>
                                        <option value='1951'>1951</option>
                                        <option value='1950'>1950</option>
                                        <option value='1949'>1949</option>
                                        <option value='1948'>1948</option>
                                        <option value='1947'>1947</option>
                                    </select>
                                </div>
                                <div class='col-sm-6 col-xs-6' id='col-padding-right'>
                                    <select name='education[" . $x . "][end_year]' class='form-control field-custom'>
                                        <option value='' disabled>Start Year</option>
                                        <option value='" . $edu['end_year'] . "' selected>" . $edu['end_year'] . "</option>
                                        <option value='2015'>2015</option>
                                        <option value='2014'>2014</option>
                                        <option value='2013'>2013</option>
                                        <option value='2012'>2012</option>
                                        <option value='2011'>2011</option>
                                        <option value='2010'>2010</option>
                                        <option value='2009'>2009</option>
                                        <option value='2008'>2008</option>
                                        <option value='2007'>2007</option>
                                        <option value='2006'>2006</option>
                                        <option value='2005'>2005</option>
                                        <option value='2004'>2004</option>
                                        <option value='2003'>2003</option>
                                        <option value='2002'>2002</option>
                                        <option value='2001'>2001</option>
                                        <option value='2000'>2000</option>
                                        <option value='1999'>1999</option>
                                        <option value='1998'>1998</option>
                                        <option value='1997'>1997</option>
                                        <option value='1996'>1996</option>
                                        <option value='1995'>1995</option>
                                        <option value='1994'>1994</option>
                                        <option value='1993'>1993</option>
                                        <option value='1992'>1992</option>
                                        <option value='1991'>1991</option>
                                        <option value='1990'>1990</option>
                                        <option value='1989'>1989</option>
                                        <option value='1988'>1988</option>
                                        <option value='1987'>1987</option>
                                        <option value='1986'>1986</option>
                                        <option value='1985'>1985</option>
                                        <option value='1984'>1984</option>
                                        <option value='1983'>1983</option>
                                        <option value='1982'>1982</option>
                                        <option value='1981'>1981</option>
                                        <option value='1980'>1980</option>
                                        <option value='1979'>1979</option>
                                        <option value='1978'>1978</option>
                                        <option value='1977'>1977</option>
                                        <option value='1976'>1976</option>
                                        <option value='1975'>1975</option>
                                        <option value='1974'>1974</option>
                                        <option value='1973'>1973</option>
                                        <option value='1972'>1972</option>
                                        <option value='1971'>1971</option>
                                        <option value='1970'>1970</option>
                                        <option value='1969'>1969</option>
                                        <option value='1968'>1968</option>
                                        <option value='1967'>1967</option>
                                        <option value='1966'>1966</option>
                                        <option value='1965'>1965</option>
                                        <option value='1964'>1964</option>
                                        <option value='1963'>1963</option>
                                        <option value='1962'>1962</option>
                                        <option value='1961'>1961</option>
                                        <option value='1960'>1960</option>
                                        <option value='1959'>1959</option>
                                        <option value='1958'>1958</option>
                                        <option value='1957'>1957</option>
                                        <option value='1956'>1956</option>
                                        <option value='1955'>1955</option>
                                        <option value='1954'>1954</option>
                                        <option value='1953'>1953</option>
                                        <option value='1952'>1952</option>
                                        <option value='1951'>1951</option>
                                        <option value='1950'>1950</option>
                                        <option value='1949'>1949</option>
                                        <option value='1948'>1948</option>
                                        <option value='1947'>1947</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class='col-sm-6 col-sm-offset-3 col-xs-12 p-custom text-center remove_field'>
                            <button type='button' class='btn btn-block button-cont-custom'><span class='glyphicon glyphicon-chevron-up' id='glyphicon-menu-right-margin'></span> Remove Field</button>
                        </div>
                        <div class='col-sm-6 col-sm-offset-3 col-xs-12 text-center'>
                            <hr id='hr-field'/>
                        </div>
                    </div>
                    ";
?>
                    <div class='repeater-edu'>
                        // The repeater will go here
                    </div>
                    <!----------------- Repeater Button ----------------->
                    <div class="col-sm-6 col-sm-offset-3 col-xs-12 text-center">
                        <hr id="hr-field"/>
                    </div>
                    <div class="col-sm-6 col-sm-offset-3 col-xs-12 p-custom text-center">
                        <button type="button" class="btn btn-block button-cont-custom add-field-edu"><span class="glyphicon glyphicon-plus" id="glyphicon-menu-right-margin"></span> Add More Field</button>
                    </div> // The jQuery execution call

jQuery:-

$(document).ready(function(){
    $('.remove_field').click(function(){
        $(this).parent('div').remove();
    })
});

$(document).ready(function(){
    var max_fields      = 20; // Maximum input boxes allowed
    var wrapper         = $(".repeater-edu"); // Fields wrapper
    var add_field      = $(".add-field-edu"); // Add button ID

    var x = '<?php echo $x; ?>'; // Initlal text box count
    $(add_field).click(function(e){ // On add input button click
        e.preventDefault(); // Preventing action from executed?
        if(x < max_fields){ // Max input box allowed
            x++; // Text box increment
            $(wrapper).append('<div><div class="col-sm-6 col-sm-offset-3 col-xs-12 text-center"><hr id="hr-field"/></div><div class="col-sm-6 col-sm-offset-3 col-xs-12 field-label-size" id="p-custom-color">School Name</div><div class="col-sm-6 col-sm-offset-3 col-xs-12 form-group-2 p-custom"><input type="text" name="education["'+(x)+'"][school]" class="form-control field-custom" placeholder="Your School Name"/></div><div class="col-sm-6 col-sm-offset-3 col-xs-12 field-label-size" id="p-custom-color">Concentration</div><div class="col-sm-6 col-sm-offset-3 col-xs-12 form-group-2 p-custom"><input type="text" name="education["'+(x)+'"][concentration]" class="form-control field-custom" placeholder="Your Course/Program Name"/></div><div class="col-sm-6 col-sm-offset-3 col-xs-12 field-label-size" id="p-custom-color">Period</div><div class="col-sm-6 col-sm-offset-3 col-xs-12 field-label-size form-group-2 p-custom"><div class="field-spacing"><div class="col-sm-6 col-xs-6" id="col-padding-left"><select name="education["'+(x)+'"][start_year]" class="form-control field-custom"><option value="" disabled selected>Start Year</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option></select></div><div class="col-sm-6 col-xs-6" id="col-padding-right"><select name="education["'+(x)+'"][end_year]" class="form-control field-custom"><option value="" disabled selected>End Year</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option></select></div></div></div><div class="col-sm-6 col-sm-offset-3 col-xs-12 p-custom text-center remove_field"><button type="button" class="btn btn-block button-cont-custom"><span class="glyphicon glyphicon-chevron-up" id="glyphicon-menu-right-margin"></span> Remove Field</button></div></div>'); // Add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ // User click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
Improve this question
7
  • assign as: var x = '<?php echo $x; ?>'; Commented Apr 25, 2016 at 5:33
  • I don't know why you are running your loop counter by -1. but normal counter will run to the length of array. So you can easily find out by count($array); Commented Apr 25, 2016 at 5:35
  • @DharaParmar Well, there's problem actually with this, the .click() function that triggers the jQuery code above doesn't seem to work at all without any error. Is there anything I should do before applying those? Commented Apr 25, 2016 at 5:50
  • can you show the jquery and html code.? Commented Apr 25, 2016 at 5:51
  • @urfusion because I want it start as 0 for the initial count so that I can save it as PHP array as PHP array starts with 0. Commented Apr 25, 2016 at 5:52

4 Answers 4

Reset to default
1

You can simple do this like

$x = -1;
foreach ($something as $some){
   $x++; 
}

and then you can assign the value of $x in your javascript code like this

var x = '<?php echo $x; ?>';
var max = 20;
if(x < max){
   x++;
// The 'x' will continue the count as 3, 4, 5,...
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Well, there's problem actually with this, the .click() function that triggers the jQuery code above doesn't seem to work at all. Am I missing something here?
0

You can add a hidden element to DOM and assign the value of $x to it. Then in jQuery you can take the value from the hidden element.

Example

In PHP:

... ...
... ...
Your PHP code upto "repeater-edu"
... ...

<input type="hidden" name="last_counter_of_loop" id="last_counter_of_loop" value="<?php echo $x; ?>"/>
<div class='repeater-edu'>
... ... ...
... ... ...

Then in your JQuery code:

var x = $("#last_counter_of_loop").val()
... ... ...
rest of your code
... ... ...

I hope it will work. Thanks.

Improve this answer

3 Comments

That works! Never thought of this kind of hack... But I wonder, could you explain why the normal '<?php echo $x; ?>' does not work? It does perplexes me...
I am not really sure from your code why that'll not work. It can happen for lots of reasons actually as far as I understand. predicting one of them will not be right.
Yes that should be no problem - unless there are some with flow of loading files or something similar - which only you can ensure! :D :D
0

take click event as:

$(document).on("click",".add-field-edu",function(e){ 

...

});
Improve this answer

1 Comment

I think I need you to be more specific because it still does not work. Sorry for being slow.
0

More simpler way <?php $x=count($something)-1;

<script> $(<you DOM object>).ready(function(){ var x = '<?php echo $x; ?>'; var max = 20; if(x < max){ x++; } }) </script> ?>

Improve this answer

2 Comments

This is some kind of inline jQuery-PHP script which will mess up my codes. I'd prefer external script for my project.
@Kaydarin you can separate the code and put it in different file as per you suitable i have just shown you the code

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.