WordPress page options resetting after pressing the enter keys and all of your settings go back to zero. This is usually this is happening when you create a custom page option in WordPress dashboard.
The main reason is the reset button is declared ahead or coded before submit button. If you can see the `id=”reset”` is coded before the `id=”submit”`. See from HTML codes below.
<form method="post" action="options.php"> <input type="hidden" name="reset" id="reset-option" value=""> <input type='hidden' name='option_page' value='anton-plugins' /> <input type="hidden" name="action" value="update" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="f3d65f81d7" /> <input type="hidden" name="_wp_http_referer" value="/wp-admin/admin.php?page=anton-plugins" /> <h1>4nton Plugins Settings</h1> <p> <label><strong>Google Maps API Key</strong> <input type="text" name="anton-plugins[google_api]" id="google_api" value="yUtrdhgYdsfdCGhhfjjYd" placeholder="" /></label><br /> <i>Google requires an API key to retrieve location information. Acquire an API key from the <a href="https://developers.google.com/maps/documentation/geocoding/get-api-key">Google Maps API developer site</a>.</i> </p> <input name="submit" id="reset" class="transition button" value="Reset" type="submit" /> <input name="submit" id="submit" class="transition button" value="Save Changes" type="submit" /> </form>
To fix the issue, you can simply switch the `id=”reset”` and `id=”submit”`. So the setup will be like the codes below.
<form method="post" action="options.php"> <input type="hidden" name="reset" id="reset-option" value=""> <input type='hidden' name='option_page' value='anton-plugins' /> <input type="hidden" name="action" value="update" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="f3d65f81d7" /> <input type="hidden" name="_wp_http_referer" value="/wp-admin/admin.php?page=anton-plugins" /> <h1>4nton Plugins Settings</h1> <input name="submit" id="submit" class="transition button" value="Save Changes" type="submit" /> <p> <label><strong>Google Maps API Key</strong> <input type="text" name="anton-plugins[google_api]" id="google_api" value="yUtrdhgYdsfdCGhhfjjYd" placeholder="" /></label><br /> <i>Google requires an API key to retrieve location information. Acquire an API key from the <a href="https://developers.google.com/maps/documentation/geocoding/get-api-key">Google Maps API developer site</a>.</i> </p> <input name="submit" id="submit" class="transition button" value="Save Changes" type="submit" /> <input name="submit" id="reset" class="transition button" value="Reset" type="submit" /> </form>
Or add another submit button on the top of all your fields. See example below.
<form method="post" action="options.php"> <input type="hidden" name="reset" id="reset-option" value=""> <input type='hidden' name='option_page' value='anton-plugins' /> <input type="hidden" name="action" value="update" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="f3d65f81d7" /> <input type="hidden" name="_wp_http_referer" value="/wp-admin/admin.php?page=anton-plugins" /> <h1>4nton Plugins Settings</h1> <input name="submit" id="submit" class="transition button" value="Save Changes" type="submit" /> <p> <label><strong>Google Maps API Key</strong> <input type="text" name="anton-plugins[google_api]" id="google_api" value="yUtrdhgYdsfdCGhhfjjYd" placeholder="" /></label><br /> <i>Google requires an API key to retrieve location information. Acquire an API key from the <a href="https://developers.google.com/maps/documentation/geocoding/get-api-key">Google Maps API developer site</a>.</i> </p> <input name="submit" id="reset" class="transition button" value="Reset" type="submit" /> <input name="submit" id="submit" class="transition button" value="Save Changes" type="submit" /> </form>
So that’s it! hope I help you solving your problem.
Leave a Reply