dsepcxw181184853
2017-06-03 17:54
浏览 52

如何在bootstrap模式中编写表单的成功消息?

SOLVED

Ok, I solved the problem with AJAX but I had to delete my WordPress because it didn't work with it so later I will upload back by individual directory. Luckily I don't need it for my index. The working code is by CodexWorld. I hope I help someone who is helpless.


I am searching for solution all day but I don't get relevant solution anywhere. Other similar questions here are old, maybe there are fresh solution.

So I am using Bootstrap the first time (files are on the themes of Wordpress). I started to build a contact form in Modal and if I hit submit the window closes, I get the e-mail, but the success-message only shows if I reopen it. I tried every solution I found on internet.

I am not familiar with javascript and jquery, I don't know how to use it.

In the footer I implemented:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

In index there is the form with Modal:

 <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
    <form class="form-horizontal clearfix" id="contact-form" name="contact" role="form" method="post" action="index.php">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Küldj egy üzenetet</h4>
          </div>
          <div class="modal-body">

</div>


<div class="form-group">
    <label class="col-sm-2 control-label">Itt landol</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" placeholder="hello@kanizsaipatricia.hu" disabled>
    </div>
  </div>

    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Név</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="Minta János" value="<?php echo htmlspecialchars($_POST['name']); ?>">
            <?php echo "<p class='text-danger'>$errName</p>";?>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" name="email" placeholder="valaki@email.hu" value="<?php echo htmlspecialchars($_POST['email']); ?>">
            <?php echo "<p class='text-danger'>$errEmail</p>";?>
        </div>
    </div>
    <div class="form-group">
        <label for="message" class="col-sm-2 control-label">Üzenet</label>
        <div class="col-sm-10">
            <textarea class="form-control" placeholder="Ide írd az üzenetet" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
            <?php echo "<p class='text-danger'>$errMessage</p>";?>
        </div>
    </div>
        </div>

                        <?php echo $result; ?>

      <div class="modal-footer">
        <button type="button" class="btn btn-cancel hvr-fade" data-dismiss="modal">Mégsem</button>
        <input type="submit" id="submit" name="submit" data-toggle="modal" data-target="#resultModal" value="Elküldöm" class="btn btn-info hvr-wobble-horizontal">
    </div>  
</pop:form>
      </div>
    </div>

The php code behind the form:

if (isset($_POST["submit"])) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'Üzenetküldő űrlap'; 
    $to = 'hello@kanizsaipatricia.hu'; 
    $subject = 'Új üzenet formon keresztül';

    $body = "Feladó: $name
 E-Mail: $email
 Üzenet:
 $message";

    // Check if name has been entered
    if (!$_POST['name']) {
        $errName = 'Kérlek, add meg a neved!';
    }

    // Check if email has been entered and is valid
    if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $errEmail = 'Nem érvényes e-mail cím!';
    }

    //Check if message has been entered
    if (!$_POST['message']) {
        $errMessage = 'Nem írtál üzenetet.';
    }


// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success noshadow">Elküldve.</div>';
    } else {
        $result='<div class="alert alert-danger noshadow">Sajnálom, hiba lépett fel az üzenet küldése közben. Próbáld újra!</div>';
    }
}
}

I'm open minded for any solution in any language! Please help!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongying2112 2017-06-03 21:24
    已采纳

    Ok, I solved the problem with ajax but I had to delete my WordPress because it didn't work with it so later I will upload back by individual directory. Luckily I don't need it for my index. Thanks to CodexWorld.

    Bootstrap & jQuery Library

    Bootstrap is used to create modal popup and design HTMl form, include the bootstrap and jQuery library first.

        <!-- Latest minified bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    
    <!-- Latest minified bootstrap js -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    

    Bootstrap Modal Popup Form

    <!-- Button to trigger modal -->
    <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#modalForm">
        Open Contact Form
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="modalForm" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <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="myModalLabel">Contact Form</h4>
                </div>
    
                <!-- Modal Body -->
                <div class="modal-body">
                    <p class="statusMsg"></p>
                    <form role="form">
                        <div class="form-group">
                            <label for="inputName">Name</label>
                            <input type="text" class="form-control" id="inputName" placeholder="Enter your name"/>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail">Email</label>
                            <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email"/>
                        </div>
                        <div class="form-group">
                            <label for="inputMessage">Message</label>
                            <textarea class="form-control" id="inputMessage" placeholder="Enter your message"></textarea>
                        </div>
                    </form>
                </div>
    
                <!-- Modal Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary submitBtn" onclick="submitContactForm()">SUBMIT</button>
                </div>
            </div>
        </div>
    </div>
    

    JavaScript Code: Validate and Submit Form

    <script>
    function submitContactForm(){
        var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        var name = $('#inputName').val();
        var email = $('#inputEmail').val();
        var message = $('#inputMessage').val();
        if(name.trim() == '' ){
            alert('Please enter your name.');
            $('#inputName').focus();
            return false;
        }else if(email.trim() == '' ){
            alert('Please enter your email.');
            $('#inputEmail').focus();
            return false;
        }else if(email.trim() != '' && !reg.test(email)){
            alert('Please enter valid email.');
            $('#inputEmail').focus();
            return false;
        }else if(message.trim() == '' ){
            alert('Please enter your message.');
            $('#inputMessage').focus();
            return false;
        }else{
            $.ajax({
                type:'POST',
                url:'submit_form.php',
                data:'contactFrmSubmit=1&name='+name+'&email='+email+'&message='+message,
                beforeSend: function () {
                    $('.submitBtn').attr("disabled","disabled");
                    $('.modal-body').css('opacity', '.5');
                },
                success:function(msg){
                    if(msg == 'ok'){
                        $('#inputName').val('');
                        $('#inputEmail').val('');
                        $('#inputMessage').val('');
                        $('.statusMsg').html('<span style="color:green;">Thanks for contacting us, we\'ll get back to you soon.</p>');
                    }else{
                        $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                    }
                    $('.submitBtn').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                }
            });
        }
    }
    </script>
    

    Send Contact Request Email (submit_form.php)

    <?php
    if(isset($_POST['contactFrmSubmit']) && !empty($_POST['name']) && !empty($_POST['email']) && (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) && !empty($_POST['message'])){
    
        // Submitted form data
        $name   = $_POST['name'];
        $email  = $_POST['email'];
        $message= $_POST['message'];
    
        /*
         * Send email to admin
         */
        $to     = 'admin@example.com';
        $subject= 'Contact Request Submitted';
    
        $htmlContent = '
        <h4>Contact request has submitted at CodexWorld, details are given below.</h4>
        <table cellspacing="0" style="width: 300px; height: 200px;">
            <tr>
                <th>Name:</th><td>'.$name.'</td>
            </tr>
            <tr style="background-color: #e0e0e0;">
                <th>Email:</th><td>'.$email.'</td>
            </tr>
            <tr>
                <th>Message:</th><td>'.$message.'</td>
            </tr>
        </table>';
    
        // Set content-type header for sending HTML email
        $headers = "MIME-Version: 1.0" . "
    ";
        $headers .= "Content-type:text/html;charset=UTF-8" . "
    ";
    
        // Additional headers
        $headers .= 'From: CodexWorld<sender@example.com>' . "
    ";
    
        // Send email
        if(mail($to,$subject,$htmlContent,$headers)){
            $status = 'ok';
        }else{
            $status = 'err';
        }
    
        // Output status
        echo $status;die;
    }
    
    打赏 评论

相关推荐 更多相似问题