Question

我有一个很好看的jQuery幻灯片表单。以下是提交过程中的一些代码：

    $('a.contact-submit').click(function(){
    var name = $('div.contact input.move').val();
    var email = $('div.contact input.locate').val();
    var phone = $('div.contact input.fone').val();
    var message = $('div.contact textarea.western').val();

    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    if(reg.test(email) == false) {
    $('div.contact').hide('slow', function() {
    $('div.contact').html('<h2>Contact Us</h2><p>Sorry, there seems to be a problem with your email address. Please <a href="#" class="contact-try-again">try again</a>.</p>');
    $('div.contact').show('slow');
    });//end of slide up

    }//end of if statement for checking email.

   //SO ON, SO ON. CHECKING REST OF CLIENT INPUT....
});

因此，当客户端收到错误消息时，就像上面的无效电子邮件一样，他们会点击“再试一次”。现在我希望滑动操作发生，然后通过联系表单返回。但是，必须有用户之前的输入。

所以我已经开始这样做了：

$('a.contact-try-again').live('click', function(){
  $('div.contact').hide('slow', function(){
   $('div.contact').html('<h2>Contact Us</h2><form class="tab"><label for="move">Your Name:</label><input type="text" name="move"  class="move" value="'+name+'" /><br /><label for="locate">Your Email:</label><input type="text" name="locate" class="locate" value="'+email+'" /><br /><label for="locate">Your Number:</label><input type="text" name="fone" class="fone" value="'+phone+'" /><br /><label for="western">Your Message:</label><textarea name="western" class="western">'+message+'</textarea><br /><label for="contact">&nbsp;</label><a href="#contact" class="contact-submit">Send!</a><a href="#" class="prepend-1 contact-close">Cancel</a><br /></form>');
   $('div.contact').show('slow');   
 });//end of hide
});//end of contact-try-again

但没有运气。它向上滑动，不会向下滑动。我也试过alert(name)，但它没有接受它。

那么如何获取输入的值然后重新显示它们呢？我对Javascript没有太多经验，没有jQuery。

Answer 1

通过添加return false;

，您应该阻止浏览器在发生错误时发布表单

$('a.contact-submit').click(function(){

    if(reg.test(email) == false) {
         .....//your code
         return false;
    }

});

或event.preventDefault();

$('a.contact-submit').click(function(event){

    if(reg.test(email) == false) {
         .....//your code
         event.preventDefault();
    }

});

Answer 2

// Retrieves value of email input.    
var email = $('input:[name=email]').attr('value');

Answer 3

经过一些艰苦的研究后，我遇到了全局变量。所以这就是我在提交动作中所做的：

name = $('div.contact input.move').val();
email = $('div.contact input.locate').val();
phone = $('div.contact input.fone').val();
message = $('div.contact textarea.western').val();

所以基本上我已经删除了变量开头的var。它将其设置为全局变量。

然后我可以使用它：

$('a.contact-try-again').live('click', function(){
 $('div.contact').hide('slow', function(){
  $('div.contact').html('<h2>Contact Us</h2><form class="tab"><label for="move">Your Name:</label><input type="text" name="move"  class="move" value="'+name+'" /><br /><label for="locate">Your Email:</label><input type="text" name="locate" class="locate" value="'+email+'" /><br /><label for="locate">Your Number:</label><input type="text" name="fone" class="fone" value="'+phone+'" /><br /><label for="western">Your Message:</label><textarea name="western" class="western">'+message+'</textarea><br /><label for="contact">&nbsp;</label><a href="#contact" class="contact-submit">Send!</a><a href="#" class="prepend-1 contact-close">Cancel</a><br /></form>');
  $('div.contact').show('slow');   
 });//end of hide   
});

之所以使用.live是因为它已被修改。有关.live处理程序here

的更多信息，请参阅

因此，提交必须能够工作之后，提交操作还必须具有.live处理程序。像这样：

$('a.contact-submit').live('click', function(){
  //Code, code, code...
});

希望这会有所帮助，我花了很多时间才想出这个......

Javascript获取以前的表单输入

3 个答案: