Get PHP Last Loop Counter and Apply to jQuery Initial Counter Value -
i new php & jquery , constructing repeater field wordpress site skip how build it. right now, trying figure out answer on how last loop counter in php foreach loop , apply last counter number initial counter value jquery variable. i'm not sure if possible because trying using server-side data client-side processing.
that's intro, here example php code:-
$x = -1; foreach ($something $some){ $x++; // let $some has total of 3, $x provide counter such 0, 1 & 2 } and trying apply last php counter value jquery initial counter value continue count:-
var x = *the last php counter 2*; var max = 20; if(x < max){ x++; // 'x' continue count 3, 4, 5,... } i've been trying many methods before , futile. right think thing need figure out first how retrieve php loop counter outside loop, guess... while figuring out, thankful guys if guys able me new stuff.
edit:-
it seems using '<?php echo $x; ?>'; displaying value in jquery makes jquery execution not work @ all. here's full html-php code , jquery code '<?php echo $x; ?>'; inserted:-
html-php:-
<?php $user_edu = unserialize(base64_decode($current_user->education)); $x = -1; foreach(rsort($user_edu,sort_numeric) $edu); foreach ($user_edu $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'> // repeater 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> // 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 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--; }) });
you can add hidden element dom , assign value of $x it. in jquery can take value hidden element.
example
in php:
... ... ... ... 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 jquery code:
var x = $("#last_counter_of_loop").val() ... ... ... rest of code ... ... ... i hope work. thanks.
Comments
Post a Comment