Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm designing a Front-End user profile page, allowing users to view and update their own profile information. I have the template page made, with the code to edit the profile fields as a whole from a previous network question (How to edit a user profile on the front end?), very helpful.

My question is, How can I attach an update function to a button or a link for each text field, rather than have one button for the entire form?

I've seen many examples here, but none bring the 2 concepts together.


         <form method="post" id="adduser" action="<?php the_permalink(); ?>">
                    <p class="form-username">
                        <label for="first-name"><?php _e('First Name', 'profile'); ?></label>
                        <input class="text-input" name="first-name" type="text"
                            value="<?php the_author_meta( 'first_name', $current_user->ID ); ?>" />
                    <!-- .form-username -->
                    <p class="form-username">
                        <label for="last-name"><?php _e('Last Name', 'profile'); ?></label>
                        <input class="text-input" name="last-name" type="text"
                            value="<?php the_author_meta( 'last_name', $current_user->ID ); ?>" />
                    <!-- .form-username -->
                    <p class="form-email">
                        <label for="email"><?php _e('E-mail *', 'profile'); ?></label> <input
                            class="text-input" name="email" type="text" id="email"
                            value="<?php the_author_meta( 'user_email', $current_user->ID ); ?>" />

                    // action hook for plugin and extra fields
                    do_action ( 'edit_user_profile', $current_user );
                <p class="form-submit"> <?php echo $referer; ?>
                    <input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Update', 'profile'); ?>" />
                    <?php wp_nonce_field( 'update-user' )?>
                    <input name="action" type="hidden" id="action" value="update-user" />
                    <!-- .form-submit -->

jQuery I want to Use:

$(document).ready(function () {
$(".editlink").on("click", function (e) {
    var datasets = $(this).prevAll(".datainfo");
    var savebtn = $(this).next(".savebtn");
    datasets.each(function () {
        var theid = $(this).attr("id");
        var newid = theid + "-form";
        var currval = $(this).text();
        $(this).html('<input type="text" name="' + newid + '" id="' + newid + '" value="' + currval + '" class="hlite">');

    $(this).css("display", "none");
    savebtn.css("display", "block");

$(".savebtn").on("click", function (e) {
    var elink = $(this).prev(".editlink");
    var datasets = $(this).prevAll(".datainfo");
    datasets.each(function () {
        var newid = $(this).attr("id");
        var einput = $("#" + newid + "-form");
        var newval = einput.val();

    $(this).css("display", "none");
    elink.css("display", "block");

I want to have the 2 work together. I'm Stumped!!!

share|improve this question

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.