only the last option in theme options are being saved to the database

I have this admin page functions where I am trying to prompt the admin for some text data.

the problem that is only the last field is being saved and existed ain the DB, the top ones do not exist in the DB at all.

adding options to admin page:

 register_setting( 'top-data-group', 'yourLogo');
 register_setting( 'card1-group', 'card1_text');
 register_setting( 'card4-group', 'card4_text');


  add_settings_section('top-options', 'Top Information', 'top_options', 'top-data' );
  add_settings_section('card1', 'Card 1', 'card1_options', 'top-data' );
  add_settings_section('card4', 'Card 4', 'top_options', 'top-data' );


 add_settings_field('yourLogo', 'Logo Image URL:', 'yourLogoImage_callback', 'top-data', 'top-options'  );
 add_settings_field('card1_text', 'card 1 text:', 'card1_text_callback', 'top-data', 'card1'  );
 add_settings_field('card4_text', 'card 4 text:', 'card4_text_callback', 'top-data', 'card4'  );

callback functions:


function card1_text_callback (){
    $preText =  esc_attr( get_option('card1_text'));
     echo ' <input type="text" name="card1_text" placeholder="card text" size="50" value="'.$preText. '" > ';
 }


function card4_text_callback (){
    $preText =  esc_attr( get_option('card4_text'));
     echo ' <input type="text" name="card4_text" placeholder="card text" size="50" value="'.$preText. '" > ';
 }

function yourLogoImage_callback (){
    $preText =  esc_attr( get_option('yourLogoImage'));
     echo ' <input type="text" name="yourLogoImage" placeholder="your Logo Image URL" size="50" value="'.$preText. '" > <p> use external or internal image url , preferred (300 * 50 px) </p>'   ;
 }

the form page:

<h1> Top Section </h1>
<?php settings_errors(); ?>


<form action="options.php" method="post" >  
    <?php 


    settings_fields('top-data-group');
    do_settings_sections('top-data');

    settings_fields('card1-group');
    do_settings_sections('card1');

    settings_fields('card4-group');
    do_settings_sections('card4');

    submit_button('save', 'primary sub-button', 'submit', true);

  ?>
</form>

only last option is being saved to the DB, top ones are all empty. the form working fine, I can find everything as I want in the dashboard, but they did not save to DB

edit:

register_setting() matches the add_setting_field() id .. I've done the same with card4 and it works .

Solution

I solve it as follows:

1- regester_setting() id should not match any other Id, and this is the Id you have to use in the callback function.

2- you don't need to use the id of add_setting_field() in any place.

3- put all sections in one option group.

4- the page inside add_settings_section() and add_setting_field() should match the page slug that being rendered by add_menu_page() or add_submenu_page().

so the code now as follows:

adding options to admin page:

change: deleted every group options, only one saved and added to every regester_settings(). changed the page slug to match page on the add_settings_field().


    add_submenu_page('top', 'top', 'top', 'manage_options', 'top-data', 'top_init' );


 register_setting( 'top-data-group', 'yourLogo');
 register_setting( 'top-data-group', 'card1_text');
 register_setting( 'top-data-group', 'card4_text');


  add_settings_section('top-options', 'Top Information', 'top_options', 'top-data' );
  add_settings_section('card1', 'Card 1', 'card1_options', 'top-data' );
  add_settings_section('card4', 'Card 4', 'top_options', 'top-data' );


 add_settings_field('random3', 'Logo Image URL:', 'yourLogoImage_callback', 'top-data', 'top-options'  );
 add_settings_field('crandom1', 'card 1 text:', 'card1_text_callback', 'top-data', 'card1'  );
 add_settings_field('random2', 'card 4 text:', 'card4_text_callback', 'top-data', 'card4'  );

callback functions:

change: changed get_options() an name= properties to match ids on the regester_settings()


function card1_text_callback (){
    $preText =  esc_attr( get_option('card1_text'));
     echo ' <input type="text" name="card1_text" placeholder="card text" size="50" value="'.$preText. '" > ';
 }


function card4_text_callback (){
    $preText =  esc_attr( get_option('card4_text'));
     echo ' <input type="text" name="card4_text" placeholder="card text" size="50" value="'.$preText. '" > ';
 }

function yourLogoImage_callback (){
    $preText =  esc_attr( get_option('yourLogo'));
     echo ' <input type="text" name="yourLogoImage" placeholder="your Logo Image URL" size="50" value="'.$preText. '" > <p> use external or internal image url , preferred (300 * 50 px) </p>'   ;
 }

the form page:

change: delete every group option, only one saved.

<h1> Top Section </h1>
<?php settings_errors(); ?>


<form action="options.php" method="post" >  
    <?php 


    settings_fields('top-data-group');
    do_settings_sections('top-data');



    submit_button('save', 'primary sub-button', 'submit', true);

  ?>
</form>