如何检查值是否已存在于 Javascript 中的文本字段中

Question

我有一组用户。 每次单击delete button ，它都会添加到我已经实现的输入文本字段中。 如果用户已经在deleted_user字段上，我如何显示剩余的未选择用户。

前任。 如果 Jan 和 Mike 已经在deleted_user字段中。 接下来是点击submit users button ，只会出现山姆

        <td><button onclick="deleteVal('Jan');" > Delete </button></td>
        <td><input type="text" name="users[]" value="Jan"> </td>

        <td><button onclick="deleteVal('Mike');"> Delete </button></td>
        <td> <input type="text" name="users[]" value="Mike"> </td>

        <td><button onclick="deleteVal('Sam');"> Delete </button></td>
        <td> <input type="text" name="users[]" value="Sam"> </td>


Deleted Users: <input type="text" id="deleted_user">

<button type="button" id="submit_users"> Submit Users </button> 
Final Users:<input type="text" id="final_users">

这是我的代码。

 function deleteVal(val) {
    var delete_id = val;
    var deleted_user = document.getElementById('deleted_user').value

    if(!deleted_user.includes(delete_id)) {
       var tempVal = document.getElementById('deleted_user').value += val + ',';    
    }
  }

Answer 1

希望这对你有帮助。

 var array_user = $("input[name='users[]']") .map(function() { return $(this).val(); }).get(); function deleteVal(val) { array_user = jQuery.grep(array_user, function(value) { return value != val; }); var delete_id = val; var deleted_user = document.getElementById('deleted_user').value if (!deleted_user.includes(delete_id)) { var tempVal = document.getElementById('deleted_user').value += val + ','; } jQuery('#final_users').val(array_user.toString()); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <td><button onclick="deleteVal('Jan');"> Delete </button></td> <td><input type="text" name="users[]" value="Jan"> </td> <td><button onclick="deleteVal('Mike');"> Delete </button></td> <td> <input type="text" name="users[]" value="Mike"> </td> <td><button onclick="deleteVal('Sam');"> Delete </button></td> <td> <input type="text" name="users[]" value="Sam"> </td> Deleted Users: <input type="text" id="deleted_user"> <button type="button" id="submit_users"> Submit Users </button> Final Users:<input type="text" id="final_users">

Answer 2

您可以使用此代码检查输入字段

var inputs = document.getElementsByTagName("input");
    for(var i=0;i<inputs.length;i++){
        if(inputs[i]){
            alert("valid");
        }
        else{
            alert("not valid");
        }
    }

Answer 3

我使用纯 Javascript：

 function deleteVal(val) { var delete_id = val; var deleted_user = document.getElementById('deleted_user').value; if(!deleted_user.includes(delete_id)) { var tempVal = document.getElementById('deleted_user').value += val + ','; for(var j=0; j<list.length; j++){ if(list[j]==delete_id){ list[j]=null; document.getElementById('final_users').value=list.join(" "); } } } } var list=[]; for(var i=0; i<document.querySelectorAll(".names").length; i++){ list[i] =document.querySelectorAll(".names")[i].value; } document.getElementById('final_users').value=list.join(" "); function checker(){ for(k=0; k<list.length; k++){ if(list[k]!=null){ alert("There are remaining unselected users : "+list.join(" ")); return; } } }

 <td><button onclick="deleteVal('Jan');" > Delete </button></td> <td><input class="names" type="text" name="users[]" value="Jan"> </td> <td><button onclick="deleteVal('Mike');"> Delete </button></td> <td> <input class="names" type="text" name="users[]" value="Mike"> </td> <td><button onclick="deleteVal('Sam');"> Delete </button></td> <td> <input class="names" type="text" name="users[]" value="Sam"> </td> Deleted Users: <input type="text" id="deleted_user"> <button onclick="checker()" type="button" id="submit_users"> Submit Users </button> Final Users:<input type="text" id="final_users">

这就是我的理解。