2013-05-15 22 views
0

그래서 문의 양식을 만들고 있습니다. 양식이 제출되면 성공 또는 오류 메시지를 부트 스트랩 모달에 추가하려고합니다.동적으로 PHP로 div에 콘텐츠 추가

다음은 양식을 제출하고 모달을 여는 버튼입니다.

<input class="btn btn-info" type="submit" value="Submit" name="Submit" data-toggle="modal" href="#contactModal"/> 

그래서 버튼을 클릭하면이 양식을 제출하고 모달를 엽니 다. 스크립트의 success 또는 failure에 동적으로 모달에 문자열을 추가하는 방법이 있습니까? 여기

는 PHP의 성공/실패 액션 현재

if ($success){ 
print "<meta http-equiv="refresh" content="0;URL=contactthanks.html">"; 
} 
else{ 
    print "<meta http-equiv="refresh" content="0;URL=error.html">"; 
} 

이다 그러나 나는 그것이 페이지 여기

을 리디렉션 <meta> 태그를 추가하는 대신 모달에 내용을 추가 할 모달 코드

입니다 그래서
<div id="contactModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Thanks!</h3> 
    </div> 
    <div class="modal-body"> 
    <p>I'm pretty busy sometimes but I'll try my best to message you back <strong>ASAP</strong>!</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div> 

방법 것 I 상쾌한 일이없는 모달 내에서 <div>의 내부에 print 전자 페이지 또는 리디렉션?

나는 어떤 PHP를 모르거나 AJAX 난 그냥 (정확히 이틀) JS와 jQuery를 시작

답변

4

당신은 양식을 제출하지하고 페이지 새로 고침을 가질 수 없습니다 시작 아니에요. 당신이 가장하고 싶은 일은 대신 PHP에 AJAX 요청을 사용하는 것입니다. JSON으로 성공/실패 상태를 반환합니다. 그러면 JSON으로 컨텍스트를 추가하여 javascript로 컨텐트를 추가 할 수 있습니다.

양식 대신, <input type="button" />onclick="someFunction"으로 사용하고 someFunction이 AJAX 호출을 사용합니다.

jQuery를 사용하는 것이 좋습니다.

귀하의 PHP가

//do something with submitted values 

if ($success){ 
    echo json_encode(True); 
} 
else{ 
    echo json_encode(False); 
} 

과 같을 것이다 그리고 AJAX 호출이 될 것을

$.ajax({ 
    type: "POST", 
    url: "dosomething.php", 
    data: { formValue1 = <get value using jquery>, etc... } 
    dataType: "json", 
    success: processData, 
    error: function(){ alert("failed"); } 
}); 

function processData(data) 
{ 
    if(data) { 
     $("div#divid").html("what you want to add inside the div"); 
    } 
} 
같은
관련 문제