javascript - 联系表单中的显示-隐藏警告被延迟

Question

我正在设置的联系表单有一个用于时间范围的下拉菜单区域。选择是:1. 正常配速2. 快节奏3. 紧迫的步伐。

我将其设置为每当选择快速或紧急时都会出现警告，告诉用户价格将随着这些选择而上涨。但是，此警告会延迟，直到用户单击第二个下拉菜单(预算)。无论如何，我可以在他们选择这两个选项之一后立即弹出它吗？

完整代码:

HTML

     <div id="primary" class="col-md-6">    
     <div id="form-wrap">
         <form action="contact.php" method="post" id="contactForm">
            <input type="hidden" name="token" value="<?php echo $newToken; ?>" >

           <div class="rowElem">
            <ul><li><h5 class="formtitle">Your Name:</h5></li></ul>
            <input type="text" id="name" class="required" name="name" placeholder="Name" minlength="2" />
            </div><!-- End rowElem -->

          <div class="rowElem">
            <ul><li><h5 class="formtitle">Best Way to contact you:</h5></li></ul>

                <input type="radio" name="contact" id="contactemail" value="Email" />
                <label for="email">Email:</label><br /><br />
                        <div id="emailArea"> 
                        <input type="text" name="email" id="email" />
                        </div>  

                <input type="radio" name="contact" id="contactphone" value="Phone" />                   
                <label for="phone">Phone:</label><br /><br />

                        <div id="phoneArea">
                        <input type="text" name="phone" id="phone" />
                        </div>       
            </div><!-- End rowElem -->



          <div id="projectList">
          <ul><li><h5 class="formtitle">Projects:</h5></li></ul>
          <h6>See more in detail <a href="services.html">here</a>.</h6>

          <div id="rowElem">
          <input type="checkbox" name="project" id="addWeb" value="website" />
          <label for="website"> Websites</label>
                <div id="addWebArea">   
                <input type="checkbox" name="web" value="develop" />
                <label for="website" class="checkedform"> Design</label>
                <input type="checkbox" name="web" value="design" />
                <label for="website" class="checkedform"> Develop</label>
                </div>
          </div><!-- End rowElem -->

          <br /><br />
          <div id="rowElem">
          <input type="checkbox" name="project" id="addGraphic" value="graphic" />
          <label for="graphic"> Graphics</label>
                <div id="addGraphicArea">
                <input type="checkbox" name="graphics" value="branding" />
                <label for="graphic" class="checkedform"> Branding</label>
                <input type="checkbox" name="graphics" value="posters" />
                <label for="graphic" class="checkedform"> Posters</label>
                <input type="checkbox" name="graphics" value="other" />
                <label for="graphic" class="checkedform"> Other</label>
                </div>
          </div><!-- End rowElem -->

          <br /><br />
          <div id="rowElem">
          <input type="checkbox" name="project" id="addApp" value="app" />
          <label for="app"> Apps</label>
                <div id="addAppArea">
                <input type="checkbox" name="apps" value="Develop" />
                <label for="app" class="checkedform"> Develop</label>
                <input type="checkbox" name="apps" value="Design" />
                <label for="app" class="checkedform"> Design</label>
                </div>
          </div><!-- End rowElem -->

          <br /><br />
          <div id="rowElem">
          <input type="checkbox" name="project" id="addPres" value="presentations" />
          <label for="presentation"> Presentations</label>
                <div id="addPresArea">
                <input type="checkbox" name="presentation" value="business" />
                <label for="presentation" class="checkedform"> Business</label>
                <input type="checkbox" name="presentation" value="event" />
                <label for="presentation" class="checkedform"> Event</label>
                </div>
          </div><!-- End rowElem -->

          <br /><br />
          <div id="rowElem">
          <input type="checkbox" name="project" id="tut" value="tutorials" />
          <label for="tutorial"> Tutorials</label>
          </div><!-- End rowElem -->

          <br /><br />
          <div id="rowElem">
          <input type="checkbox" name="project" id="addOther" value="other" />
          <label for="other"> Other</label>
                <div id="addOtherArea"> 
                <label for="other" class="checkedform"> Please Specify:</label>
                <input type="text" name="other" value=" " />
                </div>
          </div><!-- End rowElem -->
            </div><!-- End of ProjectList -->

          <br /><br />
        <div class="row">
         <div id="rowElem" class="col-md-4">
           <ul><li><h5 class="formtitle">Timeframe:</h5></li></ul> 

            <select name="timeFrame" id="timeFrame">
                <option id="normal" value="normal">Normal Pace</option>
                <option id="speedy" value="speedy">Speedy Pace</option>
                <option id="urgent" value="urgent">URGENT Pace</option>
            </select>       


         <div id="extraChargeArea">
              <br /><br />
              <h6 style="color:red">Please note that there will be an extra charge for speedy &#38; urgent.</h6>
            </div>

          </div><!-- End rowElem -->
     <div class="col-md-2">
     <br /><br />
     <img src="img/andsign.png" class="img-responsive" alt="&" />
     </div>

          <div id="rowElem" class="col-md-6">
         <ul><li><h5 class="formtitle">Budget:</h5></li></ul>
                        <select name="budget">
             <option value="Price1">$50 - $100</option>
             <option value="Price2">$100 - $500</option>
             <option value="Price3">$500 - $2,500</option>
             <option value="Price4">$2,500 - $5,000</option>
             <option value="Price5">$5,000 - $10,000</option>
             <option value="Price2">$10,000 +</option>
            </select>               
        <br /><br />
            <h6>Pricing will vary, depending on complexity &#38; timeframe.</h6> 
            <h6 style="color:red">Deposit of 40% required before start date.</h6>

         </div><!-- End rowElem -->
          </div><!-- End of Row -->

            <br />



                <div class="rowElem">
                  <input type="submit" value="Submit!" class="contactbutton btn btn-primary btn-lg" />
                  </div><!-- End rowElem -->


          </form>    
          </div> <!-- End form-wrap -->

     <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
     <script type="text/javascript">
        var pageTracker = _gat._getTracker("UA-68528-29");
        pageTracker._initData();
        pageTracker._trackPageview();
        </script>         
    </div><!-- End of Primary Col -->   

JS

$(function () {
$('#contactForm').jqTransform().validate({
    submitHandler: function (form) {
        $(form).ajaxSubmit({
            success: function () {
                $('#contactForm').hide();
                $('#form-wrap').append("<p class='thanks'>Thanks! Your request has been sent.</p>")
            }
        });
    }
});
$("#emailArea").hide();
$("#phoneArea").hide();
$("#phoneArea").hide();
$("#addWebArea").hide();
$("#addGraphicArea").hide();
$("#addAppArea").hide();
$("#addPresArea").hide();
$("#addOtherArea").hide();
$(".jqTransformRadio").click(function () {
    if ($(".jqTransformRadio").eq(1).attr("class") == "jqTransformRadio jqTransformChecked") {
        $("#phoneArea").slideDown();
        $("#emailArea").hide();
    } else {
        $("#emailArea").slideDown();
        $("#phoneArea").hide();
    }
});
$('.jqTransformCheckbox').click(function () {
    if ($('#addWeb').is(':checked')) {
        $('#addWebArea').show();
    } else {
        $('#addWebArea').hide();
    }
});
$('.jqTransformCheckbox').click(function () {
    if ($('#addGraphic').is(':checked')) {
        $('#addGraphicArea').show();
    } else {
        $('#addGraphicArea').hide();
    }
});
$('.jqTransformCheckbox').click(function () {
    if ($('#addApp').is(':checked')) {
        $('#addAppArea').show();
    } else {
        $('#addAppArea').hide();
    }
});
$('.jqTransformCheckbox').click(function () {
    if ($('#addPres').is(':checked')) {
        $('#addPresArea').show();
    } else {
        $('#addPresArea').hide();
    }
});
$('.jqTransformCheckbox').click(function () {
    if ($('#addOther').is(':checked')) {
        $('#addOtherArea').show();
    } else {
        $('#addOtherArea').hide();
    }
});




$("#extraChargeArea").hide();


$(document).on('change', '#timeFrame', function(){
if($('#normal').is(':selected'))
{$('#extraChargeArea').hide();} 
 else
{$('#extraChargeArea').show();}
});

});

PHP

<?php

session_start();

function getRealIp() {
   if (!empty($_SERVER['HTTP_CLIENT_IP'])) {  //check ip from share internet
     $ip=$_SERVER['HTTP_CLIENT_IP'];
   } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {  //to check ip is pass from proxy
     $ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
   } else {
     $ip=$_SERVER['REMOTE_ADDR'];
   }
   return $ip;
}

function writeLog($where) {

    $ip = getRealIp(); // Get the IP from superglobal
    $host = gethostbyaddr($ip);    // Try to locate the host of the attack
    $date = date("d M Y");

    // create a logging message with php heredoc syntax
    $logging = <<<LOG
        \n
        << Start of Message >>
        There was a hacking attempt on your form. \n 
        Date of Attack: {$date}
        IP-Adress: {$ip} \n
        Host of Attacker: {$host}
        Point of Attack: {$where}
        << End of Message >>
          LOG;
          // Awkward but LOG must be flush left

        // open log file
        if($handle = fopen('hacklog.log', 'a')) {

            fputs($handle, $logging);  // write the Data to file
            fclose($handle);           // close the file

        } else {  // if first method is not working, for example because of wrong file permissions, email the data

            $to = 'ashsquires27@icloud.com';  
            $subject = 'HACK ATTEMPT';
            $header = 'From: support@mcdeavdesigns.com';
            if (mail($to, $subject, $logging, $header)) {
                echo "Sent notice to admin.";
            }

        }
}

function verifyFormToken($form) {

    // check if a session is started and a token is transmitted, if not return an error
    if(!isset($_SESSION[$form.'_token'])) { 
        return false;
    }

    // check if the form is sent with token in it
    if(!isset($_POST['token'])) {
        return false;
    }

    // compare the tokens against each other if they are still the same
    if ($_SESSION[$form.'_token'] !== $_POST['token']) {
        return false;
    }

    return true;
}

function generateFormToken($form) {

    // generate a token from an unique value, took from microtime, you can also use salt-values, other crypting methods...
    $token = md5(uniqid(microtime(), true));  

    // Write the generated token to the session variable to check it against the hidden field when the form is sent
    $_SESSION[$form.'_token'] = $token; 

    return $token;
}

// VERIFY LEGITIMACY OF TOKEN
if (verifyFormToken('form1')) {

    // CHECK TO SEE IF THIS IS A MAIL POST
    if (isset($_POST['name'])) {

        // Building a whitelist array with keys which will send through the form, no others would be accepted later on
        $whitelist = array('token','name','email','phone','web','graphics','apps', 'presentation','project','other','timeFrame','budget', 'info');

        // Building an array with the $_POST-superglobal 
        foreach ($_POST as $key=>$item) {

                // Check if the value $key (fieldname from $_POST) can be found in the whitelisting array, if not, die with a short message to the hacker
                if (!in_array($key, $whitelist)) {

                    writeLog('Unknown form fields');
                    die("Hack-Attempt detected. Please use only the fields in the form");

                }
        }



         // PREPARE THE BODY OF THE MESSAGE

        $message = '<html><body>';
        $message .= 'McDeav Designs Possible Client';
        $message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
        $message .= "<tr style='background: #eee;'><td><strong>Name:</strong> </td><td>" . strip_tags($_POST['name']) . "</td></tr>";

        $message .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($_POST['email']) . "</td></tr>";
        $message .= "<tr><td><strong>Phone:</strong> </td><td>" . strip_tags($_POST['phone']) . "</td></tr>";


        $message .= "<tr><td><strong>Projects:</strong> </td><td>" . strip_tags($_POST['project']) . "</td></tr>";


        $message .= "<tr><td><strong>Timeframe:</strong> </td><td>" . strip_tags($_POST['timeFrame']) . "</td></tr>";

        $message .= "<tr><td><strong>Budget:</strong> </td><td>" . strip_tags($_POST['budget']) . "</td></tr>";


        $message .= "<tr><td><strong>Additional Info:</strong> </td><td>" . htmlentities($_POST['info']) . "</td></tr>";
        $message .= "</table>";
        $message .= "</body></html>";




        //  MAKE SURE THE "FROM" EMAIL ADDRESS DOESN'T HAVE ANY NASTY STUFF IN IT

        $pattern = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i"; 
        if (preg_match($pattern, trim(strip_tags($_POST['email'])))) { 
            $cleanedFrom = trim(strip_tags($_POST['email'])); 
        } else { 
            return "The email address you entered was invalid. Please try again!"; 
        } 




        //   CHANGE THE BELOW VARIABLES TO YOUR NEEDS

        $to = 'ashsquires27@icloud.com';

        $subject = 'New Client';

        $headers = "From: " . $cleanedFrom . "\r\n";
        $headers .= "Reply-To: ". strip_tags($_POST['email']) . "\r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

        if (mail($to, $subject, $message, $headers)) {
          echo 'Your message has been sent.';
        } else {
          echo 'There was a problem sending the email.';
        }

        die();

    }
} else {

    if (!isset($_SESSION[$form.'_token'])) {

    } else {
        echo "Hack-Attempt detected. Got ya!.";
        writeLog('Formtoken');
    }

}

    ?>

头后

<?php
 // generate a new token for the $_SESSION superglobal and put them in a hidden field
$newToken = generateFormToken('form1');   
 ?>

CSS

.jqTransformSelectWrapper ul a {
display: block;
padding: 5px;
text-decoration: none;
color:#333;
background-color: #FFF;
font-size: 12px;
     }

   .jqTransformSelectWrapper ul a.selected {
  background: #EDEDED;
  color: #333;
    }

    .jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover       {
     background:#3582c4;
    color: #fff;
       }

      /* -------------
      * Hidden - used to hide the original form elements
      * ------------- */
      .jqTransformHidden {display: none;}

Answer 1

因为您要附加用户单击元素时发生的 click 处理程序，所以应附加在元素值更改时发生的 change 处理程序。尝试这个:

$("#extraChargeArea").hide();

$('#timeFrame').change(function(){
if($('#normal').is(':selected'))
{$('#extraChargeArea').hide();} 
 else
{$('#extraChargeArea').show();}
});

Demo