[AJUDA] Formulario + Apresentação + seleção

Gostaria de um formulário de apresentação no fórum APRESENTAÇÔES

Com os seguintes opções - meio complexo, mas para os masters é fácil hehe.

Nome: [caixa de texto]

País: Caixa de Seleção ( Opções) *Brasil * Portugal * Outro (ao selecionar outro abre-se uma caixa de texto para o membro digitar qual outro País)
se possível, aparecesse a bandeira do país, se não não precisa.

Como Chegou ao fórum: Opções
(Indicação) ( Qual membro indicou)
(Site) ( Qual site )
(Buscadores) "Qual buscador - google?"

Conhecimento: Caixa de Multi Seleções com as opções
*Sedução
*Pnl
*Hipnose
*Linguagem Corporal
*Micro expressão
*Mágica
*Mentalismo

Interesse no fórum/ O que pretende ? Opção de Seleção -
*Publicidade/Anuncio
* Entender ( Seleção de opções de interesse - *Sedução
*Pnl
*Hipnose
*Linguagem Corporal
*Micro expressão
*Mágica
*Mentalismo

Uma frase/provérbio inspiradora - Caixa de texto


uma dúvida da mesma sessão - dá pra liberar o acesso dos outros fóruns só depois de criar o tópico de apresentação?

Obrigado à todos.

Wagner escreveu:Ta, pera ai que fiquei meio confuso kkk

Não entendi muito bem a parte dos interesses, pode tentar explicar melhor para mim?

Wagner escreveu:Olá,

Seria algo mais ou menos assim?
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Se sim, quais as opções de 1 select e quais as do outro?

Abraços..

Código:

<meta charset="utf-8">
<style type="text/css">
.introduction *,.introduction  *:before,.introduction  *:after {
    -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.introduction{
    font: 14px Lucida sans;
    margin: 3em;
    display: none;
}
.introduction input[type="text"],.introduction select,.introduction label{
    display: block;
}
.introduction select option{
    padding: .5em 1em;
}
option[value="Brasil"], option[value="Portugal"]{
    padding-left: 3.5em!important;
}
option[value="Brasil"]{
    background: url('https://cdn1.iconfinder.com/data/icons/famfamfam_flag_icons/br.png') no-repeat 15px center;
}
option[value="Portugal"]{
    background: url('https://cdn1.iconfinder.com/data/icons/famfamfam_flag_icons/pt.png') no-repeat 15px center;
}
.form-group{
    padding: 1em;
    border: #ddd 1px solid;
    margin: .1em;
}
.introduction label{
    font-weight: bold;
    margin-bottom: .5em;
}
.introduction textarea{
    padding: 1em;
    width: 100%;
    display: block;
    min-height: 10em;
}
input[type="button"]{
    background: #e74c3c;
    padding: .2em 5em .5em 5em;
    font: 13px Lucida sans;
    text-shadow: rgba(0,0,0,.5) 0 1px 1px;
    box-shadow: inset rgba(0,0,0,.5) 0 -3px 0;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
}
.other_input{
    padding: 1em;
    font-weight: bold;
}
.other_input input[type="text"]{
    padding: .5em 1em;
    display: block;
    margin: .2em;
}
</style>
<form class="introduction">

    <div class="form-group">
        <label for="pais">País</label>

        <select name="pais">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Brasil">Brasil</option>
            <option value="Portugal">Portugal</option>
            <option value="other">Outro</option>
        </select>
       
    </div>

    <div class="form-group">
        <label for="indicacao">Como chegou ao fórum?</label>
       
        <select name="indicacao">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Indicação">Indicação</option>
            <option value="Site">Site</option>
            <option value="Buscadores">Buscadores</option>
        </select>

    </div>

    <div class="form-group">
        <label for="conhecimentos">Conhecimentos:</label>
        <input type="checkbox" value="Sedução" /> Sedução<br>
        <input type="checkbox" value="Pnl" /> Pnl<br>
        <input type="checkbox" value="Hipnose" /> Hipnose<br>
        <input type="checkbox" value="Linguagem Corporal" /> Linguagem Corporal<br>
        <input type="checkbox" value="Micro expressão" /> Micro expressão<br>
        <input type="checkbox" value="Mágica" /> Mágica<br>
        <input type="checkbox" value="Mentalismo" /> Mentalismo
    </div>

    <div class="form-group">
        <label for="interesses">Interesses no fórum:</label>

        <select name="interesses1">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Publicidade/Anuncio">Publicidade/Anuncio</option>
            <option value="Parceria">Parceria</option>
        </select>

        <br>

        <select name="interesses2">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Sedução">Sedução</option>
            <option value="Pnl">Pnl</option>
            <option value="Hipnose">Hipnose</option>
            <option value="Linguagem Corporal">Linguagem Corporal</option>
            <option value="Micro expressão">Micro expressão</option>
            <option value="Mágica">Mágica</option>
            <option value="Mentalismo">Mentalismo</option>
            <option value="Outros">Outros</option>
        </select>

    </div>

    <div class="form-group">
        <label for="frase">Uma frase/provérbio inspiradora:</label>
        <textarea placeholder="Digite aqui" name="frase"></textarea>
    </div>

    <div class="form-group">
        <input type="button" value="Enviar" id="submit" />
    </div>
</form>
<script src="jquery.min.js"></script>
<script>
//<![CDATA[
$(window).load(function(){
    var name = _userdata["username"];
   
    $('.introduction').fadeIn( true );
   
    $('#submit').click(function(){
        submit();
    });
   
   

    function submit(){
        var mensagem = 'Olá, meu nome é ' + name + ' e esta é minha apresentação.' +
            '\n\n[b]País[/b]:\n' + $('[name="pais"]').val() +
            '\n\n[b]Como chegou ao fórum?[/b]\n' + $('[name="indicacao"]').val() +
            '\n\n[b]Conhecimentos[/b]:\n' + $('input[type="checkbox"]:checked').map(function(){return this.value;}).get().join(', ')+
            '\n\n[b]Interesses no fórum:[/b]\n'+ $('[name="interesses1"]').val() + '\n' + $('[name="interesses2"]').val() +
            '\n\n[b]Uma frase/provérbio inspiradora:[/b]\n' + $('[name="frase"]').val();
       
        $.post('/post?', {
            mode: 'newtopic',
            f: '1',
            lt: '0',
            subject: '[Apresentação] ' + name,
            message: mensagem,
            post: 'Enviar'
        }).done(function(){
            alert('Tópico postado com sucesso');
            window.location = "/f1-" ;
        }).fail(function(){
            alert('Houve um erro ao postar o tópico, tente novamente.');
            location.reload();
        });
    }
   
});
//]]>
</script>

Wagner escreveu:Olá,

Estou meio sem tempo aqui amigo.. Aqui esta o form funcionando mas não coloquei as validações nele ainda, ok?

Código:

<meta charset="utf-8">
<style type="text/css">
.introduction *,.introduction  *:before,.introduction  *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.introduction{
    font: 14px Lucida sans;
    margin: 3em;
    display: none;
}
.introduction input[type="text"],.introduction select,.introduction label{
    display: block;
}
.introduction select option{
    padding: .5em 1em;
}
option[value="Brasil"], option[value="Portugal"]{
    padding-left: 3.5em!important;
}
option[value="Brasil"]{
    background: url('https://cdn1.iconfinder.com/data/icons/famfamfam_flag_icons/br.png') no-repeat 15px center;
}
option[value="Portugal"]{
    background: url('https://cdn1.iconfinder.com/data/icons/famfamfam_flag_icons/pt.png') no-repeat 15px center;
}
.form-group{
    padding: 1em;
    border: #ddd 1px solid;
    margin: .1em;
}
.introduction label{
    font-weight: bold;
    margin-bottom: .5em;
}
.introduction textarea{
    padding: 1em;
    width: 100%;
    display: block;
    min-height: 10em;
}
input[type="button"]{
    background: #e74c3c;
    padding: .2em 5em .5em 5em;
    font: 13px Lucida sans;
    text-shadow: rgba(0,0,0,.5) 0 1px 1px;
    box-shadow: inset rgba(0,0,0,.5) 0 -3px 0;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
}
.other_input{
    padding: 1em;
    font-weight: bold;
}
.other_input input[type="text"]{
    padding: .5em 1em;
    display: block;
    margin: .2em;
}
</style>
<form class="introduction">

    <div class="form-group">
        <label for="pais">País</label>

        <select name="pais">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Brasil">Brasil</option>
            <option value="Portugal">Portugal</option>
            <option value="other">Outro</option>
        </select>
        
    </div>

    <div class="form-group">
        <label for="indicacao">Como chegou ao fórum?</label>
        
        <select name="indicacao">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Indicação">Indicação</option>
            <option value="Site">Site</option>
            <option value="Buscadores">Buscadores</option>
        </select>

    </div>

    <div class="form-group">
        <label for="conhecimentos">Conhecimentos:</label>
        <input type="checkbox" value="Sedução" /> Sedução<br>
        <input type="checkbox" value="Pnl" /> Pnl<br>
        <input type="checkbox" value="Hipnose" /> Hipnose<br>
        <input type="checkbox" value="Linguagem Corporal" /> Linguagem Corporal<br>
        <input type="checkbox" value="Micro expressão" /> Micro expressão<br>
        <input type="checkbox" value="Mágica" /> Mágica<br>
        <input type="checkbox" value="Mentalismo" /> Mentalismo
    </div>

    <div class="form-group">
        <label for="interesses">Interesses no fórum:</label>

        <select name="interesses1">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Publicidade/Anuncio">Publicidade/Anuncio</option>
            <option value="Parceria">Parceria</option>
        </select>

        <br>

        <select name="interesses2">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Sedução">Sedução</option>
            <option value="Pnl">Pnl</option>
            <option value="Hipnose">Hipnose</option>
            <option value="Linguagem Corporal">Linguagem Corporal</option>
            <option value="Micro expressão">Micro expressão</option>
            <option value="Mágica">Mágica</option>
            <option value="Mentalismo">Mentalismo</option>
            <option value="Outros">Outros</option>
        </select>

    </div>

    <div class="form-group">
        <label for="frase">Uma frase/provérbio inspiradora:</label>
        <textarea placeholder="Digite aqui" name="frase"></textarea>
    </div>

    <div class="form-group">
        <input type="button" value="Enviar" id="submit" />
    </div>
</form>
<script src="jquery.min.js"></script>
<script>
//<![CDATA[
$(window).load(function(){
    var name = _userdata["username"];
    
    $('.introduction').fadeIn( true );
    
    $('#submit').click(function(){
        submit();
    });
    
    

    function submit(){
        var mensagem = 'Olá, meu nome é ' + name + ' e esta é minha apresentação.' +
            '\n\n[b]País[/b]:\n' + $('[name="pais"]').val() +
            '\n\n[b]Como chegou ao fórum?[/b]\n' + $('[name="indicacao"]').val() +
            '\n\n[b]Conhecimentos[/b]:\n' + $('input[type="checkbox"]:checked').map(function(){return this.value;}).get().join(', ')+
            '\n\n[b]Interesses no fórum:[/b]\n'+ $('[name="interesses1"]').val() + '\n' + $('[name="interesses2"]').val() +
            '\n\n[b]Uma frase/provérbio inspiradora:[/b]\n' + $('[name="frase"]').val();
        
        $.post('/post?', {
            mode: 'newtopic',
            f: '1',
            lt: '0',
            subject: '[Apresentação] ' + name,
            message: mensagem,
            post: 'Enviar'
         }).done(function(){
            alert('Tópico postado com sucesso');
            window.location = "/f1-" ;
        }).fail(function(){
            alert('Houve um erro ao postar o tópico, tente novamente.');
            location.reload();
        });
    }
    
});
//]]>
</script>

Ta funcionando perfeito, mas falta o que disse acima que seria os efeitos ao selecionar outros e tal, to postando aqui já para o senhor não ficar de "mãos abanando" ai, quando sobrar um tempo eu termino o que falta, ok?

Procure por f: '1' e troque o 1 pelo número do fórum onde será postada a apresentação e faça o mesmo com isso window.location = "/f1-" ;


Ps: Caso não saiba, é só criar uma página HTML com o conteúdo que passei..

Abraços...