Question

我是javascript的新手。我的网站上有一些js处理隐藏表单中的一些div。我想要改变表单的一些值，我对javascript的一些语法感到困惑。这是我正在使用的html和脚本：

<div class="outeremailcontainer">
    <div id="emailcontainer">
        <?php include('verify.php'); ?>
        <form action="../index_success.php" method="post" id="sendEmail" class="email">
            <h3 class="register2">Newsletter Signup:</h3>
            <ul class="forms email">
                <li class="name">
                    <label for="yourName">Name: </label>
                    <input type="text" name="yourName" class="info" id="yourName" value="<?php echo $_POST['yourName']; ?>" /><br />
                </li>
                <li class="city"><label for="yourCity">City: </label>
                    <input type="text" name="yourCity" class="info" id="yourCity" value="<?php echo $_POST['yourCity']; ?>" /><br />
                </li>
                <li class="email">
                    <label for="emailFrom">Email: </label>
                    <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?php echo $_POST['emailFrom']; ?>" />
                     <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
                     ?>
                </li>
                <li class="buttons email">
                     <button type="submit" id="submit">Send</button>
                     <input type="hidden" name="submitted" id="submitted" value="true" />
                </li>
            </ul>
        </form>
    <div class="clearing">
    </div>
  </div>
</div>

和脚本：

<script type="text/javascript">

$(document).ready(function(){

 $('#emailFrom')
  .focus(function(){
   if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
 $('#sendEmail')

 .find('.name, .city').slideDown(300, function(){ $(this).show(); });
 $('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex:       1001 });
 $('<div id="overlay"></div>').appendTo('body');
 });

$('#overlay').live('click', function(){
$('#sendEmail')
 .css({ backgroundColor : 'transparent' })
 .find('.name, .city').slideUp(300);
$('.outeremailcontainer').css({ position : 'static' });
$('#overlay').remove();
 });

});

页面底部还有一个包含在脚本中的脚本：

$(document).ready(function(){

$('#emailFrom')
.focus(function(){
 if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
 $('#sendEmail')

  .find('.name, .city').slideDown(300, function(){ $(this).show(); });
 $('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex : 1001 });
 $('<div id="overlay"></div>').appendTo('body');
 });

  $('#overlay').live('click', function(){
 $('#sendEmail')
  .css({ backgroundColor : 'transparent' })
  .find('.name, .city').slideUp(300);
 $('.outeremailcontainer').css({ position : 'static' });
 $('#overlay').remove();
  });

});

$(document).ready(function(){
  $("#submit").click(function(){
    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;


    var emailFromVal = $("#emailFrom").val();

    if(emailFromVal == '') {
      $("#emailFrom").after('<span class="error"><br />You forgot to enter the email address to send from.</span>');
      hasError = true;

    } else if(!emailReg.test(emailFromVal)) {
      $("#emailFrom").after('<span class="error"<br />>Enter a valid email address to send from.</span>');
      hasError = true;
}

    var yourNameVal = $("#yourName").val();
    if(yourNameVal == '') {
    $("#yourName").after('<span class="error"><br />You forgot to enter your name.</span>');
    hasError = true;
}

 var yourCityVal = $("#yourCity").val();
if(yourCityVal == '') {
    $("#yourCity").after('<span class="error"><br />You forgot to enter your city.</span>');
    hasError = true;
}
if(hasError == false) {
  $(this).hide();
  $("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
  $.post("/includes/sendemail.php",
//emailTo: emailToVal, 
       { emailFrom: emailFromVal, yourName: yourNameVal, yourCity: yourCityVal  },
         function(data){
        $("#sendEmail").slideUp("normal", function() {
          $("#sendEmail").before('<h3 class="register2">Thank you!  You\'re on the email list!</h3><p class="emailbox">Click <a href="xxx">HERE</a> for your free song.</p>');
        });
         }
     );
}
return false;
 });
});

以上代码一切正常。但是，我想使用不同的表单操作和一些不同的变量。代码的表单部分需要如下所示：

    <div class="outeremailcontainer">
    <div id="emailcontainer">
        <?php include('verify.php'); ?>
        <form action="https://madmimi.com/signups/subscribe/66160" method="post" id="mad_mimi_signup_form" class="email">
            <h3 class="register2">Newsletter Signup:</h3>
            <ul class="forms email">
                <li class="name">
                    <label for="signup_name">Name: </label>
                    <input type="text" name="signup[name]" class="info" id="signup_name" value="<?php echo $_POST['signup_name']; ?>" /><br />
                </li>
                <li class="city"><label for="signup_city">City: </label>
                    <input type="text" name="signup[city]" class="info" id="signup_city" value="<?php echo $_POST['signup_city']; ?>" /><br />
                </li>
                <li class="email">
                    <label for="signup_email">Email: </label>
                    <input type="text" name="signup[email]" class="required" id="signup_email" value="<?php echo $_POST['signup_email']; ?>" />
                     <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
                     ?>
                </li>
                <li class="buttons email">
                     <button type="submit" id="webform_submit_button">Send</button>
                     <input type="hidden" name="submitted" id="submitted" value="true" />
                </li>
            </ul>
        </form>
    <div class="clearing">
    </div>
  </div>
</div>

我无法弄清楚哪些js代码需要更改div隐藏操作才能使用新值。有人能帮忙吗？谢谢！

Answer 1

看起来您只需要更改JS文件中字段的名称：

<input type="text" name="yourName" class="info" id="yourName" value="<?php echo $_POST['yourName']; ?>" />

已变成：

<input type="text" name="signup[name]" class="info" id="signup_name" value="<?php echo $_POST['signup_name']; ?>" />

所以你的JS需要改变

var yourNameVal = $("#yourName").val();

到

var yourNameVal = $("#signup_name").val();

同样适用于所有字段，您需要选择正确的元素才能操作它

此处是一个展开jquery selectors

的链接

更改表单变量并需要将javascript更改为新变量

1 个答案: