1

Desenvolvi um formulário de contato em meu site porem nesse formulário possui um select unde a pessoa vai poder escolher um serviço porem não faço ideia de como inserir isso em meu código gostaria de saber se é possível.A principio meu código funciona eu só não consigo capturar a opção serviços. segue meus códigos e imagem do erro no console inserir a descrição da imagem aqui percebam que na imagem o único campo que não aparece nada e o do serviço

HTMl:

<form id="form-elements" onSubmit="return false">
                <div class="row">
                    <div class="col-md-12 center">
                        <div id="result"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <input type="text" class="form-control input-border" placeholder="Nome" name="name"
                                   id="name" required></div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <input type="email" class="form-control input-border" placeholder="E-mail" name="email"
                                   id="email" required></div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <input type="text" class="form-control input-border" placeholder="Telefone" name="phone"
                                   id="phone" required>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <select class="form-control input-border" name="service" id="service" required>
                                <option disabled selected>Escolha um serviço</option>
                                <option value="comediante">Comediante</option>
                                <option value="apresentador">Apresentador</option>
                                <option value="ator">Ator</option>
                                <option value="reporter">Repórter</option>
                                <option value="cerimonialista">Cerimonialista</option>
                                <option value="roteirista">Roteirista</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-12">
                            <textarea id="input" class="form-control message-input" rows="7" required="required"
                                      placeholder="Mensagem" name="message" id="message"></textarea>
                    </div>
                    <button type="submit" class="btn btn-default buttons button-send" id="submit_btn">Quero Contratar</button>
                </div>
            </form>

JS:

$("#submit_btn").click(function() {
    //get input field values
    var user_name       = $('input[name=name]').val();
    var user_email      = $('input[name=email]').val();
    var user_telephone      = $('input[name=phone]').val();
    var user_service      = $('input[name=service]').val();
    var user_message    = $('textarea[name=message]').val();

    //simple validation at client's end
    var post_data, output;
    var proceed = true;
    if(user_name==""){
        proceed = false;
    }
    if(user_email==""){
        proceed = false;
    }
    if(user_message=="") {
        proceed = false;
    }

    //everything looks good! proceed...
    if(proceed)
    {
        //data to be sent to server
        post_data = {'userName':user_name, 'userEmail':user_email, 'userTelephone':user_telephone, 'userService':user_service, 'userMessage':user_message};

        //Ajax post data to server
        $.post('contact.php', post_data, function(response){

            //load json data from server and output message
            if(response.type == 'error')
            {
                output = '<div class="alert-danger" style="padding:10px; margin-bottom:25px;">'+response.text+'</div>';
            }else{
                output = '<div class="alert-success" style="padding:10px; margin-bottom:25px;">'+response.text+'</div>';

                //reset values in all input fields
                $('#form-elements input').val('');
                $('#form-elements textarea').val('');
            }

            $("#result").hide().html(output).slideDown();
        }, 'json');

    }
});

//reset previously set border colors and hide all message on .keyup()
$("#form-elements input, #form-elements textarea").keyup(function() {
    $("#result").slideUp();
});

PHP:

<?php
if($_POST)
{
    $to_Email       = "[email protected]"; //Replace with recipient email address
    $subject        = 'Contato para contratação de serviços'; //Subject line for emails


    //check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

        //exit script outputting json data
        $output = json_encode(
        array(
            'type'=>'error',
            'text' => 'Request must come from Ajax'
        ));

        die($output);
    }

    //check $_POST vars are set, exit if any missing
    if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"]))
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Os campos de entrada estão vazios!  '));
        die($output);
    }

    //Sanitize input data using PHP filter_var().
    $user_Name        = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
    $user_Email       = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
    $user_Phone =                  $_POST["userTelephone"];
    $user_Service       = filter_var($_POST["userService"], FILTER_SANITIZE_EMAIL);
    $user_Message     = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);

    //additional php validation
    if(strlen($user_Name)<3) // If length is less than 3 it will throw an HTTP error.
    {
        $output = json_encode(array('type'=>'error', 'text' => 'O campo nome não pode ficar vazio'));
        die($output);
    }
    if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Por favor ultilize um e-mail válido'));
        die($output);
    }

    if(strlen($user_Message)<5) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Por favor insira uma mensagem'));
        die($output);
    }


    $message_Body = "<strong>Name: </strong>". $user_Name ."<br>";
    $message_Body .= "<strong>Email: </strong>". $user_Email ."<br>";
    $message_Body .= "<strong>Phone: </strong>". $user_Phone ."<br>";
    $message_Body .= "<strong>Serviço: </strong>". $user_Service ."<br>";
    $message_Body .= "<strong>Message: </strong>". $user_Message ."<br>";



    $headers = "From: " . strip_tags($user_Email) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($user_Email) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=UTF-8\r\n";



    //proceed with PHP email.
    $headers = 'From: '.$user_Email.'' . "\r\n" .
    'Reply-To: '.$user_Email.'' . "\r\n" .
    'X-Mailer: PHP/' . phpversion(). "\r\n" .
    'Content-type: text/html;charset=UTF-8';



    $sentMail = @mail($to_Email, $subject, $message_Body, $headers);

    if(!$sentMail)
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Ocorreu um erro tente novamente'));
        die($output);
    }else{
        $output = json_encode(array('type'=>'message', 'text' => 'Olá '. $user_Name .' Obrigado pelo seu contato retornaremos em breve.'));
        die($output);
    }
}
?>
8
  • 1
    Você não esta conseguindo pegar o valor do item selecionado no select? 19/04/2017 às 17:19
  • @LennonS.Bueno isso amigo na verdade o meu form não quer nem funcionar e não sei o porque adicionei o erro que está dando no console na pergunta. 19/04/2017 às 18:34
  • 1
    então pelo erro do console não esta achando esse caminho ai, em relação ao select coloca o HTML ai pra analisar o código 19/04/2017 às 18:43
  • agenciafront.com.br/fabiorabin/contact.php não encontrado. Acho que está bem claro qual é o problema. (Sorry, the page you are looking for could not be found.) 19/04/2017 às 20:49
  • 1
    @Kirito acho que entendi seu erro, respondi abaixo se for isso mesmo marque como resposta. 24/04/2017 às 14:48

1 Resposta 1

1

Observando seu código o que esta faltando é o atributo value nos option's da tag select.

Um exemplo básico de como pegar o valor selecionado com javascript é esse:

var el = document.getElementById("meses");

var valor = el.value;

console.log(valor);
<select id="meses">
    <option value="Janeiro">Janeiro</option>
    <option value="Fevereiro">Fevereiro</option>
    <option value="Março">Março</option>
    <option value="Abril">Abril</option>
    <option value="Maio">Maio</option>
    <option value="Junho">Junho</option>
    <option value="Julho">Julho</option>
    <option value="Agosto">Agosto</option>
    <option value="Setembro">Setembro</option>
    <option value="Outubro">Outubro</option>
    <option value="Novembro">Novembro</option>
    <option value="Dezembro">Dezembro</option>
</select>

Ou com JQuery:

$('#meses').val();

Reforçando o valor submetido do select sempre é o que esta no atributo value dos option's.

2
  • Olá amigo desculpa pela demora eu viajei e nem teve como verificar sua resposta eu analisei aqui e realmente estava faltando os values nos meus <select> só que assim sou muito leigo em jQuery para implementar isso no meu arquivo js lá ficaria como ? eu chamaria somente o id="service" no meu código? ou teria que colocar todos os values um a um vou atualizar meu código com oque já alterei para você dar uma olhada 2/05/2017 às 13:57
  • 1
    no js ficaria assim $('#service').val(); e não esqueça de colocar os value nos option's 2/05/2017 às 15:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .