Отобразить сообщение об успешном завершении после отправки модальной формы - PullRequest
Новая
       7

Отобразить сообщение об успешном завершении после отправки модальной формы

0 голосов
/ 27 апреля 2018

У меня есть контактная форма, связанная с form-to-email.php для отправки электронных писем. Что произойдет, когда вы нажмете «Отправить», он перенаправит вас на другую страницу (новую), что я хотел бы, чтобы показывать / отображать сообщение об успехе в модальной сразу после нажатия кнопки. 

<div class="modal fade" id="modal-register" tabindex="-1" role="dialog" aria-labelledby="modal-register-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
                        <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="modal-register-label">اشتراك</h4>
                    </div>
<div class="modal-body">
<form method="post" name="myemailform" action="form-to-email.php">
    <div class="row">
        <div class="col-xs-12 input-group">
          <input type="radio" name="form-busnisstype" value="company" id="company">
          <label for="company">شركة</label>
          <input type="radio" name="form-busnisstype" value="freelaancer" id="freelancer">
          <label for="freelancer">مستقل</label>
      </div>
      <div class="col-xs-12 input-group">
        <input type="text" name="form-name" id="name" placeholder="الاسم الكريم" required="required">
      </div>
      <div class="col-xs-12 input-group">
        <input type="email" name="form-email" id="email" placeholder="البريد الالكتروني" required="required">
      </div>
      <div class="col-xs-12 input-group">
          <input type="tel" pattern="^[0-9]*$" name="form-phone" id="phone" placeholder="05xxxxxxxx" required="required">
      </div>
        <div class="col-xs-12 input-group">
          <select name="form-officetype" id="officetype" required="required">
                <option value="" disabled selected hidden="" >اختر مكتبك</option>
                <option value="Gold">individual</option>
                <option value="Silver">room</option>
                <option value="Bronze">meeting</option>
                <option value="Basic">orgonization</option>
            </select>
        </div>
        <div class="col-xs-12 input-group">
          <select name="form-membership" id="membership" required="required">
                <option value="" disabled selected hidden="" >اختر باقتك</option>
                <option value="Gold">Gold</option>
                <option value="Silver">Silver</option>
                <option value="Bronze">Bronze</option>
                <option value="Basic">Basic</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 input-group input-group-icon">
        <input placeholder="بداية الاشتراك" type="text" onfocus="(this.type='date')" id="booking" name="form-booking" required="required">
      </div>
        <div class="col-xs-12 input-group input-group-icon">
          <select name="form-person" id="person" required="required">
          <option value="" disabled selected hidden="" >كم عدد الاشخاص</option>
                <option value="1">1 Person</option>
<option value="2">2 People</option><option value="3">3 People</option><option value="4">4 People</option><option value="5">5 People</option>
            </select>
        </div>
        <textarea id="mep_msg" name="form-message" rows="" Placeholder="Comment" required="required"></textarea>
        <input class="send_btn" type="submit" name='submit' value="submit">

      </div>    
    </form>

<script language="JavaScript">
var frmvalidator  = new Validator("myemailform");
frmvalidator.addValidation("name","req","Please provide your name"); 
frmvalidator.addValidation("email","req","Please provide your email"); 
frmvalidator.addValidation("tel","tel","Please enter a valid email address"); 
frmvalidator.addValidation("email","email","Please enter a valid email address"); 
</script>
</div>
</div>
</div>
</div>

<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
  <div class="modal-dialog-success">
    <div class="col-xs-12 pade_none">
      <button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">&times;</button>
      <div class="col-xs-12 pade_none">
        <h2>Success!</h2>
        <p>Your message has been sent.</p>
      </div>
      <div class="col-xs-12 pad_none">
      </div>
    </div>
  </div>
</div>
</div>
<!--Success pop up ends-->

и form-to-email.php выглядит следующим образом: 

<?php

/* Configuration */
$subject = 'Membership Enquiry'; // Set email subject line here
$mailto  = 'email here'; // Email address to send form submission to
/* END Configuration */

$name = $_POST['form-name'];
$visitor_email = $_POST['form-email'];
$message = $_POST['form-message'];
$phone = $_POST['form-phone'];
$busnisstype = $_POST['form-busnisstype'];
$officetype = $_POST['form-officetype'];
$membership = $_POST['form-membership'];
$person = $_POST['form-person'];
$booking = $_POST['form-booking'];

// 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>الاسم</b>: $name<br>
<b>الايميل</b>: $visitor_email<br>
<b>رقم الجوال</b>: $phone<br>
<b>نوع المشأة</b>: $busnisstype<br>
<b>المكتب المرغوب</b>: $officetype<br>
<b>العضوية</b>: $membership<br>
<b>عدد الاشخاص</b>: $person<br>
<b>التاريخ المتوقع لبدء الاشتراك</b>: $booking<br>
<p>ملاحضات اخرى: <b>$message</b></p>
";


$headers = "From: $name <$visitor_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>";

if (mail($mailto, $subject, $message, $headers)) {
    header('Location: thank-you.html');
} else {
    echo 'Form submission failed. Please try again...'; // failure
}

?>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Вы делаете две вещи: либо используете AJAX для отправки запроса в скрипт form-to-email.php, либо создаете скрытый iframe с id="email" name="email" и используете target="email" в теге формы, он откроет ваш php-скрипт в iframe и выполнит его но он не будет перенаправлять на эту страницу, тогда вы можете использовать 

document.getElementById('email').addEventListener('load', function() {
    alert('Email Send Successfully');
});

вместо предупреждения вы можете добавить тостер (зеленая полоса) к вашему модалу.

0 голосов
/ 27 апреля 2018

Вы перенаправляете на thank-you.html. Добавьте туда код (с сообщением об успехе) и, если вы хотите, чтобы он был модальным, просто добавьте модальный код: 

<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
  <div class="modal-dialog-success">
    <div class="col-xs-12 pade_none">
      <button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">&times;</button>
      <div class="col-xs-12 pade_none">
        <h2>Success!</h2>
        <p>Your message has been sent.</p>
      </div>
      <div class="col-xs-12 pad_none">
      </div>
    </div>
  </div>
</div>
</div>
<!--Success pop up ends-->

И запускать JavaScript при вводе: 

<body onload="myOnloadFunc();">

Ваша функция должна показывать модальное значение: 

function myOnloadFunc() {
    $('#success_msg').modal('show');
}
...