Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosLink dentro de input
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Link dentro de input
por Don Corleone 02.11.17 17:38
Detalhes da questão
Endereço do fórum: http://somosmugiwara.forumeiros.com
Versão do fórum: PunBB
Descrição
Estou com uma dificuldade em javascript, veja o código abaixo.
- Código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#conteudo').load('http://somosmugiwara.forumeiros.com/t2492-ficha-aceita-de-ren-shimizu #atrificha',aviso());
});
function aviso(){
alert('O conteúdo será carregado agora!');
}
</script>
<div id="conteudo">
</div>
Ele simplesmente pega a informação do link e joga dentro do conteúdo, mas quero que este link seja escolhido por quem visita a página. O link é colocado dentro de um input e é carregado, como poderia fazer?
Última edição por Connor R. em 02.11.17 23:19, editado 1 vez(es)
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 20:53
O link pode ser um prompt?
Prompt é isso:
-> http://prntscr.com/h5gkw5
o/
- Código:
(function () {
var getLink = function (config) {
var link = prompt(config.question);
return link || config.error;
};
var link = getLink({
question: 'Qual o link?',
error: 'Não foi especificado nenhum link.'
});
alert(link);
}());
Prompt é isso:
-> http://prntscr.com/h5gkw5
o/
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 21:38
Em qual parte do código o senhor deseja injetar o link? o/
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 21:47
Onde está escrito linkaqui, dentro do código.
$('#conteudo').load('linkaqui #atrificha',aviso());
- Código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#conteudo').load('linkaqui #atrificha',aviso());
});
function aviso(){
alert('O conteúdo será carregado agora!');
}
</script>
<div id="conteudo">
</div>
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 21:54
Tente trocar o código de sua página por:
o/
- Código:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título da Página</title>
</head>
<body>
<div id="conteudo">
</div>
<!-- Script's. Colocar todo o HTML acima deste comentário. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">\
(function ($) {
'use strict';
var getLink = function (config) {
var link = prompt(config.question);
return link || config.error;
};
var link = getLink({
question: 'Qual o link?',
error: 'Não foi especificado nenhum link.'
});
$(function () {
$('#conteudo').load(link + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link
].join('\n'));
});
});
}(jQuery));
</script>
</body>
</html>
o/
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 21:58
Troquei, mas a página apenas fica em branco e não aparece nenhum alerta...
http://somosmugiwara.forumeiros.com/h87-
http://somosmugiwara.forumeiros.com/h87-
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 22:02
Erro meu, perdão.
Troque por:
o/
Troque por:
- Código:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título da Página</title>
</head>
<body>
<div id="conteudo">
</div>
<!-- Script's. Colocar todo o HTML acima deste comentário. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
var getLink = function (config) {
var link = prompt(config.question);
return link || config.error;
};
var link = getLink({
question: 'Qual o link?',
error: 'Não foi especificado nenhum link.'
});
$(function () {
$('#conteudo').load(link + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link
].join('\n'));
});
});
}(jQuery));
</script>
</body>
</html>
o/
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 22:12
Ficou muito bom, apenas quero acrescentar que seja possível colocar dois Links, um carregando dentro da div conteudo e o outro carregando dentro da div conteudo2. Tentei entender o código para alterar e acrescentar, mas não consegui. Poderia me explicar o funcionamento?
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 22:20
Aqui observe a página abaixo.
http://somosmugiwara.forumeiros.com/h88-teste-uno
Ele puxa informações de dois links.
O primeiro link é carregado na div conteudo e o segundo link é carregado na div conteudo2.
O código que você fez funcionou perfeitamente, mas gostaria de ter dois links carregados. Sendo assim, poderia colocar no alerta para adicionar dois links, ficando assim:
No fim é apenas uma duplicação do código que o senhor já fez
http://somosmugiwara.forumeiros.com/h88-teste-uno
Ele puxa informações de dois links.
- Código:
<title>Formulário de Ficha Aceita</title> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function() {
$('#conteudo').load('http://somosmugiwara.forumeiros.com/t2492-ficha-aceita-de-ren-shimizu #atrificha',aviso());
$('#conteudo2').load('http://somosmugiwara.forumeiros.com/t2483-ficha-aceita-de-franken-stein #atrificha',aviso());
});
function aviso(){
alert('O conteúdo será carregado agora!');
}
</script> <style>.conteudo, .conteudo2 {
width: 45%;
font-size: 13px;
float: left;
}</style>
<div id="conteudo" class="conteudo">
</div>
<div id="conteudo2" class="conteudo2">
</div>
O primeiro link é carregado na div conteudo e o segundo link é carregado na div conteudo2.
O código que você fez funcionou perfeitamente, mas gostaria de ter dois links carregados. Sendo assim, poderia colocar no alerta para adicionar dois links, ficando assim:
$('#conteudo').load('link1 #atrificha',aviso());
$('#conteudo2').load('link2 #atrificha',aviso());
No fim é apenas uma duplicação do código que o senhor já fez
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 22:28
Troque por este:
o/
- Código:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título da Página</title>
</head>
<body>
<div id="conteudo" class="conteudo"></div>
<div id="conteudo2" class="conteudo2"></div>
<!-- Script's. Colocar todo o HTML acima deste comentário. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
var getLink = function (config) {
var link = prompt(config.question);
return link || config.error;
};
var link = getLink({
question: 'Qual o link?',
error: 'Não foi especificado nenhum link.'
});
var link2 = getLink({
question: 'Qual o link?',
error: 'Não foi especificado nenhum link.'
});
$(function () {
$('#conteudo').load(link + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link
].join('\n'));
});
$('#conteudo2').load(link2 + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link2
].join('\n'));
});
});
}(jQuery));
</script>
</body>
</html>
o/
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 22:44
Funcionou muito bem, mas como é para adicionar dois links, geralmente deixamos a página ao lado aberta e copiamos para colar no alerta.
Mas quando alteramos a página, o alerta segue para o próximo. Ficando impossível colocar os dois links sem alterar a página.....
Pode ser meio besta, mas complica muito. Pois é quase impossível decorar todo o link kkk.
A página é esta: http://somosmugiwara.forumeiros.com/h87-
Tente colocar os links abaixo e verá o que quero dizer
http://somosmugiwara.forumeiros.com/t2483-ficha-aceita-de-franken-stein
http://somosmugiwara.forumeiros.com/t2492-ficha-aceita-de-ren-shimizu
Mas quando alteramos a página, o alerta segue para o próximo. Ficando impossível colocar os dois links sem alterar a página.....
Pode ser meio besta, mas complica muito. Pois é quase impossível decorar todo o link kkk.
A página é esta: http://somosmugiwara.forumeiros.com/h87-
Tente colocar os links abaixo e verá o que quero dizer
http://somosmugiwara.forumeiros.com/t2483-ficha-aceita-de-franken-stein
http://somosmugiwara.forumeiros.com/t2492-ficha-aceita-de-ren-shimizu
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 22:47
Nesse caso terei que criar uma página um pouco mais funcional.
Para deixar mais fancy, posso usar uma framework de estilos chamada bootstrap? o7
Para deixar mais fancy, posso usar uma framework de estilos chamada bootstrap? o7
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 22:57
Tente trocar por este:
- Código:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título da Página</title>
<!-- Bootstrap's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form class="links-form pre-ajax-content">
<fieldset>
<legend class="mb-4">Por favor, coloque os <em>links</em> abaixo:</legend>
<div class="form-group">
<label for="link-1">Link 1:</label>
<input type="url" id="link-1" class="form-control" required />
</div>
<div class="form-group">
<label for="link-2">Link 2:</label>
<input type="url" id="link-2" class="form-control" required />
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary">Próximo</button>
</div>
</fieldset>
</form>
<div class="ajax-content" style="display: none;">
<div class="row">
<div id="conteudo" class="col conteudo"></div>
<div id="conteudo2" class="col conteudo2"></div>
</div>
</div>
</div>
<!-- Script's. Colocar todo o HTML acima deste comentário. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(function () {
$('.links-form').on('submit', function (event) {
event.preventDefault();
$('.pre-ajax-content').hide();
$('.ajax-content').show();
var link1 = $('#link-1').val();
var link2 = $('#link-2').val();
$('#conteudo').load(link + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link
].join('\n'));
});
$('#conteudo2').load(link2 + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link2
].join('\n'));
});
});
});
}(jQuery));
</script>
</body>
</html>
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 23:02
Ficou muito bonito, dahora.
Coloco os links, mas quando clico em próximo não acontece nada...
Coloco os links, mas quando clico em próximo não acontece nada...
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 23:06
A versão do jQuery era muito antiga.
Troque por este:
o/
Troque por este:
- Código:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título da Página</title>
<!-- Bootstrap's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form class="links-form pre-ajax-content">
<fieldset>
<legend class="mb-4">Por favor, coloque os <em>links</em> abaixo:</legend>
<div class="form-group">
<label for="link-1">Link 1:</label>
<input type="url" id="link-1" class="form-control" required />
</div>
<div class="form-group">
<label for="link-2">Link 2:</label>
<input type="url" id="link-2" class="form-control" required />
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary">Próximo</button>
</div>
</fieldset>
</form>
<div class="ajax-content" style="display: none;">
<div class="row">
<div id="conteudo" class="col conteudo"></div>
<div id="conteudo2" class="col conteudo2"></div>
</div>
</div>
</div>
<!-- Script's. Colocar todo o HTML acima deste comentário. -->
<script src="code.jquery.com/jquery-latest.min.js"></script>
<script>
(function ($) {
'use strict';
$(function () {
$('.links-form').on('submit', function (event) {
event.preventDefault();
$('.pre-ajax-content').hide();
$('.ajax-content').show();
var link1 = $('#link-1').val();
var link2 = $('#link-2').val();
$('#conteudo').load(link + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link
].join('\n'));
});
$('#conteudo2').load(link2 + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link2
].join('\n'));
});
});
});
}(jQuery));
</script>
</body>
</html>
o/
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 23:08
Ainda continua igual...
Aqui estão os links para teste.
http://somosmugiwara.forumeiros.com/t2483-ficha-aceita-de-franken-stein
http://somosmugiwara.forumeiros.com/t2492-ficha-aceita-de-ren-shimizu
Ps: Estou testando aqui: http://somosmugiwara.forumeiros.com/h87-
Aqui estão os links para teste.
http://somosmugiwara.forumeiros.com/t2483-ficha-aceita-de-franken-stein
http://somosmugiwara.forumeiros.com/t2492-ficha-aceita-de-ren-shimizu
Ps: Estou testando aqui: http://somosmugiwara.forumeiros.com/h87-
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 23:11
O erro não é com o script. Eu que esqueci do "https" antes do jQuery. :v
Enfim, troque por:
Enfim, troque por:
- Código:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título da Página</title>
<!-- Bootstrap's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form class="links-form pre-ajax-content">
<fieldset>
<legend class="mb-4">Por favor, coloque os <em>links</em> abaixo:</legend>
<div class="form-group">
<label for="link-1">Link 1:</label>
<input type="url" id="link-1" class="form-control" required />
</div>
<div class="form-group">
<label for="link-2">Link 2:</label>
<input type="url" id="link-2" class="form-control" required />
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary">Próximo</button>
</div>
</fieldset>
</form>
<div class="ajax-content" style="display: none;">
<div class="row">
<div id="conteudo" class="col conteudo"></div>
<div id="conteudo2" class="col conteudo2"></div>
</div>
</div>
</div>
<!-- Script's. Colocar todo o HTML acima deste comentário. -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function ($) {
'use strict';
$(function () {
$('.links-form').on('submit', function (event) {
event.preventDefault();
$('.pre-ajax-content').hide();
$('.ajax-content').show();
var link1 = $('#link-1').val();
var link2 = $('#link-2').val();
$('#conteudo').load(link + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link
].join('\n'));
});
$('#conteudo2').load(link2 + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link2
].join('\n'));
});
});
});
}(jQuery));
</script>
</body>
</html>
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 23:12
Agora quando clico em próximo, fica apenas uma tela branca...
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 23:13
Méh, mais um errinho. Agora foi meu. :v
O outro também foi, mas enfim... 
- Código:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título da Página</title>
<!-- Bootstrap's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form class="links-form pre-ajax-content">
<fieldset>
<legend class="mb-4">Por favor, coloque os <em>links</em> abaixo:</legend>
<div class="form-group">
<label for="link-1">Link 1:</label>
<input type="url" id="link-1" class="form-control" required />
</div>
<div class="form-group">
<label for="link-2">Link 2:</label>
<input type="url" id="link-2" class="form-control" required />
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary">Próximo</button>
</div>
</fieldset>
</form>
<div class="ajax-content" style="display: none;">
<div class="row">
<div id="conteudo" class="col conteudo"></div>
<div id="conteudo2" class="col conteudo2"></div>
</div>
</div>
</div>
<!-- Script's. Colocar todo o HTML acima deste comentário. -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function ($) {
'use strict';
$(function () {
$('.links-form').on('submit', function (event) {
event.preventDefault();
$('.pre-ajax-content').hide();
$('.ajax-content').show();
var link1 = $('#link-1').val();
var link2 = $('#link-2').val();
$('#conteudo').load(link1 + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link1
].join('\n'));
});
$('#conteudo2').load(link2 + ' #atrificha', function () {
alert([
'O conteúdo será carregado agora!', link2
].join('\n'));
});
});
});
}(jQuery));
</script>
</body>
</html>
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Link dentro de input
por Don Corleone 02.11.17 23:17
Haha ficou perfeito mano...
Thanks, agora vamos para o outro.
Thanks, agora vamos para o outro.
Don Corleone- Super Membro
- Membro desde : 06/08/2012
Mensagens : 1257
Pontos : 2026 -
Re: Link dentro de input
por Luiz 02.11.17 23:20
| Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Tópicos semelhantes» Frases de acordo com o input
» Personalizar as input text
» Frases de acordo com o número do input
» Adicionar atributo a uma input via jQuery
» Mudar fundo dos input no perfil
» Personalizar as input text
» Frases de acordo com o número do input
» Adicionar atributo a uma input via jQuery
» Mudar fundo dos input no perfil
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos