양식을 제출 한 후 어떻게 확인 메시지를 남기게합니까?

이메일 주소 입력란과 제출 버튼으로 구성된 간단한 뉴스 레터 가입 양식을 만들려고합니다. 사용자가 주소를 입력하고 제출을 클릭하면 양식 아래에 확인 메시지가 표시됩니다. 메시지가 나타나 즉시 사라집니다. 나는 그것을 어떻게 머무르게 만들 수 있습니까? 여기 내 코드는 다음과 같습니다.양식을 제출 한 후 어떻게 확인 메시지를 남기게합니까?

<body> 
    <form id="newsletter_signup"> <!-- form action to be added later --> 
     <p><input type="text" name="email" id="email" placeholder="[email protected]" /> 
     <input type="submit" value="Subscribe"></p> 
     <div id="feedback"></div> 
    </form> 
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
<script> 
    $('#newsletter_signup').submit(function() { 
     var email_address = $('#email').val(); 
     $('#feedback').html('Thanks! ' + email_address + ' has been signed up.'); 
    }); 
</script>

출처

2013-07-05 Kris Hunt

당신은 아약스를 사용하여 데이터를 전송해야합니다. 현재 구현은'form' 태그 (정의되지 않았으므로 페이지 자체)에 정의 된 페이지로 데이터를 보내고 페이지를 서버에서 다시 가져 오는 데이터로 다시로드합니다. 서버가받는 데이터를 기반으로 페이지를 변경하도록 선택할 수도 있습니다. – Sumurai8

양식을 제출 중이며 페이지를 새로 고칩니다. 따라서 페이지가 다시로드되기 전에 메시지가 즉시 표시됩니다. 아약스를 사용하여 양식을 제출하면 페이지가 다시로드되지 않거나 서버 측 코드를 사용하여 감사 메시지를 표시 할 수 있습니다.

메모는 페이지에 사용자의 이메일 주소를 표시하는 XSS에 취약합니다.

출처

2013-07-05 14:45:21

양식을 제출하면 기본적으로 전체 페이지가 새로 고침되므로 페이지가 사라집니다. 이 문제를 해결하려면

, 당신은 세 가지 중 하나를 (다른 너무 방법이있을 수있다) 할 필요가있을 것이다 :

양식을 제출하는 AJAX 호출을 사용하여;
서버 왕복 후 페이지가 브라우저로 반환 될 때 메시지의 모양을 트리거하는 코드를 변경하십시오. 또는
왕복 이전에 제어가 반환 될 때 선택되는 쿠키를 설정하면 메시지가 표시됩니다.

이 기능의 대부분은 서버 측에서 사용하는 언어에 따라 다릅니다.

출처

2013-07-05 14:47:10

대신 아약스 요청을 통해 양식을 제출,이에 코드를 변경

$('#newsletter_signup').submit(function(e) { 
    e.preventDefault(); 
    $.post('newsletter_signup', function (data){ 
     var email_address = $('#email').val(); 
     $('#feedback').html('Thanks! ' + email_address + ' has been signed up.'); 
    }); 
    return false; 
});

출처

2013-07-05 14:47:32 Icarus

양식을 제출 한 후 어떻게 확인 메시지를 남기게합니까?

답변

관련 문제