Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Luiz Lahr

Problemas com Form+JQuery+ASP

Por , em Javascript

Recommended Posts

Luiz Lahr    0

Luiz Lahr
Postado

Fala Galera, td bom?

 

Bom, ja deixando explicado que naum so nenhum expert em javascript, pelo contrario, sou um completa ameba em relação.

O problema eh o seguinte. Estou usando JQuery para umas frescurinhas visuais, e uns comandos JavaScript para validação do meu formulario.

Formulario este desenvolvido em Java. Os executam suas funcionalidades corretamente. Porem um passa reto na verificação do outro.

 

Por exemplo uma parte do codigo onde tem "if request.form("sent")="yes then ......"" que seria pra ser executado apenas quando o form eh reenviado.

esta sendo executada diretamente.

 

Alguem pode ajudar?? Segue abaixo as paginas.

 

teste_form_1.asp

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="css/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" />			 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>		  
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript">										 
	$(function() {
		// Dialog			
		$('#dialog').dialog({
			autoOpen: false,
			width: 600,
			buttons: {
				"Ok": function() { 
					ValidaForm(); 
				}, 
				"Cancel": function() { 
					$(this).dialog("close"); 
				} 
			}
		});
		
		// Dialog Link
		$('#dialog_link').click(function(){
			$('#dialog').dialog('open');
			return false;
		});
		
		//hover states on the static widgets
		$('#dialog_link, ul#icons li').hover(
			function() { $(this).addClass('ui-state-hover'); }, 
			function() { $(this).removeClass('ui-state-hover'); }
		);
	});
</script> 
<style type="text/css">
	/*demo page css*/
	body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
	.demoHeaders { margin-top: 2em; }
	#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
	#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
	ul#icons {margin: 0; padding: 0;}
	ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
	ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>															  
</head>																 
<body>																  

<%
	if request.form("sent") = "yes" then
		response.write request.form("txtNome")&"<br>"
		response.write request.form("txtNome")
%>
		<div class="ui-widget">
			<div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;"> 
				<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
				<strong>Dados enviados com sucesso:</strong> 
				Nome: <%=request.form("txtNome")%>, E-mail: <%=request.form("txtEmail")%></p>
			</div>
		</div>
<%
	end if
%>

<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p>
	<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
		<span class="ui-icon ui-icon-newwin"></span>Open Dialog
	</a>
</p>

<!-- ui-dialog -->
<div id="dialog" title="Cadastro de Usuarios">
	<form id="frmData" action="teste_form_1.asp">
		<input type="hidden" name="sent" value="yes">
		<label>Nome</label>
		<input type="text" name="txtNome" id="txtNome">
		<label>E-mail</label>
		<input type="text" name="txtEmail" id="txtEmail">
	</form>
</div>
</body>																 
</html>

utils.js

 

<!--##############################################-->
<!--##	CHECAGEM DE FORMULARIOS					##-->
<!--##############################################-->

function ValidaForm()
{
var checks = document.getElementsByTagName("input");

for(j=0;j<checks.length;j++)
	{
		if(checks[j].getAttribute("obrig") == "sim")
		{
			if(checks[j].value == "")
			{
				alert("Por favor, preencha o campo " + checks[j].getAttribute("nome") + " !");
				checks[j].focus();
				return;
			}
		}
	}
$(form).submit();
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luiz Lahr    0

Luiz Lahr
Postado

Galera ja consegui resolver o problema, segue abaixo como ficou o codigo:

 

PS: reduzi o numero de campos apenas para ficar mais facil a vizualização.

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Enviando dados por AJAX com jQuery</title>
<link type="text/css" href="css/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" />			 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>
<script type="text/javascript" src="js/effects.highlight.js"></script>
<script type="text/javascript" src="js/JQForm.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript"> 
	function Envia() {
		$("form")[0].submit();
	};
</script>
<script type="text/javascript"> 
// Quando o documento for lido
$(document).ready(function() {
	// quando o formulário for submetido
	var name = $("#nome"), // nome do campo no formulario
		allFields = $([]).add(name),
		tips = $("#validateTips");

	function updateTips(t) {
		tips.text(t).effect("highlight",{},1500);
	}

	function checkLength(o,n,min,max) {

		if ( o.val().length > max || o.val().length < min ) {
			o.addClass('ui-state-error');
			updateTips("Length of " + n + " must be between "+min+" and "+max+".");
			return false;
		} else {
			return true;
		}

	}

	function checkRegexp(o,regexp,n) {

		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass('ui-state-error');
			updateTips(n);
			return false;
		} else {
			return true;
		}

	}

	// Dialog			
	$('#dialog').dialog({
		autoOpen: false,
		width: 600,
		buttons: {
			"Ok": function() { 
				var bValid = true;
				allFields.removeClass('ui-state-error');

				bValid = bValid && checkLength(name,"username",3,16);
				if (bValid) {
					$('form')[0].submit();
					$(this).dialog('close');
				}


			}, 
			
			"Cancel": function() { 
				$(this).dialog("close"); 
			} 
		}
	});
	
	// Dialog Link
	$('#dialog_link').click(function(){
		$('#dialog').dialog('open');
		return false;
	});
	
	//hover states on the static widgets
	$('#dialog_link, ul#icons li').hover(
		function() { $(this).addClass('ui-state-hover'); }, 
		function() { $(this).removeClass('ui-state-hover'); }
	);
	
});
</script>
 
<style type="text/css"> 
	/*demo page css*/
	body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
	.demoHeaders { margin-top: 2em; }
	#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
	#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
	ul#icons {margin: 0; padding: 0;}
	ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
	ul#icons span.ui-icon {float: left; margin: 0 4px;}
#formulario {
	text-align: left;
	width: 330px;
	margin: 10px auto;
	padding: 10px;
	border: solid 1px #ccc;
}
#formulario input {
	margin-right: 10px;
	padding: 3px;
}
</style>
</head>
 
<body>
<p>
	<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
		<span class="ui-icon ui-icon-newwin"></span>Open Dialog
	</a>
</p>

<div id="dialog" title="Cadastro de Usuarios">
<div id="validateTips"></div>
<form id="formulario" method="post">
	<label>Digite seu nome</label>
	<input type="text" name="nome" id="nome" />
	
<!--	<button onclick="Envia()">Enviar</button>-->
</form>
</div>
<!--include file="mostra_nome.asp"-->
<div id="resposta">
<%
	nome= request.form("nome")
	
	if nome <> "" then	
		response.write "O Nome do usuário é: "&nome&" e o email: "&email
	end if
%>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito