Jquery Insert html after an element removing existing elements

Question

Hello (I couldn't find any similar question to this one, if you do please let me know), The goal to be achieved here is to insert html content after an element and if html content was inserted before remove it. My code right now [Partial HTML and Js]

<form method="POST" action="somePage.php">
    <input type="text">
    <input type="text">
    <input type="submit">
</form>
<script>
    $(document).ready(function (){
        $("form").on("submit",function (e){
            e.preventDefault();
            $(this).find(":text").each(function (){
                if($(this).val()==''){
                    $(this).after("<p class='error'>Please fill this field</p>");
                }
            });
        });
    });
</script>

The code does its job but the problem is that if the form is submited more than once the text "please fill this field" is displayed multiple times I have thought about putting a span (or div) after every input and writing the next code:

 $(this).next("span").html("<p class='error'>Please fill this field</p>");

That would be a solution but the problen would be that I would have to write a span after every input I would want to validate and that would not be efficient. I'd like to know a better way to achieve this, If you could tell me that would be awesome,

Neil · Accepted Answer · 2017-05-01 19:38:46Z

2

A way of doing this is to remove all the errors and then readd applicable ones.

$(document).ready(function (){
    $("form").on("submit",function (e){
        e.preventDefault();
        $("p.error").remove();
        $(this).find(":text").each(function (){
            if($(this).val()==''){
                $(this).after("<p class='error'>Please fill this field</p>");
            }
        });
    });
});

input {
  display:block;
  margin-top:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="somePage.php">
    <input type="text">
    <input type="text">
    <input type="submit">
</form>
<script>

</script>

answered May 1, 2017 at 19:38

Neil

14.3k3 gold badges35 silver badges53 bronze badges

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

Comments

Hassan Jalil · Accepted Answer · 2017-05-01 19:42:24Z

1

Just remove the dom element with the class error every time the form is submitted like below

<form method="POST" action="somePage.php">
    <input type="text">
    <input type="text">
    <input type="submit">
</form>
<script>
    $(document).ready(function (){
        $("form").on("submit",function (e){
            e.preventDefault();
            : $( "form . error" ).remove();
            $(this).find(":text").each(function (){
                if($(this).val()==''){
                    $(this).after("<p class='error'>Please fill this field</p>");
                }
            });
        });
    });
</script>

This way all the error will be removed when submit is clicked. And if non exist, nothing will be removed

edited May 1, 2017 at 19:42

answered May 1, 2017 at 19:37

Hassan Jalil

1,2034 gold badges16 silver badges36 bronze badges

1 Comment

Heriberto Juarez Over a year ago

I didn't thought about that, sound a great solution the problem would be taht if i have other elements outside the form with the same class, they would be removed, I could do the next: $( "form .error" ).remove(); Since you gave me the key to solving this problem I'll choose your answer, Thank you a lot.

Collectives™ on Stack Overflow

Jquery Insert html after an element removing existing elements

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related