Use jQuery to replace input field with text field

Question

I created some "post-cards" on my website with each having a form to allow users to enter an email address. I need to find a way to remove the email input field once a user clicks the submit button and replace it with a p tag. I am also using evt.currentTarget so that I only target the selected "post-card". I need to make sure that when I replace the input field with a p tag I replace the only ones within the selected target.

my code below...

 <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="[email protected]"><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);

});

I suppose I was waiting to see if someone had a suggestion for a better method? I am thinking of going with a label tag instead of a p tag. In this scenario, I would leave the label empty and populate the text based on success or error. I'll revise my code above for reference. — MaLandra_88
– MaLandra_88, Commented Jan 8, 2020 at 21:24

Ravi · Accepted Answer · 2020-01-08 19:29:40Z

1

put some class to email input field

after success

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

then replace

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

answered Jan 8, 2020 at 19:29

Ravi

3242 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MaLandra_88 Over a year ago

Thank you. I'll give this a go.

MaLandra_88 Over a year ago

Short answer, yes! I ended up adding the label into the HTML code and then used jQuery's slideToggle feature to display the label after success or error. I then used jQuery's .text() to specify if the label's value was "Sucess!" or "Error". Thank you!

Collectives™ on Stack Overflow

Use jQuery to replace input field with text field

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related