How to insert a Client with HTML5 javascript

Asked

Viewed 1,844 times

0

var clientes = [];

function classClientes(nro, nome, sexo,dataNasc) {
    this.nro = nro;
    this.nome = nome;
    this.sexo = sexo;
    this.dataNasc = dataNasc;
}



function criarCliente() {
    var numeroCliente = document.getElementById("txtNumero").value;
    var nomeCliente= document.getElementById("txtNome").value;
    var sexoCliente = document.getElementById("txtNome").value;
    var dataNascCliente = document.getElementById("dataNasc").value;

    var repete = 0;

    if (!isNaN(numeroCliente) && !isNaN(nomeCliente) && !isNaN(sexoCliente)) {
        for (var j = 0; j < clientes.length; j++) {
            if (clientes[j].nro == numeroCliente) {
                clientes[j].nome = nomeCliente;
                clientes[j].sexo = sexoCliente;
                repetido = 1;
            }
            if (repetido == 0) {
                var novoCliente = new classClientes(numeroCliente, nomeCliente, sexoCliente, dataNascCliente);
                clientes.push(novoCliente);
            }

        }
    }
}

I need to enter a new client when the user fills in the form (code below) as I do this using a javascript function and calling the function in an HTML5 button inside the form that the form is?

Form code with form (HTML5):

<!DOCTYPE html>
<html lang="pt-pt">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>

<div id="novoCliente">
        <form action="#">
            <label for="lbNumero">Número:</label>
            <input type="text" id="txtNumero" style="width:250px" /><br />
            <label for="lbNome">Nome:</label>
            <input type="text" id="txtNome" style="width:250px" /><br />
            <label for="lbSexo">Sexo:</label>
            <input type="radio" name="sexo" value="masculino">Masculino
            <input type="radio" name="sexo" value="feminino">Feminino <br />
            <label for="lbDataNasc">Data Nascimento:</label>
            <input type="date" id="dataNasc" /><br />
            <input type="button" id="criarCliente" class="botaoOperacao" value="Criar" onclick="javascript: criarCliente();" />
            <input type="reset" id="cancelar" class="botaoOperacao" value="Cancelar"/>
        </form>
    </div>
  
  </body>
  </html>

javascript html5
  • 1

    Can you explain better where you want to "insert a new client"? Create another div in HTML <div id="novoDoente">? within the existing form? in a database? Explain better what you want to do to help better...

  • I am not saving in a database...the information will be lost with each re-load of the html page, it was even to be able to work better with javascript since I have some difficulty

  • I place here my attempt

1 answer

1

Below is one of the ways to do it: P.S.: Don’t worry about the HTML itself, because I decided to apply one layout Responsible, the important thing is Javascript

JAVASCRIPT

var clientes = [];

var txtNumero = document.getElementById("txtNumero");
var txtNome= document.getElementById("txtNome");
var rbSexos = document.getElementsByName('rbSexos');
var txtDataNasc = document.getElementById("txtDataNasc");

var tmplLinha = document.getElementById("tmplLinha");
var tbody = document.getElementsByTagName("tbody")[0];
var btCriarCliente = document.getElementById("btCriarCliente");

isNullOrWhiteSpace = function (str) {
    return !str || str.trim().length == 0;
}

btCriarCliente.onclick = function () {
    var cliente = {};    
    var sexo = ""
    var novaLinha = document.createElement('tr');    
    for (var i = 0; i < rbSexos.length; i++) {
        if (rbSexos[i].checked) {
            sexo = rbSexos[i].value;
        }
    }

    cliente = {
        Numero: parseInt(txtNumero.value),
        Nome: txtNome.value,
        Sexo: sexo,
        DataNasc: new Date(txtDataNasc.value),
    }

    if (isNaN(cliente.Numero) || isNullOrWhiteSpace(cliente.Nome) || isNullOrWhiteSpace(cliente.Sexo) || isNaN(cliente.DataNasc.getTime())) {
        return;
    }

    for (var indice in clientes) {
        if (clientes[indice].Numero == cliente.Numero) {
            return;
        }
    }

    clientes.push(cliente);

    novaLinha.innerHTML = tmplLinha.innerHTML;
    for (var indice in novaLinha.childNodes) {
        var celula = novaLinha.childNodes[indice];
        if (celula.nodeType == 1) {            
            switch(celula.dataset.column) {
                case "Numero": celula.innerHTML = cliente.Numero.toString(); break;
                case "Nome": celula.innerHTML = cliente.Nome; break;
                case "Sexo": celula.innerHTML = cliente.Sexo; break;
                case "DataNasc": celula.innerHTML = cliente.DataNasc.toDateString(); break;                
            }
        }
    }

    tbody.appendChild(novaLinha);
    return;
}

HTML

<form action="#">
    <div class="row">
        <div class="small-3 columns">
            <label for="lbNumero">Número:</label>
        </div>
        <div class="small-9 columns">
            <input type="text" id="txtNumero" />
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">
            <label for="lbNome">Nome:</label>
        </div>
        <div class="small-9 columns">
            <input type="text" id="txtNome" />
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">
            <label for="lbSexo">Sexo:</label>
        </div>
        <div class="small-9 columns">
            <input type="radio" name="rbSexos" value="masculino" />Masculino
            <input type="radio" name="rbSexos" value="feminino" />Feminino
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">    
            <label for="lbDataNasc">Data Nascimento:</label>
        </div>
        <div class="small-9 columns">
            <input type="date" id="txtDataNasc" />
        </div>
    </div>
    <div class="row">
        <div class="small-3 columns">   
        </div>
        <div class="small-9 columns">   
            <input type="button" id="btCriarCliente" class="button small" value="Criar" />
            <input type="reset" id="btCancelar" class="button small" value="Cancelar"/>
        </div>
    </div>
</form>

<table>
    <thead>
        <tr>
            <th>Numero</th>
            <th>Nome</th>
            <th>Sexo</th>
            <th>Data Nasc.</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script id="tmplLinha" type="text/x-jsrender">
    <td data-column="Numero"></td>
    <td data-column="Nome"></td>
    <td data-column="Sexo"></td>
    <td data-column="DataNasc"></td>
</script>

CSS

.row label {
    text-align: right;
    padding-top: 8px;
}

.row .columns {
    padding: 0px 1%;
}

.row input[type="radio"] {
    margin: 12px 0px !important;
}

table {
    margin: 0px 1% 8px 1%;
    width: 98%;    
}

jsFiddle

  • From what I understand the part of javascript that is relevant. Apparently AP wants to understand how to create a client object and insert the values into that object. As if "client" were a class. Where part of your response is being created a customer?

  • Well, I really should have addressed this as well, as soon as possible I make a correction in the reply. In any case this answer is still useful to him, because his main intention is to familiarize himself with Javascript

  • @Renan, the answer is corrected.

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.