I am creating an admin page for a wordpress plugin. I have a form where the user can create a new table in the database. They are asked to enter the name of the first column of the table in a html form. I want a button that when clicked will offer the user an additional input field for the name of the second column and so on. My code so far looks like this

Here is the form with the input for the first column of the table

echo '
<div class="wrap"><h3>Wrap</h3>
<div id="mySQLwp_form"><h4>Form</h4>
<div id="mySQLwp_span_group"><h5>span_group</h5>
  <span><div id="mySQLwp_form_row">
   <div id="mySQLwp_form_cell_left">Cell left</div>
   <div id="mySQLwp_form_cell_right"><input type="text" name="name"></div>
  </div></span>

Here are the buttons including “add another”

  <span><div id="mySQLwp_form_row">
   <input type="submit" class="another" value="Another field" style="float:right" >
   <input type="submit" class="save" value="Save & close" style="float:right" >
  </div></span>
</div>
</div>
</div>
';

Here is a part that is supposed to prepend the next input field row in the span before the one containing the buttons, when the add another button is clicked.

add_action( 'admin_footer', 'my_action_javascript' );
function my_action_javascript() {
echo '<script type="text/javascript" >
     jQuery( "input" ).val( "Another field").click(function() {
       $( this ).prepend("
          <span><div id="mySQLwp_form_row">
           <div id="mySQLwp_form_cell_left">Cell left</div>
           <div id="mySQLwp_form_cell_right"><input type="text" name="name"></div>
          </div></span>
       ");
       );
       </script>';
}

The page loads but nothing happens when the button is clicked. Any advice is greatly appreciated. I’m pretty sure I am not calling the script properly with the my add action.

Read more here: How can AJAX be used in wordpress admin area to add another div with form input field in it?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , , , ,

Wordpress related questions and answers: