javascript - Text Box not saving in wordpress theme settings -

i creating wordpress theme theme options in wordpress. add dynamic add , remove textbox using jquery inside theme settings page. query is,

theme_settings.php

   <?php function theme_settings_init(){     register_setting( 'theme_settings', 'theme_settings' ); }  function add_settings_page() { add_menu_page( __( 'theme settings' ), __( 'theme settings' ), 'manage_options', 'settings', 'theme_settings_page'); }  //add actions add_action( 'admin_init', 'theme_settings_init' ); add_action( 'admin_menu', 'add_settings_page' );  //start settings page function theme_settings_page() {  if ( ! isset( $_request['updated'] ) ) $_request['updated'] = false;  ?>  <div>  <div id="icon-options-general"></div> <h2><?php _e( 'theme settings' ) //your admin panel title ?></h2>  <?php //show saved options message if ( false !== $_request['updated'] ) : ?> <div><p><strong><?php _e( 'options saved' ); ?></strong></p></div> <?php endif; ?>  <form method="post" action="options.php">  <?php settings_fields( 'theme_settings' ); ?> <?php $options = get_option( 'theme_settings' ); ?>  <div id='textboxesgroup'>         <?php     $counter = 1;     while (get_option('textbox'.$counter) && $counter <= 10) {       echo '<div id="textboxdiv'.$counter.'">         <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" >         </div>';       $counter++;     }         ?>     </div>     <input type='button' value='add button' id='addbutton'>     <input type='button' value='remove button' id='removebutton'>   <p><input name="submit" id="submit" value="save changes" type="submit"></p> </form>   </div><!-- end wrap --> <?php } 

and javascript file is:

 $(document).ready(function(){      var counter = 2;      $("#addbutton").click(function () {      if(counter>10){             alert("only 10 textboxes allow");             return false;     }         var newtextboxdiv = $(document.createelement('div'))          .attr("id", 'textboxdiv' + counter);      $('<div id="textboxdiv'+counter+'"></div>').append( '<input type="text" name="theme_settings[textbox' + counter +  ']" id="theme_settings[textbox' + counter + ']" value="" >').appendto('#textboxesgroup');      newtextboxdiv.appendto("#textboxesgroup");       counter++;      });       $("#removebutton").click(function () {     if(counter==1){           alert("no more textbox remove");           return false;        }         counter--;          $("#textboxdiv" + counter).remove();       });       $("#getbuttonvalue").click(function () {      var msg = '';     for(i=1; i<counter; i++){       msg += "\n textbox #" + + " : " + $('#textbox' + i).val();     }           alert(msg);      });   }); 

now question is, in theme settings page, add action , remove action works fine while saving theme setting options added textbox dissappears. happens while refreshing page too. please me how keep added textbox remains same if saving theme options page.

use .append() instead of .after().html(). way code goes inside corresponding div element. made use of jquery also.

newtextboxdiv.after().html( '<input type="text" name="theme_settings[textbox' + counter +  ']" id="theme_settings[textbox' + counter + ']" value="" >'); 

should be

$('<div id="textboxdiv'+counter+'"></div>').append( '<input type="text" name="theme_settings[textbox' + counter +  ']" id="theme_settings[textbox' + counter + ']" value="" >').appendto('#textboxesgroup'); 

to make text boxes appear need while loop this:

$counter = 1; while (get_option('textbox'.$counter) && $counter <= 10) {   echo '<div id="textboxdiv'.$counter.'">     <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" >     </div>';   $counter++; } 

when save them this:

$counter = 0; while (isset($_post['theme_settings']['textbox'.$counter']) && $counter <= 10) {   update_option('textbox'.$counter, $_post['theme_settings']['textbox'.$counter']);   $counter++; } // remove rest of them if set // example set 5 of them , there 10 before // continue counter left in previous while loop while ($counter <= 10) {   update_option('textbox'.$counter, false);   $counter++; } 

edit:

function theme_settings_page() {   $updated = false;    if (isset($_request['updated'])) {     update_option('theme_settings', $_post['theme_settings']);     $updated = true;   }    // ....    if ($updated) {     echo '<div><p><strong>';       _e( 'options saved' );     echo '</strong></p></div>';   }    $counter = 1;   $options = get_option('theme_settings');   while (isset($options['textbox'.$counter])) {     echo '<div id="textboxdiv'.$counter.'">         <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" value="'.$options['textbox'.$counter].'" />         </div>';     $counter++;   }    echo '<input type="hidden" name="updated" value="1" />';    // rest of form }