2012-04-13 4 views
0

У меня есть страница с тремя простыми форматами html, которые передаются в различные таблицы в базе данных (с использованием AJAX и JQuery). Когда форма представляются, в настоящее время он исчезает и через сообщения сообщения:Ajax/JQuery form refresh on submit

<div class="success_m" style="display:none;"> 
    <p>Manufacturer has been added!</p> 
    <h4><a href="path/to/the/forms/page">Add another Manufacturer!</a></h4> 
</div> 

Чтобы разместить другой производитель в базу данных, я нажимаю «Добавить еще один Производитель!» ссылку, и она обновляет всю страницу. Я попытался настроить его так, чтобы при отправке формы оно исчезло, сообщение об успешном завершении отобразится на секунду, а затем возвращается очищенная форма ... Это работает, но теперь форма вообще не исчезает, и сообщение просто мигает ниже него.

Моя попытка ниже, спасибо за любой совет !!

Майк

$(document).ready(function(){ 
    $("form#submit_m").submit(function() { 
    // we want to store the values from the form input box, then send via ajax below 
    var manu_name  = $('#manu_name').attr('value'); 
    var manu_web  = $('#manu_web').attr('value'); 
    var manu_email  = $('#manu_email').attr('value'); 
    var manu_phone  = $('#manu_phone').attr('value'); 
    var manu_phone_ext = $('#manu_phone_ext').attr('value'); 
    var manu_info  = $('#manu_info').attr('value'); 

     $.ajax({ 
      type: "POST", 
      url: "process_m.php", 
      data:"manu_name="+ manu_name+"&manu_web="+manu_web+"&manu_email="+manu_email+"&manu_phone="+ manu_phone 
      +"&manu_phone_ext="+manu_phone_ext+"&manu_info="+manu_info, 
      success: function(){ 
       // reset form, success message, refresh form 
       resetForm($('#submit_m')); 
       $('form#submit_m').hide(); 
       $('div.success_m').fadeIn(250).delay(1000).fadeOut(250); 
       $('form#submit_m').show(); 
      } 
     }); 
    return false; 
    }); 
}); 

Эта функция resetform в очереди успеха от THIS SO поста.

Любая помощь приветствуется!

ответ

1

Вы упускаете открытыми и закрывающую скобку на вызове show()function

... 
$('div.success_m').fadeIn(250).delay(1000).fadeOut(250); 
$('form#submit_m').show(); // add parenthesis here 
... 

Чтобы сделать форму скрыть и вновь появляется вам нужно будет постепенно исчезать назад, как ваш успех DIV или использовать что-то вроде setTimeout(). То, как вы справляетесь с этим, теперь просто скрывается, а затем показывает без перерыва. Так появляется мгновенно ...

Пример:

setTimeout(function() { $('form#submit_m').show(); }, 1000); 

Here is a jsFiddle example

+0

Вау ... Это было быстро! я попробую сейчас, спасибо! – TheNally

+0

ОК. Он работает, за исключением того, что теперь форма никогда не исчезает. Сообщение просто отображается под ним и исчезает. Это функционально, но я чувствую, что форма должна исчезнуть, так что пользователь уверен, что их вход был принят. – TheNally

+0

Я отредактировал OP, чтобы отразить ваше наблюдение. – TheNally