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.

Excerpt:

         <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"
                            id="first-name"
                            value="<?php the_author_meta( 'first_name', $current_user->ID ); ?>" />
                    </p>
                    <!-- .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"
                            id="last-name"
                            value="<?php the_author_meta( 'last_name', $current_user->ID ); ?>" />
                    </p>
                    <!-- .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 ); ?>" />
                    </p>

              <?php
                    // 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" />
                    </p>
                    <!-- .form-submit -->
                </form>

jQuery I want to Use:

$(document).ready(function () {
$(".editlink").on("click", function (e) {
    e.preventDefault();
    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) {
    e.preventDefault();
    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();
        einput.remove();
        $(this).html(newval);
    });

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

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

share|improve this question
add comment

Your Answer

 
discard

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

Browse other questions tagged or ask your own question.