Hola todos necesito ayuda por favor. Recién comencé con esto de JavaScript y HTML y me surge un problema: necesito leer la URL enviada por metodo GET
que es la siguiente
http://localhost/Form/view/destino.htm?nombre=adasd&correo=asd%40asd.com &sex=Masculino&carrera=ITI&fecha=05%2F17%2F2015&EstanciaI=on&EstanciaII=on
Y quiero leer los datos usando solo JavaScript y mostrarlos, pero no logro encontrar nada si me ayudan seria de lujo.
Más info: tengo un archivo llamado form.htm
con el siguiente código:
<!-- código HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../img/favicon.ico"> <title>Formulario</title> <!-- Bootstrap core CSS --> <link href="../css/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="justified-nav.css" rel="stylesheet"> <link href="../css/bootstrap-3.2.0-dist/css/theme.green.css" rel="stylesheet"> <link href="../css/bootstrap-3.2.0-dist/css/jquery-ui.min.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../js/ie-emulation-modes-warning.js"></script> <script src="../js/jquery/jquery-2.1.1.min.js"></script> <script src="../js/jquery/jquery-ui.min.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <script type="text/javascript"> $(document).ready(function(){ $("#fecha").datepicker(); }) </script> <!-- Example row of columns --> <fieldset> <div><legend>Formulario</legend></div> <form action="destino.htm" name="form" method="GET" role="form"> <div class="form-group"> <label> Nombre </label> <input type="text" required class=form-control name="nombre" id="fnombre" placeholder="Escribe tu nombre completo"> </div> <div class="form-group"> <label for="femail"> Email </label> <input type="email" name="correo" class=form-control id= "femail" placeholder="Escribe tu correo electronico"> <div class="form-group"> <div> <div class="form-group"> <div><label for = "fgenero"> Genero:</label></div> <input type="radio" name="sex" value="Masculino" checked>Masculino <br> <input type="radio" name="sex" value="Femenino">Femenino <br><br> </div> <div> <label for="fCarrera"> Carrera </label> <select id= "fCarrera" name="carrera" class="form-control"> <option> ITI</option> <option> IE</option> <option> II</option> <option> IET</option> </select> </div> <div class="form-group"> <label> Fecha </label> <input type="text" class=form-control id="fecha" name="fecha"/> </div> <div class="form-group"> <p> Estancias/Estadias terminadas:</p> <label for="EstanciaI">EstanciaI</label> <input type="checkbox" name="EstanciaI"><br> <label for="EstanciaII">EstanciaII</label> <input type="checkbox" name="EstanciaII"><br> <label for="Estadia">Estadia</label> <input type="checkbox"name="Estadia"> </div> <br><button type="submit" value="enviar" class="btn btn-default"> Enviar </button> </div> </div> </form> </fieldset> </div> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../js/ie10-viewport-bug-workaround.js"></script> </body> </html>
Y el archivo destino.htm
<!-- código HTML --> <!DOCTYPE html> <head> <script> function getVarsUrl() { var url= location.search.replace("?", ""); var arrUrl = url.split("&"); var urlObj={}; for(var i=0; i<arrUrl.length; i++) { var x= arrUrl[i].split("="); urlObj[x[0]]=x[1] } return urlObj; } </script> </head> <body> </body> </html>
Pero no he logrado mostrar los datos leídos en el archivo llamado Form.htm
, notese que soy muy nuevo en esto y apenas se sobre el tema.
Respuestas
En el archivo form.htm
cuyo código nos has enseñado no hay ninguna instrucción dedicada a descargar la URL que indicas. Lo que tienes que hacer es utilizar los métodos para Ajax de jQuery. En tu caso, te bastaría con usar el método $.get()
:
<script type="text/javascript"> $(document).ready(function(){ var url = 'http://localhost/Form/view/destino.htm?nombre=adasd&correo=asd%40asd.com&sex=Masculino&carrera=ITI&fecha=05%2F17%2F2015&EstanciaI=on&EstanciaII=on'; $.get(url, function(respuesta) { console.log(respuesta); }); }) </script>
@javiereguiluz