Используйте jQuery для замены поля ввода текстовым полем

Question

Я создал несколько «открыток» на своем веб-сайте, каждая из которых имела форму, позволяющую пользователям вводить адрес электронной почты. Мне нужно найти способ удалить поле ввода электронной почты, как только пользователь нажмет кнопку отправки и заменит его тегом ap. Я также использую evt.currentTarget, чтобы нацеливать только выбранную «открытку». Мне нужно убедиться, что когда я заменяю поле ввода тегом ap, я заменяю только те, которые находятся внутри выбранной цели.

мой код ниже ...

 <div class="post-share">
                <span class="share-btn">Share</span>
                <form name="<?php echo the_title(); ?>" class="post-share-form" action="">
                    <label>Share via email</label><br>
                    <input title="<?php echo the_title(); ?>" type="email" link="<?php the_permalink(); ?>" required name="email" placeholder="example@email.com"><br>
                    <div class="flex flex-submit">
                        <label class="form-summary"></label>
                        <input type="submit" value="Submit" /><i class="fa fa-spinner fa-spin disable"></i>
                    </div>

                </form>
            </div>

function handleShareFormSubmit(evt) {
    evt.preventDefault();

    var $emailInput = $(evt.currentTarget).find("input[type=email][name=email]"),
        $postTitle = $emailInput.attr("title"),
        $postLink = $emailInput.attr("link"),
        //Getting serialized form data
        $formData = $(evt.currentTarget).serializeArray();

    $.ajax({
        url: home_params.ajaxurl,
        data: {
            action: 'send_email',
            formData: $formData,
            postTitle: $postTitle,
            postLink: $postLink,
        },
        type: 'POST',
        beforeSend: function(xhr) {
            //do stuff to show user form is in motion
            //add a spinner             
            $(evt.currentTarget).find('i.fa.fa-spinner.fa-spin').removeClass('disable'); 
        },
        success: function(response) {
            //handle the response
            console.log(response);

            if(response) {
                console.log(response);

                if(response.status === 200) {
                    $emailInput.val('Thank you!');
                    console.log($postTitle + $postLink);
                } else {
                    console.log("Failed to submit. Status not 200 :(");
                    $(evt.currentTarget).find("label.form-summary").text("Error.").addClass('error').delay(6000).slideToggle(); 
                }
            } 
            $(evt.currentTarget).find('i.fa.fa-spinner.fa-spin').addClass('disable');
            $(evt.currentTarget).find("label.form-summary").text("Success! Thank you!").addClass('success').delay(6000).slideToggle(); 
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
            $(evt.currentTarget).find('i.fa.fa-spinner.fa-spin').addClass('disable'); 
        }
        //look into aftersend ajax function to add (??)
    });
}
$(function(){

    $('.post-share-form').on('submit', handleShareFormSubmit);

});

Answer 1

поместите некоторый класс в поле ввода электронной почты

после успеха

var email = $('className').val();

затем замените

$('className').remove();
$('label').after("<p>"+email+"</p>")