#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0

    JQuery & .after() method


    I have some code that asks a user for their name from a webpage;

    Customer Entry
    First Name: _________________
    Last Name: _________________
    [Add A New Customer] <=Submit button




    HTML Code:
    <head>
    <script type = “text/javascript”>
    $(document).ready(function () {
    $(“#btnSubmit”).click(function () {
    var first, last;

    first = $(“#txtName”).val();
    last = $(“#txtLastName).val();

    if (first.length == 0) {
    $(“#txtName”).css(“background-color”:”Red”).after(“<span>First Name Is Required.</span>”);
    }
    else {
    $(“#txtName”).css({“background-color”:”White”, “border”:”1px groove”});
    }

    if (last.length == 0) {
    $(“#txtLastName”).css(“background-color”:”Red”).after(“<span>Last Name Is Required.</span>”);
    }
    else {
    $(“#txtLastName”).css({“background-color”:”White”, “border”:”1px groove”});
    }
    });
    });
    </script>
    <head>

    <body>
    <div id = “myDIV”>Customer Entry</div>
    <br>First Name: <input type = “text” id = “txtName” />
    <br>Last Name: <input type = “text” id = “txtLastName” />
    <input type = “button” id = “btnSubmit” value = “Add A New Customer” />
    </body>



    Now everything works except I can’t delete the “after” message. The color changes back to normal with no problem. In testing I end up with the following after adding a first name on the 3rd try;

    Customer Entry
    First Name: Fname___________ First Name Is Required.First Name Is Required.
    Last Name: _________________ Last Name Is Required.Last Name Is Required.Last Name Is Required.Last Name Is Required.
    [Add A New Customer]



    In the above code there is no method to try to remove the text but I've tried to add a .remove() method in the else section, but that didn't work. Does anyone know how to clear out data added with a .after() method?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Originally Posted by OldManEd
    Does anyone know how to clear out data added with a .after() method?
    You can use the .html() API or the .text() API; to change or "clear out" the content of an element.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0
    Hey Web_Loone08, thanks for the "heads-up" on ".text()". I altered my code to what I have below and it works great.


    HTML Code:
    <head>
    <script type = “text/javascript”>
    $(document).ready(function () {
    $(“#btnSubmit”).click(function () {
    var first, last;

    first = $(“#txtName”).val();
    last = $(“#txtLastName).val();

    if (first.length == 0) {
    $(“#txtName”).css(“background-color”:”Red”);
    $("#missingName").text("First name is required!");
    }
    else {
    $(“#txtName”).css({“background-color”:”White”, “border”:”1px groove”});
    $("#missingName).text("");
    }

    if (last.length == 0) {
    $(“#txtLastName”).css(“background-color”:”Red”).after(“<span>Last Name Is Required.</span>”);
    $("#missingLName").text("Last name is required!");
    }
    else {
    $(“#txtLastName”).css({“background-color”:”White”, “border”:”1px groove”});
    $("#missingLName).text("");
    }
    });
    });
    </script>
    <head>

    <body>
    <div id = “myDIV”>Customer Entry</div>
    <br>First Name: <input type = “text” id = “txtName” /><span id = "missingName" style = "font-style:italic"></span>
    <br>Last Name: <input type = “text” id = “txtLastName” /><span id = "missingLName" style = "font-style:italic"></span>
    <input type = “button” id = “btnSubmit” value = “Add A New Customer” />
    </body>

IMN logo majestic logo threadwatch logo seochat tools logo