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.