0
我是一個JavaScript的完整新手。我的網站上有一些js正在處理隱藏某些表單的div。我想要改變表單的一些值，並且我對javascript的一些語法感到困惑。這裏是我一起工作的HTML和腳本：更改表單變量，並需要將JavaScript更改爲新變量
<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-\.][email protected]([\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隱藏行動仍在與新價值的工作。有人能幫忙嗎？謝謝！
你注意到你有重複的代碼？ –
我做過了，對我而言，奇怪的是，如果我刪除了頂級代碼，那麼腳本不再有效。我知道PHP，但沒有JavaScript，所以我希望學習更多，因爲我去這裏這個代碼... – Joel
我仍然試圖找出究竟是什麼，你是試圖acomplish，什麼部分的HTML做你想隱藏？ –