ShiftActif fórum

[TUTORIAL] Criar seu formulário de postagens Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Criar seu formulário de postagens 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Criar seu formulário de postagens 1660898911

[TUTORIAL] Criar seu formulário de postagens

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Criar seu formulário de postagens Empty [TUTORIAL] Criar seu formulário de postagens

Mensagem por Shek em Qua 12 Dez - 12:06


[TUTORIAL] Criar seu formulário de postagens 34-unk10

JavaScript


Neste tutorial em tópico, você poderá obter o código completo e final do vídeo tutorial postado no canal TV Actif. No vídeo, temos o complemento do tutorial do fórum de suporte criado por Byte: http://ajuda.forumeiros.com/t35148-


--> Tutoriais <--
Criar o seu formulário de postagens




- HTML dos fóruns:
No HTML podemos realizar efeito que não seriam possíveis em widgets, mensagem da home page ou qualquer outro meio no fórum. Vejamos abaixo dicas sobre as páginas HTML.

Painel de Con... > Módulos > HTML e Javascript > Gestão das páginas HTML > Criar uma página HTML >

(carregue na imagem para aumentar)
[TUTORIAL] Criar seu formulário de postagens 210
[TUTORIAL] Criar seu formulário de postagens 110111 [TUTORIAL] Criar seu formulário de postagens 398853 Título - Neste campo terá de adicionar um título para a sua página HTML, servirá para identificar a sua página na lista de páginas HTMl, do Painel de Cntrole, e fará também parte do endereço da página. Por exemplo:Título: ForumeirosEndereço da página: .../forumeiros-h1.html
[TUTORIAL] Criar seu formulário de postagens Warning ATENÇÃO:
A designação que aparece à frete do nome da página, no endereço,
modifica consoante a número da página criada. Se for a primeira página a
ser criada, então será -h1, se for a quarta página a ser criada será
-h4, etc.
[TUTORIAL] Criar seu formulário de postagens 110210 [TUTORIAL] Criar seu formulário de postagens 398853 Você deseja utilizar o início e o final da página do seu fórum? - Se optar pelo "Sim",
a sua página apresentará o cabeçalho (Logo e menu do Fórum) e o rodapé (barra de links úteis). Uma das vantagens desta escolha, é que terá de personalizar menos o seu texto, por exemplo, pois, poderá utilizar as
classes CSS, do seu próprio Fórum, e também não necessita de criar uma estrutura HTML, apenastem de adicionar o código de conteúdo. Se optar pelo "Não" a página torna-se independente da estrutura do Fórum, mas neste caso terá de adicionar a própria estrutura, com as balizas html, head, body, etc.
[TUTORIAL] Criar seu formulário de postagens 110310 [TUTORIAL] Criar seu formulário de postagens 398853 Usar esta página como página inicial? - Se pretende que a página seja utiliza como a página inicial do Fórum, deverá colocar "Sim", mas se optar por esta opção, terá de adicionar o endereço do site Forumeiros.com. (ver FAQ)
[TUTORIAL] Criar seu formulário de postagens 110410 [TUTORIAL] Criar seu formulário de postagens 398853 Código HTML - Neste campo, terá de adicionar o conteúdo da sua página HTML, se colocou não na opção 2, então terá de criar uma estrutura de uma página HTML.
[TUTORIAL] Criar seu formulário de postagens 110510 [TUTORIAL] Criar seu formulário de postagens 398853 Confirmar / Previsualizar - Nestes dois botões poderá confirmara criação da sua página HTML, carregando em "Confirmar". Ou poderá visualizar o resultado que a página terá quando ele for visualizada por todos os usuários, carregando em "Previsualizar".


Vamos criar apenas um campo de texto neste tutoria, outras atribuições de campos são ensinadas no vídeo tutorial postado pelo ex-moderador BYTE: http://vimeo.com/17817199

Em sua página HTML, adicione então o seguinte código:
Código:
<input type="text" name="nome1" value="valor padrão" />
Vamos deletar o "valor padrão" de dentro do código fazendo com que ele fique assim:
Código:
<input type="text" name="nome1"/>
Na mesma página HTML vamos colocar outro campo de texto que será a da mensagem. Como todos sabem, no vídeo tutorial do canal Actif, Robson Barros explicou somente o campo acima (título do tópico) e o campo da mensagem (message). Então, vamos adicionar o campo da mensagem e remover o valor padrão de dentro.
Código:
<textarea name="nome2" rows="7" cols="7"></textarea>


1.1º - Valor ID:
Como Robson Barros explicou no tutorial [FAQ] Folha de estilo CSS, um ID é o mesmo que um atributo CLASS, pois ele atribui um nome ao código (objeto) e ao mesmo trabalha como o CLASS que captura o CSS que há no HEAD, como é explicado no tutorial postado neste fórum que se chama de Estrutura de uma página HTML.

No código HTML, vamos adicionar o ID com o nome do campo. Como assim? Como estamos criando um campo que vai dar um título ao tópico, precisamos então marcar o nosso ID igual (=) à titulo.

Campo do título:
<input type="text" id="NOME" name="nome1"/>
No lugar do nome coloque o nome da caixa, que será o título só que sem o acento, e o mesmo se repete com a caixa de texto.
<textarea id="NOME" name="nome2" rows="7" cols="7"></textarea>
Depois que você finalizar o seu código HTML, vamos para o próximo passo. Não confirme sua página HTML ainda.



- Formulário final (Tutorial do Byte):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>function radio(nameObtido,valObtido){jQuery('[name="' nameObtido '"]').val( valObtido );}
function gerarf() {

/* Script do Formulário */
/* */


}</script>
<form action="/posting.forum" method="post" enctype="multipart/form-data">

<!-- HTML do Formulário -->
<!-- -->


<!-- Ocultos -->
<input type="hidden" name="f" value="1" />
<input type="hidden" name="subject" value="O script não enviou o título" />
<input type="hidden" name="description" value="O script não enviou a descrição" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />




<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />

<!-- Pré Visualizar -->
<input type="submit" name="preview" class="button2" value="Pré-visualizar" onClick="gerarf();" />


<!-- Enviar -->
<input type="submit" name="post" class="button2" value="Enviar" onClick="gerarf();" /></form>

Selecione e cole na sua página HTML o código acima, e vamos substituir os dados. No lugar do <!-- 2º --> você vai colocar o código HTML do seu formulário. Ou seja, os campos de texto, o título, multipla-escola (campos rádios) e outros mais que você supostamente adicionou.
Feito isso, no lugar do valor <!-- 4º --> adicione o script abaixo:
Código:
/*VALOR TITULO*/
jQuery('[name="subject"]').val( 'VALOR DO TITULO' );

/*VALOR DESCRIÇAO*/
jQuery('[name="description"]').val( 'VALOR DA DESCRIÇAO' );

/*VALOR MENSAGEM*/
jQuery('[name="message"]').val( 'VALOR DA MENSAGEM' );
O resultado do código deve ser parecido com esse:
Código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>function gerarf() {

/* Script do Formulário */
/*VALOR TITULO*/
jQuery('[name="subject"]').val( 'VALOR DO TITULO' );

/*VALOR DESCRIÇAO*/
jQuery('[name="description"]').val( 'VALOR DA DESCRIÇAO' );

/*VALOR MENSAGEM*/
jQuery('[name="message"]').val( 'VALOR DA MENSAGEM' );

}</script>
<form action="/posting.forum" method="post" enctype="multipart/form-data">

<!-- HTML do Formulário -->
<strong>Título do tópico</strong><br>
<input type="text" id="titulo" name="nome1" /></br>
<strong>Título do tópico</strong><br>
<textarea id="mensagem" name="nome2" rows="7" cols="7"></textarea>

<!-- Ocultos -->
<input type="hidden" name="f" value="1" />
<input type="hidden" name="subject" value="O script não enviou o título" />
<input type="hidden" name="description" value="O script não enviou a descrição" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />



<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />

<!-- Pré Visualizar -->
<input type="submit" name="preview" class="button2" value="Pré-visualizar" onClick="gerarf();" />

<!-- Enviar -->
<input type="submit" name="post" class="button2" value="Enviar" onClick="gerarf();" /></form>
Como o formulário exemplar do vídeo tutorial do canal Actif tem apenas dois campos que é o do título e o do texto, será necessário excluir do Javascript o trecho "function radio(nameObtido,valObtido){jQuery('[name="'+nameObtido+'"]').val( valObtido );}". Delete do seu código os campos invisíveis abaixo:
Código:
<input type="hidden" name="subject" value="O script não enviou o título" />
<input type="hidden" name="description" value="O script não enviou a descrição" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />


- Corrigindo o código Javascript:
Para que o formulário funcione nós temos que modificar o script. Por isso, você deve substituir os valores que estão padrão no seu script e adicionar um outro valor. Esse valor é o que vai dar nome e informar ao script qual informação que ele deve capturar e mandar para o campo de formulário padrão dos fóruns.

Vale lembrar, que ocorre um erro #230 caso um módulo de segurança esteja ativado no seu fórum. Para mais informações, aconselhamos que consulte a FAQ exclusiva no fórum de suporte oficial:
>> [FAQ] Vínculos externos, anti-spam

No seu script:
Código:
/*VALOR TITULO*/
jQuery('[name="subject"]').val( 'VALOR DO TITULO' );
Substitua o valor .val( 'VALOR DO TITULO' ) por:
Código:
val.($('').val());
Feito isso, volte no seu HTML e modifique o nome que está entre os parentes dos campos. Ou seja, no campo NAME da caixa de texto e coloque subject. Na caixa de texto, adicione "message".


- Código final:
Dentro das as pas do script vamos adicionar o nome dos ID's. Ou seja, dentro do HTML que criamos com o ID="nome", vamos colocar dentro das aspas do Javascript que acabamos de criar acima. Ficando assim:
Código:
val.($('#titulo').val());
Atenção neste ponto, porque você não pode errar! Caso ocorra erros, o formulário não vai funcionar. Um ponto, virgula, acento ou qualquer item não indicado no vídeo tutorial de ShiftActif ou do Byte pode impedir o funcionamento do código.
Não esqueça, adicione o jogo da velha (#) antes do nome do campo do id.

Basta copiar o código do VAL que digitamos e substitua o valor da mensagem pelo nome do campo, que é a da mensagem. Ou seja:
Código:
val.($('#mensagem').val());
Repita os mesmos procedimentos nos outros campos desejados e confirme sua página HTML.


Resultado do nosso formulário completo só com o campo do título e mensagem:
Código:
[code]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>function gerarf() {

/* Script do Formulário */
/*VALOR TITULO*/
jQuery('[name="subject"]')val.($('#titulo').val());

/*VALOR MENSAGEM*/
jQuery('[name="message"]')val.($('#mensagem').val());

}</script>
<form action="/posting.forum" method="post" enctype="multipart/form-data">

<!-- HTML do Formulário -->
<strong>Título do tópico</strong><br>
<input type="text" id="titulo" name="nome1" /></br>
<strong>Título do tópico</strong><br>
<textarea id="mensagem" name="nome2" rows="7" cols="7"></textarea>

<!-- Ocultos -->
<input type="hidden" name="f" value="1" />

<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="lt" value="0" />

<!-- Pré Visualizar -->
<input type="submit" name="preview" class="button2" value="Pré-visualizar" onClick="gerarf();" />

<!-- Enviar -->
<input type="submit" name="post" class="button2" value="Enviar" onClick="gerarf();" /></form>[/code]Como o formulário exemplar do vídeo tutorial do canal Actif tem apenas dois campos que é o do título e o do texto, será necessário excluir do Javascript o trecho "[i]function radio(nameObtido,valObtido){jQuery('[name="'+nameObtido+'"]').val( valObtido );}[/i]". Delete do seu código os campos invisíveis abaixo:[code]<input type="hidden" name="subject" value="O script não enviou o título" />
<input type="hidden" name="description" value="O script não enviou a descrição" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />[/code]








© ShiftActif
Shek

Shek
Administrador

Masculino
Idade : 25
PointActif's : 5670
ReputActifs : 97
Mensagens : 2715
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

http://www.shiftactif.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum