2014-03-27 3 views
3

나는 그물 전체를 검색해 보았지만 몇 가지 해결책을 찾았지 만 모두 JS 또는 AJAX를 사용하고 어느 정도 도움이되었습니다. 나는 PHP에 익숙하지 않고 AJAX에 대한 단서가 없으므로 여기 누군가가 PHP & HTML 또는 많아야 JS를 사용하는 솔루션을 제공 할 수있다.양식 제출 후 부트 스트랩 모달을 닫지 못하도록

저는 고객의 웹 사이트의 바닥 글 섹션에있는 부트 스트랩 3 모달 안에 매우 간단한 가입 양식을 가지고 있습니다. PHP는 구독자가 공식 및 회사 이메일 주소를 사용하여 구독하고 다른 /보다 간단한 간단한 확인을하는지 확인합니다.

양식이 훌륭하게 작동하지만 문제는 사용자가 클릭하여 모달 닫기를 제출하자마자 트리거 버튼에서 모달을 다시 열 때까지 사용자가 성공 또는 실패 메시지를 보지 못합니다. 사용자가 양식을 제출하고 양식 제출이 성공했는지 여부를 표시 한 후에도 모달을 열어두기를 원합니다. 나는 나의 문제를 적절하게 설명 할 수 있었으면 좋겠다. 여기 참조 내 HTML & PHP는 다음과 같습니다

HTML :

<div id="footer"> 
    <div class="container"> 
     <div class="col-md-6"> 
     <div id="SubscribeModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">✕</button> 
       </div> 
       <div class="modal-body"> 
       <?php include('subscribe.php') ?> 
       </div> 
       <div class="modal-footer"></div> 
      </div><!-- /.modal-content --> 
      </div><!-- /.modal-dalog --> 
     </div><!-- /.modal --> 
     <a data-toggle="modal" href="#SubscribeModal" class="text-muted">Subscribe</a> 
     </div> 
    </div> 
    </div> 

PHP :

<?php 
    if(isset($_POST['subscribe'])){ 
    /* Configuration */ 
    $subject = 'Please subscribe me to your Risk Alerts. Thank you.'; // Set email subject line here 
    $mailto = '[email protected]'; // Email address to send form submission to 
    /* END Configuration */ 
    if(empty($_POST['firstname'])){ 
     $error = "Please add your first name"; 
    }elseif(empty($_POST['lastname'])){ 
     $error = "Please add your last name"; 
    }elseif(empty($_POST['email'])){ 
     $error = "Please add your business email";  
    }else{ 
     $firstname  = $_POST['firstname']; 
     $lastname  = $_POST['lastname']; 
     $email   = $_POST['email']; 

     // HTML for email to send submission details 
     $body = " 
     <br> 
     <p>The following information was submitted through the contact form on your website:</p> 
     <p><b>Name</b>: $firstname $lastname<br> 
     <b>Email</b>: $email<br> 
     "; 


     $headers = "From: $firstname $lastname <$email> \r\n"; 
     $headers .= "Reply-To: $email \r\n"; 
     $headers .= "MIME-Version: 1.0\r\n"; 
     $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 
     $message = "<html><body>$body</body></html>"; 

     //build list of not allowed providers as lowercase 
     $NotAllowedClients = array("aol","applemail","comcast","entourage","gmail","hotmail","outlook"); 

     preg_match_all('/\@(.*?)\./',$email,$clientarr);    
     $client = strtolower($clientarr[1][0]);    

     if(in_array($client,$NotAllowedClients)){ 
      //Failed 
      $notice = "<div class=\"row-fluid\"> 
      <div class=\"span12\"> 
       <h3>Subscription Failed!</h3> 
       <p>Please use an official/company email address to subscribe. <a href=\"?\">Try again</a></p> 
      </div> 
     </div>"; 
     }else{ 
      //Passed 
      //echo $message; 
      mail($mailto, $subject, $message, $headers); 
      $notice = "<div class=\"row-fluid\"> 
      <div class=\"span12\"> 
       <h3>Subscription successful!</h3> 
       <p>Thank you for taking the time to subscribe to our weekly Risk Alerts.</p> 
      </div> 
     </div>"; 
     } 
    } 
} 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Risk Alerts</title> 
</head> 
<body> 
<?php 
if(isset($notice)){ 
echo $notice; 
}else{ 
    //Show error for missing field 
    if(isset($error)){echo $error;} 
?> 
    <div class="thumbnail center well well-small text-center"> 
     <form id="subscription" method="post" action="" class="validate" novalidate> 
      <div class="row"> 
       <div class="col-xs-6 col-md-6"> 
        <input type="text" name="firstname" value="" class="form-control input-md" placeholder="your first name" /> 
       </div> 
        <div class="col-xs-6 col-md-6"> 
       <input type="text" name="lastname" value="" class="form-control input-md" placeholder="your last name" /> 
       </div> 
      </div><p></p> 
      <input type="text" value="" name="email" class="form-control" placeholder="your email address" required /><br /> 
      <div class="clear"> 
       <input type="submit" value="Subscribe" name="subscribe" class="btn btn-md btn-primary button" /> 
      </div> 
     </form> 
    </div> 

    <?php 
    } 
    ?> 
</body> 
</html> 
+0

나는 모달 닫는 이유는이 ... 데이터 토글 = "모달 때문입니다 상당히 확신 "버튼을 클릭하십시오. 이것을 꺼내어 다시 시도해보십시오. 나는 비록 시험하지 않았다. – user1641165

+0

그렇지 않으면이 링크를 확인하십시오 .... https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/ODY5ShHVPsM ..... 작동하지 않으면이 jquery를 사용할 수 있습니다. link http://stackoverflow.com/questions/15279716/form-inside-the-modal-bootstrap. – user1641165

+0

안녕하세요, 답장을 보내 주셔서 감사합니다. 그러나 데이터 토글 = "모달"을 제거하면 모달이 전혀 열리지 않습니다 !! 나는 PHP와 자바 스크립트를 처음 사용한다. 어쨌든 나는 당신에 의해 연결에 제공된 JS를 넣어려고 .... ....내 PHP에서 닫는 본문 태그 바로 앞에 있지만 양식이 작동하지 않습니다! 이 문제를 해결하는 방법을 모르겠습니다. – user3463636

답변

2

내가 실제 PHP를 확인하지 않은하지만 작동 가정, 내가 함께 양식을 제출 것 아약스와 응답을 처리합니다. 이 모달 내용에 ID를 추가합니다 :

  <div class="modal-body" id="modal_content"> 
      <?php include('subscribe.php') ?> 
      </div> 

그런 다음이에 제출 버튼을 변경

그래서, 다음과 같은 시도

<a href="javascript:void(0)" class="text-muted" id ="submit_button">Subscribe</a> 

는 다음의 바닥이 jQuery를 추가하려면 양식 페이지 (DIRECT_URL_TO_SUBSCRIBE을 (를) 올바른 URL로 바꿉니다) :

jQuery(function ($){ 
    $('#submit_button').click(function(){ 
     var post_url = 'DIRECT_URL_TO_SUBSCRIBE.php'; 

     $.ajax({ 
      type : 'POST', 
      url : post_url, 
      data: $('#subscription').serialize(), //ID of your form 
      dataType : 'html', 
      async: true, 
      beforeSend:function(){ 
       //add a loading gif so the broswer can see that something is happening 
       $('#modal_content').html('<div class="loading"><img scr="loading.gif"></div>'); 
      }, 
      success : function(data){ 
       $('#modal_content').html(data); 
      }, 
      error : function() { 
       $('#modal_content').html('<p class="error">Error in submit</p>'); 
      } 
     }); 
    })   
}); 
0

안녕하세요,이 작동,

**data-backdrop="static"** 

부트 스트랩 모달 클래스에 추가합니다. 그러면 문제가 해결 될 것입니다.

<button type="button" data-backdrop="static" data-toggle="modal" 
    data- target="#yourID">Subscribe</button> 
+0

[link] (http://getbootstrap.com/2.3.2/javascript.html#modals)에서 더 많은 것을 읽으십시오. – terdia

1

비슷한 문제를 파악하기 위해 노력 중이므로 향후이를 위해이 문제를 남겨 두겠습니다.

PHP에 추가

<?php 
    $keepOpen=""; 
    if(isset($notice)){ 
    $keepOpen="<script> $('#SubscribeModal').modal('show'); </script>"; 

HTML에 추가

<?php echo $keepOpen; ?> 
관련 문제