在提交表单上打开模态引导

-1

如何在用户验证表单时打开模式？ S'inscrire 在提交表单上打开模态引导

<div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
      <h3 class="modal-title">Merci !</h3> 
      </div> 
     </div> 
     </div> 
    </div>

来源

2017-09-05 DenisMasot

当你说验证表单，你的意思时，他们已经提交了吗？ –

可以使用模态id或class当用户点击提交打开它按钮。比方说你有这个HTML

<form id="submit-button"> 
    //form components 
</form>

然后，你可以这样写jQuery代码：

//trigger when form is submitted 
$("#submit-button").submit(function(e){ 
    $('#registration').modal('show'); 
    return false; 
});

的$('#registration').modal('show');将显示模式和return false;防止形式发布，这将在页面停止数据重装。或者，您也可以这样做

$(document).ready(function() { 
    $('#submit-button').on('submit', function(e){ 
     $('#registration').modal('show'); 
     e.preventDefault(); 
    }); 
});

e.preventDefault();将停止页面重新加载页面。

来源

2017-09-05 12:08:04

这将无法正常工作，页面将刷新提交。 –

有返回false将阻止页面重新加载 –

当你的形式进行验证，您可以到添加到您的功能：当您按下逃脱模式韩元

$('#registration').modal({ 
     show: 'false', 
     backdrop: 'static', 
     keyboard: false 
    });

键盘虚假手段't 消失了。
当人们用模型外部的鼠标点击时，将背景设置为静态意味着。模态不会关闭。

编辑

if ($("form button").valid()) { 
     $('#registration').modal({ 
      show: 'false', 
      backdrop: 'static', 
      keyboard: false 
      }); 
};

来源

2017-09-05 12:02:48 Steven

它不起作用，每当页面加载时它都是模式。 – DenisMasot

显示我的代码如何检查表单是否有效。（$（“form button”）。valid（））{ $（'＃registration'）。modal（'show'）;如果您的验证成功，您需要粘贴此文件 – Steven

。 } – DenisMasot

可以在验证成功，补充一点：

$("#registration").modal('show');

来源

2017-09-05 12:05:30

我会使用Ajax解决方案来提交表单而不刷新页面。

您甚至可以根据请求的结果更新模态响应。

$("#ajaxform").submit(function(e) { 
 

 
    var url = "path/to/your/script.php"; // the script where you handle the form input. 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    url: url, 
 
    data: $("#ajaxform").serialize(), // serializes the form's elements. 
 
    success: function(data) 
 
    { 
 
    //if request successful 
 
    $(".modal-title").text('Request successful'); 
 
    $('#registration').modal('show'); 
 
    }, 
 
    error: function(data) 
 
    { 
 
     //if request unsuccessful 
 
     $(".modal-title").text('Request failed'); 
 
     $('#registration').modal('show'); 
 
    } 
 
    }).done(function() { 
 
    //finally, reinitialise modal text back to default 'merci' 
 
    $(".modal-title").text('merci'); 
 
    }); 
 

 
    e.preventDefault(); // avoid to execute the actual submit of the form. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST" class="form-group"> 
 
    First Name: <input type="text" name="fname" value="" class="form-control"/> <br/> Last Name: <input type="text" name="lname" value="" class="form-control"/> <br/> Email : <input type="text" name="email" value="" class="form-control"/> <br/> 
 
    <button type="submit" class="btn btn-default">submit</button> 
 
</form> 
 

 
<div class="modal fade" id="registration" tabindex="1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <h3 class="modal-title">Merci !</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-09-05 12:27:32

在提交表单上打开模态引导

回答

相关问题