jquery - 使用 jQuery 将输入字段替换为文本字段

问题描述

我在我的网站上创建了一些“明信片”，每个明信片都有一个允许用户输入电子邮件地址的表格。一旦用户单击提交按钮并将其替换为 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);

});

标签： jqueryreplace

在电子邮件输入字段中添加一些类

成功后

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

然后替换

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

jquery - 使用 jQuery 将输入字段替换为文本字段

问题描述

解决方案

推荐阅读