I have a custom Submenu page with my post type in which I am querying all posts and adding custom textareas and dropdowns that will repeat with each entry. The id and name for each field is the same accept the end of it is hyphenated with the post ID at the end. I want to be able to save the values entered in these fields and preferably once the data is entered instead of clicking a save button.
I figure that these texatareas and dropdowns need to be added into a group in order to save them, but I haven't done it in this fashion before. I usually have the values in the individual post. But, I need this section separate from the actual posts in the post type.
Any suggestions would be helpful. Thanks in advance!!!
Here is what I have so far for this submenu page.
$args = array( 'post_type' => 'properties', 'posts_per_page' => -1, 'orderby' => 'title', 'order' => 'DESC', 'post_status' => 'publish' );
$myposts = get_posts( $args );
?>
<div class="wrap">
<h1>Status:</h1>
<style>
.widefat .room-column {
width: 3.2em;
vertical-align: top;
}
.widefat textarea {
width: 100%;
}
</style>
<form action="" method="post">
<input type="submit" name="update_statuses" value="Update" class="button-primary" />
<table class="wp-list-table widefat fixed striped posts">
<thead>
<tr>
<th class="manage-column column-cb room-column">Beds</th>
<th class="manage-column column-columnname">Address</th>
<th class="manage-column column-columnname">Renewal</th>
<th class="manage-column column-columnname">Future Rent</th>
<th class="manage-column column-columnname">Availability Date</th>
<th class="manage-column column-columnname">Deposit</th>
<th class="manage-column column-columnname">Last Showing</th>
<th class="manage-column column-columnname">Status</th>
<th class="manage-column column-columnname">Date</th>
<th class="manage-column column-columnname">Initials</th>
<th class="manage-column column-columnname">Notes</th>
</tr>
</thead>
<?php
$count = 0;
foreach( $myposts as $post ) : setup_postdata($post);
$count++;
$bedrooms = wp_get_post_terms($post->ID, 'bedrooms', array("fields" => "all"));
foreach( $bedrooms as $room ) {
$bedSlug = $room->slug;
}
$bedStripped = preg_replace('/[^0-9]/', '', $bedSlug);
?>
<tr>
<th class="room-column">
<?php echo $bedStripped; ?>
</th>
<td>
<a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a>
</td>
<td>
<select name="renewal-<?php echo $post->ID; ?>" id="renewal-<?php echo $post->ID; ?>">
<option value="0">Choose</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
<td>
<textarea name="future-rent-<?php echo $post->ID; ?>" id="future-rent-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="available-<?php echo $post->ID; ?>" id="available-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="deposit-<?php echo $post->ID; ?>" id="deposit-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="last-showing-<?php echo $post->ID; ?>" id="last-showing-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<select name="status-<?php echo $post->ID; ?>" id="status-<?php echo $post->ID; ?>">
<option value="--">-</option>
<option value="nf">Needs Fees</option>
<option value="bgi">BGI</option>
<option value="fa">Final Approval</option>
<option value="a">Approved</option>
<option value="nd">Need Deposit</option>
<option value="dp">Deposit Paid</option>
<option value="ats">Appt to Sign</option>
<option value="rnl">Renew Lease</option>
<option value="ls">Lease Signed</option>
</select>
</td>
<td>
<textarea name="date-<?php echo $post->ID; ?>" id="date-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="initials-<?php echo $post->ID; ?>" id="initials-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="notes-<?php echo $post->ID; ?>" id="notes-<?php echo $post->ID; ?>"></textarea>
</td>
</tr>
<?php
endforeach;
echo '<div style="float:right;">Total: '.$count.'</div>';
?>
</table>
<input type="submit" name="update_statuses" value="Update" class="button-primary" />
</form>
</div>
I have a custom Submenu page with my post type in which I am querying all posts and adding custom textareas and dropdowns that will repeat with each entry. The id and name for each field is the same accept the end of it is hyphenated with the post ID at the end. I want to be able to save the values entered in these fields and preferably once the data is entered instead of clicking a save button.
I figure that these texatareas and dropdowns need to be added into a group in order to save them, but I haven't done it in this fashion before. I usually have the values in the individual post. But, I need this section separate from the actual posts in the post type.
Any suggestions would be helpful. Thanks in advance!!!
Here is what I have so far for this submenu page.
$args = array( 'post_type' => 'properties', 'posts_per_page' => -1, 'orderby' => 'title', 'order' => 'DESC', 'post_status' => 'publish' );
$myposts = get_posts( $args );
?>
<div class="wrap">
<h1>Status:</h1>
<style>
.widefat .room-column {
width: 3.2em;
vertical-align: top;
}
.widefat textarea {
width: 100%;
}
</style>
<form action="" method="post">
<input type="submit" name="update_statuses" value="Update" class="button-primary" />
<table class="wp-list-table widefat fixed striped posts">
<thead>
<tr>
<th class="manage-column column-cb room-column">Beds</th>
<th class="manage-column column-columnname">Address</th>
<th class="manage-column column-columnname">Renewal</th>
<th class="manage-column column-columnname">Future Rent</th>
<th class="manage-column column-columnname">Availability Date</th>
<th class="manage-column column-columnname">Deposit</th>
<th class="manage-column column-columnname">Last Showing</th>
<th class="manage-column column-columnname">Status</th>
<th class="manage-column column-columnname">Date</th>
<th class="manage-column column-columnname">Initials</th>
<th class="manage-column column-columnname">Notes</th>
</tr>
</thead>
<?php
$count = 0;
foreach( $myposts as $post ) : setup_postdata($post);
$count++;
$bedrooms = wp_get_post_terms($post->ID, 'bedrooms', array("fields" => "all"));
foreach( $bedrooms as $room ) {
$bedSlug = $room->slug;
}
$bedStripped = preg_replace('/[^0-9]/', '', $bedSlug);
?>
<tr>
<th class="room-column">
<?php echo $bedStripped; ?>
</th>
<td>
<a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a>
</td>
<td>
<select name="renewal-<?php echo $post->ID; ?>" id="renewal-<?php echo $post->ID; ?>">
<option value="0">Choose</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</td>
<td>
<textarea name="future-rent-<?php echo $post->ID; ?>" id="future-rent-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="available-<?php echo $post->ID; ?>" id="available-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="deposit-<?php echo $post->ID; ?>" id="deposit-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="last-showing-<?php echo $post->ID; ?>" id="last-showing-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<select name="status-<?php echo $post->ID; ?>" id="status-<?php echo $post->ID; ?>">
<option value="--">-</option>
<option value="nf">Needs Fees</option>
<option value="bgi">BGI</option>
<option value="fa">Final Approval</option>
<option value="a">Approved</option>
<option value="nd">Need Deposit</option>
<option value="dp">Deposit Paid</option>
<option value="ats">Appt to Sign</option>
<option value="rnl">Renew Lease</option>
<option value="ls">Lease Signed</option>
</select>
</td>
<td>
<textarea name="date-<?php echo $post->ID; ?>" id="date-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="initials-<?php echo $post->ID; ?>" id="initials-<?php echo $post->ID; ?>"></textarea>
</td>
<td>
<textarea name="notes-<?php echo $post->ID; ?>" id="notes-<?php echo $post->ID; ?>"></textarea>
</td>
</tr>
<?php
endforeach;
echo '<div style="float:right;">Total: '.$count.'</div>';
?>
</table>
<input type="submit" name="update_statuses" value="Update" class="button-primary" />
</form>
</div>
2 Answers
Reset to default 0If I understood you correctly, you're basically asking how to group inputs by post ID? If this is the case, you could do something like this
// group by input
name="renewal[<?php echo $post->ID; ?>]"
// when saving
$_POST['renewal'] // array of input values with each having post_id as key
Or
// group by post ID
name="data[<?php echo $post->ID; ?>][renewal/future-rent/etc.]"
// when saving
$_POST['data'] // array of arrays, each with post_id as key. post_id specific subarrays have input names as keys and input values as values
In this scenario I prefer to use AJAX, you save each value when you modify it and you don't need a click button.
You need:
- Print the post ID only once for each row
- A JavaScript file capturing your changes and sending it to admin-ajax.php
- An action hook to declare the function that handle the ajax post
I make a sample plugin for you with a normal post and only editing a field
<?php
/**
* Plugin Name: KFP Ajax Update
* Description: Probando a actualizar campos con Ajax
* Version: 0.1.1
* Author: Juanan Ruiz
* Author URI: https://kungfupress/
*/
// Admin menu
add_action("admin_menu", "Kfp_Ajax_Update_menu");
// Links the hook to the function that handles the ajax post update
add_action('wp_ajax_kfp_ajax_update', 'Kfp_Ajax_update');
/**
* Add the admin menu
*
* @return void
*/
function Kfp_Ajax_Update_menu()
{
add_menu_page("Formulario Ajax Update", "Ajax Update", "manage_options",
"kfp_ajax_update_menu", "Kfp_Ajax_Update_admin", "dashicons-feedback", 45);
}
/**
* Create the admin page where you show and edit your data
*
* @return void
*/
function Kfp_Ajax_Update_admin()
{
wp_enqueue_script('kfp-ajax-update', plugins_url('/js/ajax-update.js', __FILE__));
wp_localize_script('kfp-ajax-update', 'ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'ajax_nonce' => wp_create_nonce('ajax_update_' . admin_url('admin-ajax.php')),
));
$args = array( 'post_type' => 'post', 'posts_per_page' => -1, 'orderby' =>
'title', 'order' => 'DESC', 'post_status' => 'publish' );
$myposts = get_posts( $args );
$html = '<div class="wrap"><h1>Ajax Update</h1>';
$html .= '<table class="wp-list-table widefat fixed striped posts">';
$html .= '<thead><tr>';
$html .= '<th class="manage-column column-columnname" width="30%">Title</th>';
$html .= '<th class="manage-column column-columnname">Excerpt</th>';
$html .= '</tr></thead><tbody>';
foreach($myposts as $post) {
$html .= "<tr data-post_id='$post->ID'>";
$html .= "<td>$post->post_title</td>";
$html .= "<td><textarea class='auto-update' style='width:100%;'>$post->post_excerpt</textarea></td>";
$html .= "</tr>";
}
$html .= '</tbody></table></div>';
echo $html;
}
/**
* Handle ajax post
*
* @return void
*/
function Kfp_Ajax_update()
{
if ( defined('DOING_AJAX') && DOING_AJAX
&& wp_verify_nonce($_POST['nonce'], 'ajax_update_' . admin_url( 'admin-ajax.php'))) {
$args = array(
'ID' => $_POST['post_id'],
'post_excerpt' => $_POST['post_excerpt']
);
wp_update_post($args);
echo "Ok";
die();
} else {
die('Error');
}
}
And the javascript file (js/ajax-update.js:
jQuery(document).ready(function($){
$('.auto-update').blur(function(event){
$.post(ajax_object.ajax_url,
{
action:'kfp_ajax_update',
post_id:$(this).parents('tr').data('post_id'),
post_excerpt: $(this).val(),
nonce: ajax_object.ajax_nonce
},
function(response) {
return true;
});
return false;
});
});
I put the code in https://github/kungfupress/kfp-ajax-update