Vanilla Javascript - #26 Formulários II

Continuaremos nessa vídeo-aula a parte II de formulários trazendo a manipulação de mais elementos dos nossos forms.

Implementando elementos no HTML

No html criaremos os elementos input checkbox, input radio, button e select.

<form name="form1" id="form1" method="post" action="controller.php">
    <input type="checkbox" name="check" id="check" value="confirmation"> Confirmation <br>
    <input type="radio" name="gender" value="Male"> Male <br>
    <input type="radio" name="gender" value="Female"> Female <br>
    <select name="sel" id="sel">
        <option value="">Select</option>
        <option value="one">1</option>
        <option value="two">2</option>
    </select><br>
    <button name="btn" id="btn">Submit</button>
</form>

Manipulando elementos no JS Vanilla

No Javascript manipularemos as propriedades desses elementos:

let check=doc.querySelector('#check');
let sel=doc.querySelector('#sel');
let radio=doc.getElementsByName('gender');
let btn=doc.querySelector('#btn');

//Checkbox
console.log(check.checked);
if(check.checked == false){
    alert('Accept the terms');
}

//Radio
// console.log(radio);
function radioTest(event)
{
    if(event.target.value=='Male'){
        alert('Male');
    }else{
        alert('Female');
    }
}
for(let i=0; i < radio.length; i++){
    radio[i].addEventListener('click',radioTest,false);
}

//Select
// console.log(sel);
function selValidate(event)
{
    if(event.target.selectedIndex==0){
        alert('Selecione pelo menos 1 opção');
    }
}
sel.addEventListener('change',selValidate,false);

//Button
//console.log(btn)
function submitForm(event){
    event.preventDefault();
}
btn.addEventListener('click',submitForm,false);

Sucesso nos códigos e na vida!