AJAX 양식 제출 스타일링

jQuery와 함께 Ajax를 사용하여 웹 폼을 제출하고 있습니다. webform이 좋은 감사 메시지를 제출하면 메시지가 나타납니다. 메시지는 양식 자체를 다루며 다음에해야 할 일에 대한 정보를 사용자에게 제공합니다. 양식에는 양식이 여러 필드를 가질 수 있으며 사용자가 제출을 명중하면 양식이 사라지는 것을 볼 수 있지만 그 내용은 그 것입니다.AJAX 양식 제출 스타일링

사용자를 페이지 상단으로 차 버릴 수있는 JS를 추가했지만 (상단의 감사 메시지가 표시됨) 여전히 양식이있는 빈 공간이 많이있을 수 있습니다.

내가 가진 질문은 어떻게 폼의 시작 상태에서 표시로 바뀌는 지 알 수 있습니다. 확인 메시지가 그 자리에 표시됩니다. 여기

function jqsub() { 

var $j = jQuery.noConflict(); 
var $jform = $j('#ajaxform'); // form ID 
var $jmessagebox = $j('#ajaxdiv'); // message box ID 
var $jsuccessmessage = "<h3>Thank You For Your Submission!</h3>"; // success message in HTML format 
var $jerrormessage = "<h3>Error - Please Try Again</h3>"; //error message in HTML format 

$j.ajax({ 
    type: 'POST', 
    url: $jform.attr('action'), 
    data: $jform.serialize(), 
    success: function (msg) { 
         if (msg.FormProcessV2Response.success) { 
         $jmessagebox.append($jsuccessmessage) 
         $jmessagebox.fadeIn(); 
         } 
         else { 
         $jmessagebox.append($jerrormessage) 
         $jmessagebox.fadeIn(); 
         }  
       }, 
    error: function (msg) { 
         $jmessagebox.append($jerrormessage) 
         $jmessagebox.fadeIn(); 
       }, 
    }); 
$j('html, body').animate({ scrollTop: 0 }, 0); 
}

내가 작업하고있는 페이지입니다 : 여기

내 코드의 복사본입니다 http://ubhape2remodel.businesscatalyst.com/testform.html

다른 한 참고 : 간단한 방법이 무엇인지 양식에 오류가있는 경우 오류 메시지가 사라지고 양식이 다시 표시 되나요? (기본적으로 양식을 보여주는 위치와 메시지를 비교하는 상태로 다시 바꿉니다.) 다시 한번 감사드립니다!

모두 의미가 있습니다.

조언, 아이디어 및 도움을 언제나 환영합니다.

감사합니다.

린다

출처

2011-07-05 L84

올바르게 표시됩니다. 양식의 성공적인 제출 후에 그것은 성공 메시지를 올바르게 나타내고있다. –

$jform.fadeOut("slow", function(){ 
    $jmessagebox.fadeIn("slow"); 
});

희망이 도움이됩니다. 건배는

출처

2011-07-05 06:03:43

제게 이것은 BraedenP의 도움을 받아 양식을 허용하는 데 도움이됩니다. 오류 발생시 다시 페이드 인하십시오. 감사! – L84

당신은 환영합니다 :) –

페이지에있는 양식의 ID는 'ajaxform'입니다 그래서 (위에서 정의 된 $ j를 객체 사용) 양식을 숨겨야 다음 I를

$j("#ajaxform").css("display","none");

년 5 월 성공 콜백 함수 안에 숨기기/스크롤링 코드를 두는 것도 좋습니다. 양식이 성공적으로 제출되지 않은 경우 사용자에게 알리고 싶지 않습니까?

buttonID는 메시지 박스에서 버튼의 ID입니다 (오류 후 양식을 다시 데려 보여 편집 :

: 당신은 천천히 양식을 페이드 아웃 후 메세지를 지정하지 않고를 보여줄 수

$j("#buttonID").live("click",function(){ 
    $jmessagebox.fadeOut("slow", function(){ 
     $jform.fadeIn("slow"); 
    }); 
});

출처

2011-07-05 06:00:40 BraedenP

고마워요! 숨기기/스크롤 코드는 무엇을 의미합니까? 양식이 제출되면 성공을 표시합니다. 성공 메시지 대신 표시 될 오류가있는 경우 그러나 이것은 질문을 제기합니다.오류 코드가 표시되지만 양식은 사라집니다. 오류 메시지가 사라지고 양식이 다시 표시되는 간단한 방법은 무엇입니까? (기본적으로 양식을 보여주는 위치와 메시지를 비교하는 상태로 다시 바꿉니다.) 다시 한번 감사드립니다! – L84

이렇게하려면 $ jmessagebox.fadeIn() 함수 다음에 지연을 넣으십시오. 그래서 폼을 다시 가져 오기 전에 5 초의 지연을 만들 수 있습니다 : $ jmessagebox.fadeIn(). delay (5000) .fadeOut(); $ j ("# ajaxform"). fadeIn(); – BraedenP

페이드 인 할 경우에는 위의 코드 대신 $ j ("# ajaxform"), fadeOut() 또는 $ j ("# ajaxform"). hide()를 사용해보십시오. 이렇게하면 jQuery 애니메이션 함수를 혼동하지 않게됩니다. – BraedenP

사용 요소를 숨길 수 있습니다 .hide()

출처

2011-07-05 06:03:56 run

메시지에 퇴색 한 후, 양식에서 메시지를 추출하고, 성공에 먼저 양식을 퇴색하지 왜

if (success) { 
    $('#formId').fadeOut('fast', function(){ 
      $('#messageId').fadeIn('fast'); 
    }); 
}

는 사용자가 제공해야하는 다른 (연속) 후 하나를 발생 make'em하기 fadeOut의 콜백 함수.

출처

2011-07-05 06:06:07

AJAX 양식 제출 스타일링

답변

관련 문제