在Wordpress的自定义小部件中使用jQuery动态添加输入字段

laawzig2  于 2023-02-03  发布在  jQuery
关注(0)|答案(1)|浏览(118)

我怎样才能动态添加输入字段(下面的代码)在WordPress的自定义小部件使用jQuery?它包含一些PHP代码,我已经尝试了很多方法,不能让它工作:

<input type="text" name="<?php echo $this->get_field_name('ctitle');?>[]" placeholder="Enter title here"/>
ve7v8dk2

ve7v8dk21#

<?php
   /* It working for me please try below code */
   /* Handle the meta box saving */
   global $post, $wpdb;
   ?>
<tr>
   <th><?php esc_html_e("Add User", 'textdomain');?></th>
   <td>
      <?php $user_data = get_post_meta($post->ID, 'user_data', true); ?>
      <div class="user_main_wrapper">
         <?php if(!empty($user_data)){
            foreach($user_data as $key_user=>$val_user){?>
         <div id="show_1" class="show_inline_section">
            <p><?php esc_html_e("Name:", 'textdomain');?></p>
            <input style="width: 30%;"  type="text" name="user_data[user_name][]" value="<?php echo !empty($val_user['user_name'])?$val_user['user_name']:'' ?>" placeholder="Enter User Name"/>
            <p><?php esc_html_e("DOB:", 'textdomain');?></p>
            <input style="width: 30%;"  type="date" name="user_data[user_dob][]" value="<?php echo !empty($val_user['user_dob'])?$val_user['user_dob']:'' ?>" placeholder="DOB"/>
            <a  class="player_remove_button button" id="removebtn_<?php echo $key_user?>" style="margin-left: 11px;"><?php esc_html_e("Remove", 'textdomain');?></a>
         </div>
         <?php }
            }
            else{
            ?>
         <div id="show_0" class="show_inline_section">
            <p><?php esc_html_e("Name:", 'textdomain');?></p>
            <input style="width: 30%;"  type="text" name="user_data[user_name][]" value="" placeholder="Enter User Name"/>
            <p><?php esc_html_e("DOB:", 'textdomain');?></p>
            <input style="width: 30%;"  type="date" name="user_data[user_dob][]" value="" placeholder="DOB"/>
         </div>
         <?php    
            }
                ?>
      </div>
      <a class="pt-5 player_add_button button" title="Add field"><?php esc_html_e("Add More", 'textdomain');?></a>
   </td>
</tr>
<?php 
/*Save data for update_post_meta*/
add_action('save_post_userdata', 'userdata_save_custom_box', 10, 2); // userdata is post type slug
function userdata_save_custom_box($post_id, $post)
{
    $userdata = [];
    if (isset($_POST['user_data'])) {
        foreach($_POST['user_data']['user_name'] as $k => $user_name){
            if(!empty($user_name)){
                $userdata[] = [
                    'user_name' => $user_name,
                    'user_dob' => $_POST['user_data']['user_dob'][$k]
                ];
            }
        }
        update_post_meta($post_id, sanitize_key('user_data'), $userdata);
    }else{
        update_post_meta($post_id, sanitize_key('user_data'), $userdata);
    }
}
?>
<script type="text/javascript">
jQuery(document).ready(function() {
    var holder = < ? php echo isset($key_user) ? $key_user : 0; ? >
    // var maxField = 10; //Input fields increment limitation
    var addButton = jQuery('.player_add_button'); //Add button selector
    var wrapper = jQuery('.user_main_wrapper'); //Input field wrapper
    var initial_cast = < ? php echo(isset($user_data['user_data'][0]) && count($user_data['user_data'][0]) > 0 ? count($user_data['user_data'][0]) : 1) ? > ; //Initial field counter is 1 

    function fieldHTML(count) {
        return '<div id="show_' + count + '" class="show_inline_section"><p>Name:</p><input style="width: 30%;"  type="text" name="user_data[user_name][]" value="" placeholder="Enter User Name"/> <p>DOB:</p><input style="width: 30%;"  type="date" name="user_data[user_dob][]" value="" placeholder="DOB"/> <a  class="player_remove_button button" id="removebtn_' + count + '" style="margin-left: 11px;">Remove</a></div>'; //New input field html
    }

    //Once add button is clicked
    jQuery(addButton).click(function() {
        holder = holder + 1; //Increment field counter 
        jQuery(wrapper).append(fieldHTML(holder)); //Add field html
    });

    //Once remove button is clicked
    jQuery(wrapper).on('click', '.player_remove_button', function(remove_field) {
        remove_field.preventDefault();
        jQuery(this).parent('div').remove(); //Remove field html
    });
});
</script>

相关问题