如何檢查值是否已存在於 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">

這就是我的理解。