Javascript получить предыдущую форму ввода - PullRequest
0 голосов
/ 13 марта 2011

У меня есть симпатичная модная форма 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.

Ответы [ 3 ]

4 голосов
/ 13 марта 2011

Вы должны запретить браузеру публиковать форму при возникновении ошибки, добавив 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();
    }

});
1 голос
/ 13 марта 2011
// Retrieves value of email input.    
var email = $('input:[name=email]').attr('value'); 
0 голосов
/ 13 марта 2011

Итак, после некоторых трудных исследований я наткнулся на глобальные переменные.Итак, вот что я сделал в рамках действия отправки:

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 см. Здесь

Таким образом, после этого отправка должна иметь возможность работать, действие отправки также должно иметь обработчик .live.Вот так:

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

Надеюсь, это поможет, мне понадобились целые годы, чтобы понять это ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...