使用 jQuery 将输入字段替换为文本字段答案

【问题标题】：Use jQuery to replace input field with text field使用 jQuery 将输入字段替换为文本字段
【发布时间】：2020-01-09 05:26:23
【问题描述】：

我在我的网站上创建了一些“明信片”，每个明信片都有一个表格允许用户输入电子邮件地址。一旦用户单击提交按钮并将其替换为 p 标签，我需要找到一种方法来删除电子邮件输入字段。我也在使用 evt.currentTarget 以便我只针对选定的“明信片”。我需要确保当我用 p 标签替换输入字段时，我会替换所选目标中的唯一字段。

下面是我的代码...

 <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);

});

【问题讨论】：

你的p标签替换逻辑在哪里？
我想我在等着看是否有人对更好的方法有建议？我正在考虑使用标签标签而不是 p 标签。在这种情况下，我会将标签留空并根据成功或错误填充文本。我将修改上面的代码以供参考。

标签： jquery replace

【解决方案1】：

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

成功后

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

然后替换

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

【讨论】：

谢谢。我会试试看的。
简短回答，是的！我最终将标签添加到 HTML 代码中，然后使用 jQuery 的 slideToggle 功能在成功或错误后显示标签。然后我使用 jQuery 的 .text() 来指定标签的值是否为“成功！”或“错误”。谢谢！