提交表格时出错

Question

我在此站点中使用php开发了一个表单，而javascript具有多重选择功能，用户可以在发送我的表单时选择多个值，它包含所有信息，但是在具有多重选择的情况下，它不会显示任何内容，并且它所在的行具有数组

<select id="select-picker" class="selectpicker config" multiple
         name="config[]" id="config[]" data-selected-text-format="count > 3" 
         title="Configurações do evento"> 



<select id="select-picker" class="selectpicker" multiple
         data-selected-text-format="count > 3" title="Selecione os equipamentos"
         name="equip[]" id="equip[]" required>

这里的问题是，我不知道如何调用那些标签，例如在我的php或javascript代码中，这些name = "config []"或name = "equip []" ，任何人都可以帮助我遵循项目代码：

HTML：

   <form class="form-budget" id="form-elements" onSubmit="return false">
                                <div class="row">
                                    <div class="col-md-12 center">
                                        <div id="result"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <input type="text" placeholder="Digite seu nome" name="name" id="name" required/>
                                    <input type="text" placeholder="Digite seu Email" name="email" id="email" required/>
                                    <input type="tel" placeholder="Digite seu Telefone" name="phone" id="phone" class="phone_with_ddd" required/>
                                    <input type="text" placeholder="Data do evento" name="date" id="date" class="date" required/>
                                </div>

                                <div class="col-md-6">
                                    <select id="select-picker" class="selectpicker config" multiple
                                            name="config[]" id="config[]"
                                            data-selected-text-format="count > 3" title="Configurações do evento">
                                        <option value="Mesas-Cadeiras" selected>Mesas e cadeiras</option>
                                        <option value="Auditório" selected>Auditório</option>
                                        <option value="Lounge">Lounge</option>
                                        <option value="Galeria">Galeria</option>
                                    </select>
                                    <input type="text" placeholder="Quantidade de pessoas" name="quant" id="quant" class="quant" required/>

                                    <select id="select-picker" class="selectpicker" multiple
                                            data-selected-text-format="count > 3" title="Selecione os equipamentos"
                                            name="equip[]" id="equip[]" required>
                                        <option value="Projetor">Projetor</option>
                                        <option value="Som">Caixa de som</option>
                                        <option value="Flip-Chart">Flip-Chart</option>
                                    </select>
                                    <button type="submit" class="btn btn-success" id="submit_btn">Enviar orçamento</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_phone      = $('input[name=phone]').val();
    var user_date       = $('input[name=date]').val();
    var user_config     = $('select[name=config] option:selected ').val(); 
    //console.log(user_config);
    var user_quant      = $('input[name=quant]').val();
    var user_equip      = $('select[name=equip] option:selected').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_phone=="") {
        proceed = false;
    }

    if(user_quant=="") {
        proceed = false;
    }
    if(user_date=="") {
        proceed = false;
    }

    //everything looks good! proceed...
    if(proceed)
    {
        //data to be sent to server
        post_data = {'userName':user_name, 'userEmail':user_email, 'userPhone':user_phone, 'userDate':user_date, 'userConfig':user_config, 'userQuant':user_quant, 'userEquip':user_equip};

        //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');

    }
});

PHP：

<?php
if($_POST)
{
    $to_Email       = "felipe@xxxxxxx.com.br"; //Replace with recipient email address
    $subject        = 'Orçamento do site'; //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["userPhone"]) || !isset($_POST["userDate"]) || !isset($_POST["userQuant"]))
    {
        $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["userPhone"];
    $user_Date =                  $_POST["userDate"]; 
    $user_Config       = filter_var($_POST["userConfig"], FILTER_SANITIZE_EMAIL);
    $user_Quant =                  $_POST["userQuant"];
    $user_Equip       = filter_var($_POST["userEquip"], 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_Phone)<5) //check emtpy phone
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Por favor insira um número de telefone'));
        die($output);
    }


    if(strlen($user_Date)<5) //check emtpy date
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Por favor insira uma data para o evento'));
        die($output);
    }

     if(strlen($user_Quant)<2) //check emtpy date
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Por favor insira a quantidade de pessoas para o evento'));
        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>Data do Evento: </strong>". $user_Date ."<br>";
    $message_Body .= "<strong>Quantidade de pessoas: </strong>". $user_Quant ."<br>";
    $message_Body .= "<strong>Configurações do evento: </strong>". $user_Config ."<br>";
    $message_Body .= "<strong>Equipamentos: </strong>". $user_Equip ."<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);
    }
}
?>

Answer 1

我认为问题是您在$_POST["userConfig"]和$_POST["userEquip"]上调用filter_var （期望字符串），由于多选，它们将成为数组。

也许您应该尝试使用filter_var_array 。

Answer 2

在HTML中 ，您选择的名称不应使用大括号[]：

<select id="select-picker" class="selectpicker config" multiple
        name="config" id="config" data-selected-text-format="count > 3" 
        title="Configurações do evento">

在您的javascript中，按以下方式获取所选数据：

var user_config     = $('select[name=config]').val();

这将仅返回选定的配置。

我希望有帮助:)