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

Question

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

vadivel a · Accepted Answer · 2020-02-16 15:10:07Z

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

thank you sir. but would it be hard to check the fields exists on deleted_users before clicking the submit button? This is my code to populate the fields on final_user field. var users_value = []; $('input[name="users[]"]').each(function() { users_value.push($(this).val()); }); if(users_value.length) { users_value = users_value.filter((a, b) => users_value.indexOf(a) === b); } $(".modal-body #final_users").val(users_value);
Can you use already used code var array_user = $("input[name='users[]']") .map(function(){return $(this).val();}).get(); array_user = jQuery.grep(array_user, function(value) { return value != val; }); jQuery('#final_users').val(array_user.toString());
not gonna work sir, because it is only switching between the select and unselected names. so next is by clicking the submit, if the names already exist on deleted_users it will not appear on final_users. so I need to populate the deleted_user field first and then next is the final_user field

Abderrahmane Ahmam · Accepted Answer · 2020-02-16 15:16:38Z

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"); } }

octavio · Accepted Answer · 2020-02-16 16:45:25Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related