简体   繁体   中英

How to Check If a Value Already Exists in a Text Field in Javascript

I have a set of users. Each time the delete button is click it is added up to the input text field which I already implemented. If the users is already on the deleted_user field, how can I display the remaining unselected users.

Ex. If Jan and Mike are already on deleted_user field. Next is clicking the submit users button , only Sam will appear

        <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">

This is my code.

 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 + ',';    
    }
  }

Hope this help you.

 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">

you can use this code for check inputs fields

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

I used pure 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">

That is what I understood.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM