高级表单提交 - 放弃,复选框和重定向

时间:2013-12-17 17:14:22

标签: javascript php html forms

我有一个高级表单,可根据用户选择的无线电和复选框切换div。我需要捕获这些数据并在表单提交时通过电子邮件提交。下面是我到目前为止的HTML和PHP。基于测试我已经完成它不发送电子邮件,它不重定向,所以我甚至不确定它是否捕获到目前为止我记录的数据。

<form accept-charset="UTF-8" action="survey.php" class="" id="new_signup_context" method="post" data-abide>

            <div class='choose_level tile'> 

                <div class='row'>

                    <div class='large-12 columns'>

                        <h2>What are you looking for?</h2>

                    </div>

                </div>

                <div class='row'>

                    <div class='large-6 columns opt1a'>

                        <label class='select' data-level='custom' for='level_custom'>

                        <img data-level='custom' src='img/51.png'>

                        </label>

                        <h3>Custom</h3>

                        <input id='level_custom' name='level1' type='radio' value='custom'>

                        <label class='button blue_button select' data-level='custom' for='level_custom'></label>

                    </div>

                    <div class='large-6 columns opt1b'>

                        <label class='select' data-level='townhome' for='level_townhome'>

                        <img data-level='townhome' src='img/aspen.png'>

                        </label>

                        <h3>Townhome</h3>

                        <input id='level_townhome' name='level1' type='radio' value='townhome'>

                        <label class='button blue_button select' data-level='townhome' for='level_townhome'></label>

                    </div>

                </div>

            </div>

        <!-- Custom Tier 1 -->

        <div class='choose_style tile centered hidden' data-behavior='SignUpDesigns'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>Pick the style(s) of home you like.</h2>

                    <div class='store_errors errors'></div>

                </div>

            </div>

            <div class='row homes'>

                <div class='hometype large-3 columns'>

                    <div class='checked'></div>

                    <label for='prairie'>

                        <img src='img/prairie.png'>

                    </label>

                    <input id='prairie' name='hometypes' type='checkbox' value='Prairie'>                   

                </div>

                <div class='hometype large-3 columns'>

                    <div class='checked'></div>

                    <label for='traditional'>

                        <img src='img/traditional.png'>

                    </label>

                    <input id='traditional' name='hometypes' type='checkbox' value='Traditional'>

                </div>

                <div class='hometype large-3 columns'>

                    <div class='checked'></div>

                    <label for='transitional'>

                    <img src='img/transitional.png'>

                    </label>

                    <input id='transitional' name='hometypes' type='checkbox' value='Transitional'>

                </div>

                <div class='hometype large-3 columns'>

                    <div class='checked'></div>

                    <label for='bungalow'>

                        <img src='img/bungalow.png'>

                    </label>

                    <input id='bungalow' name='hometypes' type='checkbox' value="Bungalow">

                </div>

            </div>

            <div class='fixed_button homes hidden centered'>

                <button type="button" class="btn btn-inverse homes">Continue &rarr;</button>

            </div>

        </div>

        <!-- Endof Custom Tier 1 -->

        <!-- Townhome Tier 1 -->

        <div class='choose_layout tile centered hidden' data-behavior='LayoutStyle'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>Pick the layout you like best.</h2>

                </div>

            </div>

            <div class='row'>

                <div class='large-6 columns'>

                    <label class='select' data-level='levelb' for='level_b'>

                        <img data-level='levelb' src='img/floorB.jpg'>

                    </label>

                    <h3>Level B</h3>

                    <input id='level_b' name='signup_context[layout_level]' type='radio' value='Level B'>

                    <label class='button blue_button select' data-level='levelb' for='level_b'></label>

                </div>

                <div class='large-6 columns'>

                    <label class='select' data-level='levelc' for='level_c'>

                        <img data-level='levelc' src='img/floorC.jpg'>

                    </label>

                    <h3>Level C</h3>

                    <input id='level_c' name='signup_context[layout_level]' type='radio' value='Level C'>

                    <label class='button blue_button select' data-level='levelc' for='level_c'></label>

                </div>

            </div>

        </div>

        <!-- Endof Townhome Tier 1 -->

        <!-- Custom Tier 2 -->

        <div class='choose_town tile centered hidden' data-behavior='SignUpTowns'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>Pick the town(s) you are interested in.</h2>

                    <div class='store_errors errors'></div>

                </div>

            </div>

            <div class='row towns'>

                <div class='preftown large-2 columns'>

                    <div class='checked'></div>

                    <label for='deerfield'>

                        <img src='img/deerield.png' >

                    </label>

                    <input id='deerfield' name='town' type='checkbox' value='Deerfield'>

                </div>

                <div class='preftown large-2 columns'>

                    <div class='checked'></div>

                    <label for='highland_park'>

                        <img src='img/highlandpark.png'>

                    </label>

                    <input id='highland_park' name='town' type='checkbox' value='Highland Park'>

                </div>


                <div class='preftown large-2 columns'>

                    <div class='checked'></div>

                    <label for='northbrook'>

                        <img src='img/northbrook.png'>

                    </label>

                    <input id='northbrook' name='town' type='checkbox' value='Northbrook'>

                </div>

                <div class='preftown large-2 columns'>

                    <div class='checked'></div>

                    <label for='glenview'>

                        <img src='img/glenview.png'>

                    </label>

                    <input id='glenview' name='town' type='checkbox' value="Glenview">

                </div>

                <div class='preftown large-2 columns'>

                    <div class='checked'></div>

                    <label for='wilmette'>

                        <img src='img/wilmette.png'>

                    </label>

                    <input id='wilmette' name='town' type='checkbox' value='Wilmette'>

                </div>

                <div class='preftown large-2 columns'>

                    <div class='checked'></div>

                    <label for='other'>

                        <img src='img/other.png'>

                    </label>

                    <input id='other' name='town' type='checkbox' value='Other'>

                </div>

            </div>

            <div class='fixed_button tbutton hidden'>

                <button type="button" class="btn btn-inverse continue_towns">Continue &rarr;</button>

            </div>

        </div>

        <!-- Endof Custom Tier 2 -->

        <!-- Custom Tier 3 -->

        <div class='choose_land tile centered hidden' data-behavior='Land'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>Do you Own or Need land?</h2>

                </div>

            </div>

            <div class='row'>

                <div class='large-6 columns'>

                    <label class='select' data-level='own' for='level_own'>

                        <img data-level='own' src='img/own.png'>

                    </label>

                    <input id='level_own' name='signup_context[layout_level]' type='radio' value='own'>

                    <label class='button blue_button select' data-level='own' for='level_own'></label>

                </div>

                <div class='large-6 columns'>

                    <label class='select' data-level='need' for='level_need'>

                        <img data-level='need' src='img/need.png'>

                    </label>

                    <input id='level_need' name='signup_context[layout_level]' type='radio' value='need'>

                    <label class='button blue_button select' data-level='need' for='level_need'></label>

                </div>

            </div>

        </div>

        <!-- Endof Custom Tier 3 -->

        <!-- Custom Tier 4 -->

        <div class='timeframe tile centered hidden' data-behavior='SignUpYourTimeframe'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>What is your timeframe?</h2>

                </div>

            </div>

            <div class='row sizes'>

                <div class='timeframes'>

                    <div class="input select required"><label class="select required" for="signup_context_height"><abbr title="required">*</abbr> Timeframe</label>

                        <select class="select required timeframe_dropdown" id="signup_timeframe" name="timeframe">

                            <option value="now">0-3 months</option>
                            <option value="soon">3-6 months</option>
                            <option value="later">6-9 months</option>
                            <option value="someday">9-12 months</option>
                            <option value="Other">Other</option>

                        </select>

                    </div>

                </div>

                <div class='large-2 columns last'></div>

            </div>

            <div class='fixed_button timeframeb'>

                <button type="button" class="btn btn-inverse continue_timeframe">Continue &rarr;</button>
            </div>

        </div>

        <!-- Endof Custom Tier 4 -->

        <!-- Townhome Tier 2 -->

        <div class='timeframeB tile centered hidden' data-behavior='SignUpYourTimeframeB'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>What is your timeframe?</h2>

                </div>

            </div>

            <div class='row sizes'>

                <div class='timeframes'>

                    <div class="input select required"><label class="select required" for="signup_context_height"><abbr title="required">*</abbr> Timeframe</label>

                        <select class="select required timeframeB_dropdown" id="signup_timeframe" name="timeframeB">

                            <option value="now">0-3 months</option>
                            <option value="soon">3-6 months</option>
                            <option value="later">6-9 months</option>
                            <option value="someday">9-12 months</option>
                            <option value="Other">Other</option>

                        </select>

                    </div>

                </div>

            </div>

            <div class='fixed_button timeframebB'>

                <button type="button" class="btn btn-inverse continue_timeframe">Continue &rarr;</button>
            </div>

        </div>

        <!-- Endof Townhome Tier 2 -->

        <!-- Custom Tier 5 -->

        <div class='homesize tile centered hidden' data-behavior='SignUpYourSize'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>What size home do you want?</h2>

                </div>

            </div>

            <div class='row sizes'>

                <div class='size'>

                    <div class="input select required"><label class="select required" for="signup_context_size"><abbr title="required">*</abbr> Size</label>

                        <select class="select required custom_dropdown" id="Select1" name="size">

                            <option value="2500">2500 sq.ft</option>
                            <option value="2800">2800 sq.ft</option>
                            <option value="3000">3000 sq.ft</option>
                            <option value="3200">3200 sq.ft</option>
                            <option value="3500">3500 sq.ft</option>
                            <option value="4000+">4000+ sq.ft</option>

                        </select>

                    </div>
                </div>

            </div>

            <div class='fixed_button sizeb'>

                <button type="button" class="btn btn-inverse continue_size">Continue &rarr;</button>

            </div>

        </div>

        <!-- Endof Custom Tier 5 -->

        <!-- Custom Tier 6 -->

        <div class='homeprice tile centered hidden' data-behavior='SignUpYourSize'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>What is your budget?</h2>

                </div>

            </div>

            <div class='row prices'>


                <div class='price'>

                    <div class="input select required"><label class="select required" for="signup_context_size"><abbr title="required">*</abbr> Price</label>

                        <select class="select required custom_dropdown" id="Select2" name="price">

                            <option value="850">$850,000</option>
                            <option value="900">$900,000</option>
                            <option value="950">$950,000</option>
                            <option value="1M">$1M</option>
                            <option value="1.1">$1.1M</option>
                            <option value="1.2+">$1.2M+</option>

                        </select>

                    </div>

                </div>

            </div>

            <div class='fixed_button pricesb centered'>

                <button type="button" class="btn btn-inverse continue_price">Continue &rarr;</button>

            </div>

        </div>

        <!-- Endof Custom Tier 6 -->

        <!-- Townhome Tier 3 -->

        <div class='priceB tile centered hidden' data-behavior='your_priceB'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>What is your budget?</h2>

                </div>

            </div>

            <div class='row prices'>

                <div class='priceB'>

                    <div class="input select required"><label class="select required" for="signup_context_size"><abbr title="required">*</abbr> Price</label>

                        <select class="select required custom_dropdown" id="Select2" name="priceB">

                            <option value="240">$240,000</option>
                            <option value="280">$280,000</option>
                            <option value="300">$300,000</option>
                            <option value="325">$325,000</option>
                            <option value="350">$350,000+</option>

                        </select>

                    </div>

                </div>

            </div>

            <div class='fixed_button pricesbB'>

                <button type="button" class="btn btn-inverse continue_price">Continue &rarr;</button>

            </div>

        </div>

        <!-- Endof Townhome Tier 3 -->

        <!-- Form -->

        <div class='contactForm centered hidden' data-behavior='SignUpYourInfo'>

            <div class='row'>

                <div class='large-12 columns'>

                    <h2>How can we get in touch with you?</h2>

                </div>

            </div>

            <div class='row'>

                <div class="large-12 columns">

                    <p class="contact-name">

                        <label>Your name <small>required</small></label>

                        <input type="text" required pattern="[a-zA-Z]+" name="surveyName">

                        <small class="error">Name is required and must be a string.</small>

                    </p>

                    <p class="contact-email">

                        <label>Email <small>required</small></label>

                        <input type="email" required name="surveyEmail">

                        <small class="error">An email address is required.</small>

                    </p>

                    <p class="contact-phone">

                        <input id="contact_phone" type="text" placeholder="Phone Number" value="" name="phone" />

                    </p>

                    <p class="contact-message">

                        <textarea id="contact_message" placeholder="Your Message" name="surveyMessage" rows="15" cols="40"></textarea>

                    </p>

                    <p class="contact-submit">

                        <button type="submit" class="btn btn-inverse" id="submit">Submit</button>

                    </p>

                </div>

            </div>

        </div>  

        <!-- Endof Form -->

        </form>

PHP

<?php 

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $name = trim($_POST["surveyName"]);
        $email = trim($_POST["surveyEmail"]);
        $message = trim($_POST["surveyMessage"]);

        $email_body = "";
        $email_body = $email_body . "Name: " . $name . "<br>";
        $email_body = $email_body . "Email: " . $email . "<br>";
        $email_body = $email_body . "Message: " . $message  . "<br>"; 
        $email_body = $email_body   if (isset($level1) && $level1=="custom") echo "checked" . "<br>";
        $email_body = $email_body   if (isset($level1) && $level1=="townhome") echo "checked" . "<br>";




        $mail->SetFrom($email, $name);
        $address = "cmell@thejacobscompanies.net";
        $mail->Subject    = "Contact Form Submission | " . $name;
        $mail->MsgHTML($email_body);

        header("Location: www.thejacobscompanies.net/#services");
        exit;
    }
?>

1 个答案:

答案 0 :(得分:0)

修改

根据elitechief21's评论,我找到了这段代码:

if(!$mail->Send()) {
  echo "Mailer Error: " . $mail->ErrorInfo;
} else {
  echo "Message sent!";
}

我认为可以放在$mail->MsgHTML($email_body);

之下

注意:但是,您需要将成功的echo替换为header...,但不能同时使用这两者。


仅用于测试目的。

根据elitechief21和我自己已经提供的评论,请尝试查看它是否有效。

<?php 

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = trim($_POST["surveyName"]);
    $email = trim($_POST["surveyEmail"]);
    $message = trim($_POST["surveyMessage"]);

    $email_body = "";
    $email_body = $email_body . "Name: " . $name . "<br>";
    $email_body = $email_body . "Email: " . $email . "<br>";
    $email_body = $email_body . "Message: " . $message  . "<br>"; 

if (isset($level1) && $level1=="custom"){$email_body .= "checked";}
if (isset($level1) && $level1=="townhome"){$email_body .= "checked";}

    $mail->SetFrom($email, $name);
    $address = "cmell@thejacobscompanies.net";

    $mail->Subject    = "Contact Form Submission | " . $name;
    $mail->MsgHTML($email_body);

    header("Location: http://www.thejacobscompanies.net/#services");

    exit;
}
?>

编辑POST变量

您可以使用以下任何一种方法:

foreach($var as $key=>$value) {
echo $value;
}

和/或:

foreach($_POST['var'] as $key=>$value) {
echo $value;

您也可以使用它,它将迭代所有POST值:

foreach($_POST as $key=>$value) {
echo "$key=$value";
} 

另外,假设$_POST['item_name_1']

foreach($_POST as $k => $v) {
    if(strpos($k, 'item_name_') === 0) {
        echo "$k = $v";
    }
}