Material Didático

Cursos / Informática para Internet / Desenvolvimento Web I / Aula

Aula 15 - Desenvolvendo uma livraria virtual – Parte 4

Melhorando a funcionalidade de “Finalizar Compras”

A última mudança que faremos na Livraria Virtual é relacionada ao processo de finalização de compra.

Nessa modificação, iremos obrigar o usuário a digitar nome e número do cartão de crédito para finalizar a compra. Essa verificação será feita através do uso de JavaScript, aplicado aos campos do formulário HTML. A solução completa pode ser vista no trecho de código abaixo.

<%@ include file="/cabecalho.jsp" %>
		<script>
			function comprar(){

var form = document.getElementById("form");
                var nome = document.getElementById("nome");
                var cartao = document.getElementById("cardnum");

if(nome.value == null || nome.value == ""){

alert("Digite seu nome");
                    return false;

} else if(cartao.value == null || cartao.value == "" || cartao.value=="xxxx.xxxx.xxxx.xxxx") {
                    alert("Digite o número do cartão");
                    return false;
                } else {
                    form.submit();
                }
            }

function limparCartao(){
                var cartao = document.getElementById("cardnum");

if(cartao.value == "xxxx.xxxx.xxxx.xxxx"){
                    cartao.value = "";
                }
            }

</script>

<p>Valor total da compra:

<p>Para efetuar a compra dos livros selecionados, informe os seguintes dados:<c:url var="url" value="/livros/recibo"/>

<tr>
					<td><strong>Número do cartão:</strong></td>
					<td><input type="text" name="cardnum" id="cardnum" onfocus="limparCartao()"	value="xxxx.xxxx.xxxx.xxxx" size="16"></td>
				</tr>

</table>
		</form>
<%@ include file="/rodape.jsp" %>

Listagem 4 - Script de finalização de compra

Como pode ser visto, as mudanças realizadas estão destacadas. Inicialmente, foram definidas duas funções JavaScript. A primeira delas, de nome comprar(), será chamada quando o usuário clicar no botão “Comprar”, sendo responsável por validar se os dois campos foram preenchidos pelo usuário antes de permitir que o formulário seja enviado ao servidor. A segunda função, limparCartao(), tem como objetivo limpar o campo “Número do Cartão”, assim que o mesmo for selecionado.

Termo de uso

arrow_back Aula 15 - Desenvolvendo uma livraria virtual – Parte 4

Melhorando a funcionalidade de “Finalizar Compras”

Aula 15 - Desenvolvendo uma livraria virtual – Parte 4