Input mezők értékének törlése egyenként gombbal
Olyan feladatba futottam bele, ahol input mezők értékét kellett törölni egy űrlapon, ahol több dátum mező volt, amihez jquery dátumválasztó volt rendelve, azonban a kiválasztott értéket manuálisan módosítni nem lehet (disabled).
A legkézenfekvőbbnek egy javascript megírása tűnt. A következő kód az oldalon fellelhető összes dátumválasztó esetén megoldást jelentett:
<script type="text/javascript">
function DateClear() {
var numbs = document.getElementsByClassName("datetimepicker").length;
var x = document.getElementsByClassName("datetimepicker");
for(var i = 0; i < numbs; i++){
document.getElementById(x[i].id).insertAdjacentHTML('afterend', 'X');
}
};
DateClear();
function ClearDate(e){
$(e).val("");
};
</script>
itt a datetimepicker class segítségével van dátum-idő választó jQuery meghívva. Ugyan ezt a class-t felhasználva lekérdezzük az előfordulások számát, majd minden előfordulás ID-je alapján kiválasztjuk és az adott input tag után fűzünk egy span-t, aminek az onclick eseménye az adott ID-jű input értékét üresre állítja.
A gomb megjelenését konkrét esetben így formáztam:
<style>
.datetimepicker:hover+span.clearbtn, span.clearbtn:hover {
cursor: pointer;
display: inline-block;
margin-left: -30px;
padding: 4px 5px;
border-radius: 2px;
background-color: #af0f0f;
width: 20px;
height: 20px;
line-height: 22px;
color: #fff;
font-size: 12px;
text-align: center;
}
</style>
Érdekesség: a két class közötti + lehetővé teszi, hogy az egymást szorosan követő elemek 2. részéhez egyedi formázást rendeljünk. Adott esetben az input mezőt követően került beillesztésre a .clearbtn osztályú span, amit szerettünk volna az inputhoz kötötten megjeleníteni és formázni.