Unable to prevent a user with same name as in table from adding using jquery contains check

93
November 22, 2016, at 09:18 AM

Here is my fiddle: http://jsfiddle.net/jd5pgdz2/4/

When I am trying to add a user with the same name as in my table(the two users displayed are static in my html), it still lets me add it. I am using contains to check if the username already exists in the table by grabbing value from textbox upon create button click . As per my code, it should let it add only if that user name doesnt exist in the table. However, its not letting me do that.

Here is my jquery:-

$(document).find("button").button();
$("#create").click(function(){
     var userNamePresentInTable=$("#usr").val();
    if($("table:contains('" + userNamePresentInTable + "')").text() === userNamePresentInTable){
        //$("#error").text(userNamePresentInTable);
      $("#error").text("user already exists");
    }else{
    var tr=$('<tr></tr>');
    var enteredVal=$("#usr").val();
    var td_username=$('<td></td>',{
        text:  $("#usr").val()
    }).addClass("editableFields").appendTo(tr);
    var td_level=$('<td></td>', {
        text: "User"
    }).appendTo(tr);
    var td_buttons=$('<td></td>',{
        html: '<button class="edit">Edit</button> <button class="del">Delete</button> <button class="apply">Apply</button>'
    }).appendTo(tr);
    $(tr).find("button").button();
    $(".userTable").append(tr);
    }
});
    /*For old data already present in the table*/
    $(document).on("click",".edit",function(){
        var currentItem = $(this).parents("tr").find("td");
            $.each(currentItem, function(){
                if($(this).hasClass("editableFields")){
                $(this).prop("contenteditable",true);
                $(this).css("border-color","red");
                }
            });
    });
    $(document).on("click",".del",function(){
       var currentItem=$(this).parents("tr").find("td");
        $.each(currentItem,function(){
            $(this).remove();
        });
    });
    $(document).on("click",".apply",function(){
        var currentItem=$(this).parents("tr").find("td");
        $.each(currentItem,function(){
            $(this).prop("contenteditable",false);
            $(this).css("border-color","");
        });
    });

Here is my html:

    <table class="userTable">
    <tr>
        <th class="uName">Username</th>
        <th class="uLevel">Level</th>
        <th class="uOpt">Options</th>
    </tr>
    <tr>
        <td class="editableFields">User 1</td>
        <td> User</td>
        <td><button class="edit">Edit</button>
            <button class="del">Delete</button>
            <button class="apply">Apply</button></td>
    </tr>
    <tr>
        <td class="editableFields">User 2</td>
        <td> User</td>
        <td><button class="edit">Edit</button>
            <button class="del">Delete</button>
            <button class="apply">Apply</button></td>
    </tr>
</table>
    <div class="clear"></div> <div class="clear"></div>
       <p>Add User</p>
       <div class="clear"></div>
        <label for="usr">Username</label>
        <input type="text" name="usr" id="usr">
        <label for="pwd">Password</label>
           <input type="password" name="pwd" id="pwd">
          <button id="create">Create</button>
         <div id="error">
           </div>
Answer 1

This is my updated fiddle : http://jsfiddle.net/jd5pgdz2/5/

var userNamePresentInTable=$("#usr").val();
    if($("td:contains('" + userNamePresentInTable + "')").text() === userNamePresentInTable){
        //$("#error").text(userNamePresentInTable);
      $("#error").text("user already exists");
    }else{

Basically replacing table just before contains in my if statement with td does the trick.

READ ALSO
Can&#39;t get Jquery success method to work

Can't get Jquery success method to work

For the life of me cannot figure out how to display the values I'm returning from my 'cics' object from my controller. When I debug the controller it is returning the value.

102
Is it possible for the click delay to restart on a new click

Is it possible for the click delay to restart on a new click

I have a list of ZIP codes that will each have a checkbox next to them. When the user checks or unchecks a ZIP, I'm redrawing a map that has the ZIP polygons drawn onto it.

72
Multiple upload files with ajaxForm plugin

Multiple upload files with ajaxForm plugin

I used the ajaxForm plugin to make multiple upload. The upload works perfectly, even can add files to the list and remove.

66
What&#39;s the best way to loop over an array in JSON?

What's the best way to loop over an array in JSON?

So I have a JSON file that has a departures array within it. I'd like to loop over each bus line and display them in div's like so:.

70