Fatal编程技术网
  • javascript/
  • Javascript 如何在bootstrap模式中编写表单的成功消息？

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

javascript php forms twitter-bootstrap

Javascript 如何在bootstrap模式中编写表单的成功消息？,javascript,php,forms,twitter-bootstrap,bootstrap-modal,Javascript,Php,Forms,Twitter Bootstrap,Bootstrap Modal,已解决 好的，我用AJAX解决了这个问题，但我不得不删除我的WordPress，因为它不适用于它，所以稍后我将按单个目录上传回去。幸运的是，我的索引不需要它。工作代码为。我希望我能帮助无助的人 我整天都在寻找解决方案，但我在任何地方都找不到相关的解决方案。这里的其他类似问题都是老问题，也许有新的解决方案 所以我第一次使用Bootstrap（文件以Wordpress为主题）。我开始在Modal中构建一个联系人表单，如果我点击submit，窗口就会关闭，我会收到电子邮件，但成功消息只有在我重新打开

已解决

好的，我用AJAX解决了这个问题，但我不得不删除我的WordPress，因为它不适用于它，所以稍后我将按单个目录上传回去。幸运的是，我的索引不需要它。工作代码为。我希望我能帮助无助的人

我整天都在寻找解决方案，但我在任何地方都找不到相关的解决方案。这里的其他类似问题都是老问题，也许有新的解决方案

所以我第一次使用Bootstrap（文件以Wordpress为主题）。我开始在Modal中构建一个联系人表单，如果我点击submit，窗口就会关闭，我会收到电子邮件，但成功消息只有在我重新打开它时才会显示。我尝试了在互联网上找到的每一个解决方案

我不熟悉javascript和jquery，我不知道如何使用它

在页脚中，我实现了：

<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>
索引中有带模态的表格：

 <!-- 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>


&时代；
Küldj együzenetet
伊特兰多尔酒店
Név

好的，我用ajax解决了这个问题，但我不得不删除我的WordPress，因为它不适用于它，所以稍后我将按单个目录上传回去。幸运的是，我的索引不需要它

引导和jQuery库

引导用于创建模式弹出窗口和设计HTMl表单，首先包括引导和jQuery库


    <!-- 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>






引导模式弹出窗体


<!-- 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>



<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>




开放式联系方式
&时代；
接近
联系方式


名称
电子邮件
消息
接近
提交


JavaScript代码：验证并提交表单


<!-- 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>



<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>




函数submitContactForm（）{
变量reg=/^[A-Z0-9.\%+-]+@（[A-Z0-9-]+\）+[A-Z]{2,4}$/i；
var name=$（'#inputName'）.val（）；
var email=$（'#inputEmail'）.val（）；
var message=$（'#inputMessage'）.val（）；
如果（name.trim（）=''）{
警报（'请输入您的姓名'）；
$（'#inputName'）.focus（）；
返回false；
}else if（email.trim（）=''）{
提醒（'请输入您的电子邮件'）；
$（'#inputEmail'）.focus（）；
返回false；
}else if（email.trim（）！=''&！reg.test（email））{
警报（'请输入有效电子邮件'）；
$（'#inputEmail'）.focus（）；
返回false；
}else if（message.trim（）==''）{
警报（'请输入您的消息'）；
$（'#inputMessage'）.focus（）；
返回false；
}否则{
$.ajax({
类型：'POST'，
url:'submit_form.php'，
数据：'contactFrmSubmit=1&name='+name+'&email='+email+'&message='+message，
beforeSend:函数（）{
$（'.submitBtn'）.attr（“禁用”、“禁用”）；
$（'.modal body'）.css（'opacity'，'.5'）；
},
成功：功能（msg）{
如果（msg=='ok'）{
$（'#inputName'）.val（''）；
$（'#inputEmail'）.val（''）；
$（'#inputMessage'）.val（''）；
$（'.statusMsg'）.html（'感谢您与我们联系，我们将很快与您联系。
'）；
}否则{
$（'.statusMsg'）.html（'出现了一些问题，请重试'）；
}
$（'.submitBtn'）.removeAttr（“禁用”）；
$（'.modal body'）.css（'opacity'，''）；
}
});
}
}


发送联系请求电子邮件（submit\u form.php）


所有这些代码都在同一个文件中吗？切换到使用ajax发布表单，根据响应隐藏/显示msgs。。。你如何显示这些错误我不知道如何切换到ajax。我已经看到了很多使用ajax的解决方案，但其中任何一个都可以工作。你能写一个解决方法吗？我不在乎我是否必须打开一个新的模式来显示结果消息，或者它以相同的方式显示。我对这些问题的任何解决方案都持开放态度…@JeremyHamm Jeremy，由于wordpress主题，共有3个文件：页眉、索引、页脚，但索引也包括页眉和页脚：
是的，@Lawrencerone我也必须重新打开模式才能看到这些错误消息。。。我忘记回答这个问题了。